[JavaScript] JSON データ内特定要素の文字列を正規表現でチェックする

こんにちは、広野です。

React アプリを書いていて、ユーザからの大量のインプットデータに入力ミスがないかチェックしたくなるときがあります。

そんなときに必要な JavaScript コードを書いてみましたので、紹介します。

やりたいこと

  • JavaScript で、JSON データの特定要素の文字列を正規表現でチェックしたい
  • 指定した正規表現にマッチしない場合は、アラートを上げ処理を中断したい

サンプルケース

ものすごくシンプルなケースで試したいと思います。
以下の JSON データがユーザからのインプットとしてあったとしましょう。

[
  {"email": "user01@sample.xxx"},
  {"email": "user02@sample.xxx"},
  {"email": "user03sample.xxx"}
]

メールアドレスの書式が間違っていないか、後続処理を行う前にアプリ内でチェックしたいと思います。
3つ目のメールアドレスはエラーを起こすために意図的に @ を抜いています。

メールアドレスを表す正規表現は、以下になります。

/^[a-zA-Z0-9_+-]+(.[a-zA-Z0-9_+-]+)*@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/

ユーザの入力データがこれにマッチしているか繰り返しチェックさせるために、以下のメソッドを使用します。

Array.prototype.some() - JavaScript | MDN
some() メソッドは、指定された関数で実装されているテストに、配列の中の少なくとも 1 つの要素が 合格するかどうかを判定します。配列の中で指定された関数が true を返す要素を見つけた場合は true を返し、そうでない場合は false を返します。それ以外の場合は false を返します。配列は変更しません...
RegExp.prototype.test() - JavaScript | MDN
test() メソッドは、正規表現と指定された文字列の一致を調べるための検索を実行します。 true または false を返します。

サンプルコード

実際に書くとこんな感じになります。

変数 data に JSON データが格納されていると思ってください。

const regexpEmail = /^[a-zA-Z0-9_+-]+(.[a-zA-Z0-9_+-]+)*@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/;

if (data.some((element) => regexpEmail.test(element.email) === false)) {
  alert("データに誤りがあります。");
} else {
  //後続処理
}

配列の1要素ごとに、element 変数に要素を代入して正規表現テストをかけています。
element.email がテスト対象であるメールアドレスになります。

ここでは、正規表現にマッチしないデータが1つでもあると if 文の判定が true になる仕様になっています。
サンプルケースで紹介したデータを data に入れて流すと、アラートが表示されます。

まとめ

いかがでしたでしょうか?

内容は少なかったですが、地味に役立つコードなので紹介いたしました。

本記事が皆様のお役に立てれば幸いです。

著者について
広野 祐司

AWS サーバーレスアーキテクチャを駆使して社内クラウド人材育成アプリとコンテンツづくりに勤しんでいます。React で SPA を書き始めたら快適すぎて、他の言語には戻れなくなりました。サーバーレス & React 仲間を増やしたいです。AWSは好きですが、それよりもAWSすげー!って気持ちの方が強いです。
取得資格:AWS 認定は12資格、ITサービスマネージャ、ITIL v3 Expert 等
2020 - 2023 Japan AWS Top Engineer 受賞
2022 - 2023 Japan AWS Ambassador 受賞
2023 当社初代フルスタックエンジニア認定
好きなAWSサービス:AWS Amplify / AWS AppSync / Amazon Cognito / AWS Step Functions / AWS CloudFormation

広野 祐司をフォローする
クラウドに強いによるエンジニアブログです。
SCSKは専門性と豊富な実績を活かしたクラウドサービス USiZE(ユーサイズ)を提供しています。
USiZEサービスサイトでは、お客様のDX推進をワンストップで支援するサービスの詳細や導入事例を紹介しています。
アプリケーション開発ソリューション
シェアする
TechHarmony
タイトルとURLをコピーしました