JavaScriptで正規表現を使ってメールアドレスをチェックする方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで正規表現を使ってメールアドレスをチェックする方法について現役エンジニアが解説しています。正規表現とは、文字や記号を使って文字列の中の特定部分を指定する表現方法です。正規表現には文字列リテラルか正規表現オブジェクトのRegExpを利用する方法があります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptで正規表現を使ってメールアドレスをチェックする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。
 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで正規表現を使ってメールアドレスをチェックする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

  1. 正規表現とは
  2. 正規表現の使い方
  3. メールアドレスをチェックする方法
  4. 実際に書いてみよう
  5. まとめ

 

正規表現とは

正規表現とは、文字や記号を使って文字列の中の特定部分を指定する表現方法です。

正規表現を使うと、行頭、行末、数値のみを指定したり特定の文字コードを指定したりといった様々な方法で文字列を表現できます。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

正規表現の使い方

JavaScriptで正規表現を使うには2つの方法があります。

1つ目はスラッシュで囲われた文字列リテラルを利用する方法です。

var reg = /ab+c/;

2つ目は正規表現オブジェクトであるRegExpを利用する方法です。

var reg = new RegExp('ab+c');

これらの方法で正規表現を使い、特定の文字列の抽出や文字列の検索等を行うことが可能になります。

メールアドレスをチェックする方法

メールアドレスをチェックするために、まずはメールアドレスにのみマッチする正規表現を用意しましょう。

メールアドレスのルールは大まかに以下のようです。

[英数字+記号]@[ドメイン]

これを正規表現で表すと以下のようになります。

var reg = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/;

 

実際に書いてみよう

では実際にJavaScriptでメールアドレスチェックを行うコードを書いてみましょう。

  var address = "test123@test.com";
  var reg = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/;
  if (reg.test(address)) {
    console.log("正しい");
  } else {
    console.log("間違っている");
  }

このコードを実行するとaddress変数内に入っているメールアドレスの形式が正しいかどうかを正規表現にて判断し、結果を表示します。

address変数内に入っているメールアドレスをさまざまなものに変えて結果を確認してみましょう。

まとめ

さて、今回のJavaScriptで正規表現を使ってメールアドレスをチェックする方法はいかがでしたでしょうか。

このように正規表現を利用すると今回のようにメールアドレスのチェックの他にも様々なことに応用できます。

正規表現を使わない方法もあるかとは思いますが、ほとんどの場合正規表現を使った方がわかりやすくスマートな記述が出来ますので覚えておきましょう。

筆者プロフィール

黒木一志(くろきかずし)

TechAcademyジュニアのゲームアプリコースを担当しています黒木です。
現在は会社員としてシステムエンジニアをしております。

会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。

プライベートではバンド演奏や本を読んだり映画を見たりしております。最近はスケボーにハマってます。
みなさんにプログラミングの楽しさをお伝え出来たらと思っております。何卒宜しくお願い致します。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。