メール regex JavaScript バリデーター

メール regex とは何ですか？

メール regex は、文字列が user@example.com のような有効なメールアドレスのフォーマットに一致するかどうかを確認する正規表現です。

以下を確認するのに役立ちます：

• ローカル部（@ の前）が有効かどうか

• ドメイン（@ の後）が正しく構造化されているかどうか

• メールが許可された文字と TLD を使用しているかどうか

ただし、regex ベースの検証には限界があることを理解しておくことが重要です。regex はメールの構造と許可された文字を確認できますが、TLD が実際に存在するかどうかは確認できません。完全な検証には、現在有効な TLD のリスト（.com、.org、.net など）との照合が推奨されます。

JavaScript でのメール regex パターン

基本的なメール検証によく使用されるパターン：

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

パターンの説明：

• ^[a-zA-Z0-9._%+-]+ - ローカル部（ユーザー名）

• @ - アットマーク

• [a-zA-Z0-9.-]+ - ドメイン名

• \.[a-zA-Z]{2,}$ - TLD（例：.com、.org）

コード例 1 - 基本的なメール検証

const email = "hello@example.com";
const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
console.log(pattern.test(email)); // true

コード例 2 - 複数のメールを検証

const emails = ["admin@gmail.com", "user@site.co", "invalid@.com"];
const isValidEmail = (email) => /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/.test(email);
emails.forEach(email => {
console.log(${email} → ${isValidEmail(email)});
});

コード例 3 - フォームでのリアルタイム検証

<input type="text" id="emailInput" placeholder="メールアドレスを入力">
<p id="message"></p>
<script>
document.getElementById("emailInput").addEventListener("input", function () {
const email = this.value;
const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;
document.getElementById("message").textContent =
pattern.test(email) ? "有効なメール" : "無効なメール";
});
</script>

メール検証における大文字小文字の扱い

技術的には、メールアドレスのローカル部（@ の前）は大文字小文字を区別できます。ただし、現実のほとんどのメールプロバイダーは大文字小文字を区別せずにメールを扱います。実用的には、メールを小文字に変換して保存・比較することが一般的です。

HTML vs JavaScript: メール検証のアプローチ

HTML5 組み込み検証

HTML5 では <input type="email"> を使うだけでブラウザが自動的にメールフォーマットを確認します。

• メリット： 最小限の設定、即時フィードバック、モダンブラウザでサポート済み

• デメリット： 一部の無効なメールが通過する場合がある、カスタムルールの追加が困難

JavaScript regex 検証

JavaScript では正規表現を使って正確なルールを定義できます。

• メリット： 完全にカスタマイズ可能、サーバーサイドロジックと組み合わせ可能、ブラウザ間で一貫した動作

• デメリット： コードの記述と保守が必要、複雑な検証では regex が複雑になる

なぜ確認メールが重要なのか

どんなに洗練された regex パターンでも、メールアドレスが正しく見えるかどうかしか確認できません。ユーザーが実際にそのメールボックスにアクセスできるかは確認できません。確認メールを送信することで：

• 所有権を確認： そのメールにアクセスできる人だけがリンクをクリックでき、なりすましや詐欺的なサインアップを防止

• データ品質の向上： 使用不能または誤入力されたメールの収集を防止

• セキュリティの保護： ボットや悪意のある行為者による偽アカウント登録を防止

• 配信可能性の向上： クリーンなアドレスによりバウンス率を低下させ、送信者の評判を向上

高度なメール検証ライブラリ

JavaScript でより厳密なメール検証が必要な場合、いくつかの優れたサードパーティライブラリが利用可能です：

• email-addresses：最新の仕様を使用して複雑なアドレスを解析・検証

• validator.js：RFC 準拠と国際化されたメールサポートを持つ isEmail 関数を提供

• mailchecker：構造検証に加えて使い捨て・偽・一時的なメールを検出

メールを小文字で保存する理由

すべてのメールアドレスを小文字で保存することをお勧めします。これにより：

• 重複レコードが減少し、「User@site.com」と「user@site.com」が別々のメールとしてカウントされません

• 検索、照合、検証が高速になります

• regex パターンを i（大文字小文字区別なし）フラグで少しシンプルにできます

プロのヒント

• 必要でない限り過度に複雑な regex は避けてください。有効なエッジケースのメールをブロックする可能性があります。

• regex だけに依存しないでください。エッジケースを検出し injection を防ぐためにサーバーサイド検証を使用してください。

• regex はドメインの存在を検証せず、構造のみを確認します。必要に応じて DNS ルックアップを使用してください。

• Unicode を含む国際的なメールには Unicode フラグまたはネイティブライブラリを使用してください。

• 検証前に常にスペースをトリムしてください。末尾のスペースでも有効なメールが失敗する可能性があります。

組み合わせをお勧めするツール

• JavaScript Regex Tester: メールパターンを JavaScript でライブでビルド・デバッグ

• 電話番号 regex JavaScript バリデーター: メールと連絡先情報を両方収集するフォームに使用

• UUID regex JavaScript バリデーター: メールアドレスと一意の識別子をペアリング

• Base64 エンコーダー: 送信前にメールデータをエンコード

• token ジェネレーター: 確認リンクやサインアップフローで確認済みメールと token を組み合わせる