JavaScriptで正規表現を使ってメールアドレスをチェックする方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptで正規表現を使ってメールアドレスをチェックする方法について現役エンジニアが解説しています。正規表現とは、文字や記号を使って文字列の中の特定部分を指定する表現方法です。正規表現には文字列リテラルか正規表現オブジェクトのRegExpを利用する方法があります。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
この記事を書いた人
テックアカデミーマガジン編集部
Web制作でメールアドレス入力フォームを作ることがあります。
入力された文字が、きちんとメールアドレスの形式になっているか確かめたいですよね。
そんな時に役立つ、JavaScriptの正規表現でメールアドレスをチェックする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
正規表現が呪文みたいでよくわからないという方、ぜひ本記事でマスターしてください。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptで、正規表現を使ってメールアドレスをチェックする方法について詳しく説明していくね！
お願いします！
メールアドレスチェックの方法
JavaScriptで、正規表現を使ってメールアドレスをチェックするサンプルコードはこちらです。
See the Pen
pattern by TAKAYOSHI (@lspuwbkv)
on CodePen.
/*入力フォームの要素*/
var form=document.getElementById("form");
/*結果出力用の要素*/
var result=document.getElementById("result");
/*メールアドレスのパターン 正規表現*/
var pattern = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]+.[A-Za-z0-9]+$/;
/*フォーム入力のイベントハンドラ*/
form.addEventListener("input", (e) => {
/*メールアドレスのパターンにマッチするかチェック*/
if (pattern.test(form.value)) {
/*パターンにマッチした場合*/
result.textContent = "メールアドレスです";
} else {
/*パターンにマッチしない場合*/
result.textContent = "メールアドレスではありません";
}
})
ポイントはこちらの1行。
/*メールアドレスのパターン 正規表現*/
var pattern = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]+.[A-Za-z0-9]+$/;
正規表現で、どのような文字順がメールアドレスであるか、というパターンを定義しています。
と言われても、複雑な英数字記号の羅列で、いまいちピンときませんよね。
詳しく説明していきます。
正規表現とは
正規表現とは、文字順のパターンを表現する記述方法。
JavaScriptだけではなく、コンピューターやプログラミングでは様々な用途で使われています。
文章がパターンに合致するかチェックしたり、パターンで検索や置換をします。
大量の文章を扱うときは、とても便利なものなのです。
正規表現には、メタキャラクターと呼ばれる、意味をもった特殊な記号があります。
メタキャラクターを式のように組み合わせて、文字順のパターンを表現するのです。
呪文のような正規表現の式も、メタキャラクターの意味を理解すれば読み解けるはずです。
代表的なメタキャラクターの意味
| メタキャラクター | 意味 | 記述例 | 記述例の意味 |
| ^ | 文頭 | ^abc | abcで始まる |
| $ | 文末 | xyz$ | xyzで終わる |
| [ ] | []の中のいずれか1文字 | [abc] | abcの中の１文字 |
| [ – ] | []の中のいずれか1文字 | [a-x] | aからxの中の1文字 |
| * | 直前文字を0回以上繰り返す | abc* | ab / abc / abcc / abccc |
| + | 直前文字を1回以上繰り返す | abc+ | abc / abcc / abccc |
| { n } | 直前の文字をn回繰り返す | abc{2} | abcc |
| . | 任意の1文字 | … | abc / XYZ / 907 / a-a |
簡単な例として、郵便番号の文字順パターンを表現してみましょう。
郵便番号は、数字3桁、ハイフン、数字4桁のパターンですので、このようになります。
^[0-9]{3}-[0-9]{4}$
先頭には文頭を表す^、末尾には文末を表す$があります。
[0-9]が0から9までの数字を表し、数字の桁数を{3}や{4}と表しました。
メールアドレスの正規表現
では、メールアドレスを表す正規表現を考えてみましょう。
まず、メールアドレスにはどのようなパターンがあるのか整理してみます。
メールアドレスは、「ユーザー名＠ドメイン名」という作りになってますね。
/*基本のメールアドレス*/ username@domain.com /*最短のパターンは5文字*/ u@d.c /*大文字が入ることもある*/ UserName@doMain.jp /*サブドメインの場合はドットが複数*/ username@domain.co.jp /*先頭と末尾以外はハイフン、ドット、アンダーバーが使える*/ user_na-me.mine@do_ma-in.co.jp
このようなパターンをすべて網羅できる正規表現にする必要があります。
まずは、アットマークより前のユーザー名からみていきましょう。
先頭1文字は大文字小文字の英字と数字です。
記号は先頭にきません。
[A-Za-z0-9]{1}
それ以降には、英数字と記号が連なりユーザー名になります。
[A-Za-z0-9_.-]*
ユーザー名の終わりには、アットマークが必ず1つ入ります。
@{1}
続いてドメイン名は、ドットが1つ以上入ります。
いちばん最後のドットより前を、英数字か記号の連続で表現しましょう。
[A-Za-z0-9_.-]+
その後にドットを続けます。
.
そしてその後に、英数字で終わります。
末尾に記号が来ることはありません。
[A-Za-z0-9]+
これをつなげ、文頭^と文末$で囲むとこのようになります。
^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]+.[A-Za-z0-9]+$
これで、メールアドレスのパターンを表す正規表現の完成です。
JavaScriptでパターンマッチ
では、JavaScriptで文字列が正規表現パターンとマッチするか判定してみます。
まずは正規表現の定義です。
JavaScriptで正規表現を表すには、両端をスラッシュで囲います。
ここでは、pattern変数に正規表現を代入しました。
/*メールアドレスのパターン 正規表現*/
var pattern = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]+.[A-Za-z0-9]+$/;
次に、文字列がパターンとマッチするか判定するtestメソッドを使いましょう。
pattern.test(“判定したい文字列”) のように、引数に文字列を入れて、条件式で使います。
/*メールアドレスのパターンにマッチするかチェック*/
if (pattern.test(form.value)) {
/*パターンにマッチした場合*/
result.textContent = "メールアドレスです";
} else {
/*パターンにマッチしない場合*/
result.textContent = "メールアドレスではありません";
}
サンプルコードでは、formに入力された値と比較し、結果をresultに表示しています。
まとめ
JavaScriptで正規表現を使ってメールアドレスをチェックする方法でした。
いかがだったでしょう、呪文のような正規表現の式、読み解けるようになりましたか。
正規表現には、まだまだ便利なメタキャラクターがあります。
使いこなすことで様々な応用ができますので、気になった方はぜひ調べてみてくださいね。
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
