JavaScriptで電話番号を正規表現で検証する方法｜初心者向けサンプル解説

1. 正規表現とは？

1. 正規表現とは？

正規表現（せいきひょうげん）とは、文字列の中で特定のパターンに一致するかを調べるためのルールです。プログラムで「この文字列は特定の形かどうか」を簡単にチェックできます。電話番号やメールアドレスの形式チェックなどでよく使われます。

2. 電話番号の基本的な形式を考える

2. 電話番号の基本的な形式を考える

日本の携帯電話番号は、通常「090-1234-5678」「080-1234-5678」のような形式です。ハイフンで区切られ、数字の桁数も決まっています。この形式を正規表現で表現して検証します。

3. 正規表現で電話番号を検証する基本例

3. 正規表現で電話番号を検証する基本例

const tel = "090-1234-5678";
const regex = /^0\d{2}-\d{4}-\d{4}$/;

if (regex.test(tel)) {
  console.log("電話番号の形式は正しいです。");
} else {
  console.log("電話番号の形式が正しくありません。");
}

この例では、^は文字列の先頭、$は文字列の末尾を意味します。\dは数字、{2}や{4}は数字の個数を表しています。testメソッドで、文字列が正規表現に一致するかを確認できます。

4. ハイフンなしの電話番号も許可する例

4. ハイフンなしの電話番号も許可する例

const tel2 = "09012345678";
const regex2 = /^0\d{2}-?\d{4}-?\d{4}$/;

if (regex2.test(tel2)) {
  console.log("電話番号の形式は正しいです（ハイフン有無対応）。");
} else {
  console.log("電話番号の形式が正しくありません。");
}

この例では、-?を使うことで、ハイフンがあってもなくてもOKにしています。?は「直前の文字が0回または1回出現する」という意味です。

5. ユーザー入力を検証する関数にする

5. ユーザー入力を検証する関数にする

function isValidTel(tel) {
  const regex = /^0\d{2}-?\d{4}-?\d{4}$/;
  return regex.test(tel);
}

console.log(isValidTel("080-9876-5432")); // true
console.log(isValidTel("08098765432"));   // true
console.log(isValidTel("123-4567-8901")); // false

関数にすることで、複数の電話番号を簡単に検証できます。入力フォームのチェックにも使えます。

6. 電話番号にスペースや全角文字が入っている場合の検証

6. 電話番号にスペースや全角文字が入っている場合の検証

const tel3 = "０９０-１２３４-５６７８";
const regex3 = /^0\d{2}-\d{4}-\d{4}$/;

if (regex3.test(tel3)) {
  console.log("電話番号の形式は正しいです。");
} else {
  console.log("全角数字や間違った文字が含まれています。");
}

この例では全角数字は一致しません。正規表現は半角の数字に対してのみ有効です。ユーザー入力の前に全角を半角に変換すると便利です。

7. 応用：市外局番や携帯番号を区別して検証

7. 応用：市外局番や携帯番号を区別して検証

const tel4 = "03-1234-5678"; // 東京の市外局番
const regex4 = /^(0\d{1,4})-(\d{1,4})-(\d{4})$/;

if (regex4.test(tel4)) {
  console.log("市外局番・携帯番号どちらも検証可能です。");
} else {
  console.log("形式が正しくありません。");
}

市外局番や携帯番号は桁数が異なる場合があります。この正規表現では、最初の数字ブロックを1〜4桁に設定し、真ん中のブロックも1〜4桁にしています。柔軟な検証が可能です。

8. 正規表現を使う際の注意点

8. 正規表現を使う際の注意点

正規表現は非常に便利ですが、複雑すぎるパターンを作ると理解や修正が難しくなります。初心者はまずシンプルな桁数やハイフンのチェックから始め、必要に応じて応用してください。また、全角文字やスペースの扱いも考慮するとより安全に検証できます。

9. まとめ：電話番号検証で正規表現を活用しよう

9. まとめ：電話番号検証で正規表現を活用しよう

今回はJavaScriptで電話番号を正規表現を使って検証する方法を解説しました。testメソッドや関数化、ハイフンの有無対応、全角数字の変換など、初心者でも簡単に電話番号の形式を確認できる方法を紹介しました。正規表現を使えば、入力チェックやフォームのバリデーションが効率的に行えます。慣れるとメールアドレスやパスワードの検証にも応用できます。

まとめ

まとめ

JavaScriptで電話番号を正規表現で検証する方法について、基本から応用まで詳しく学びました。まず、正規表現とは文字列のパターンを定義するルールであり、電話番号の形式を効率的にチェックできる強力なツールであることを理解しました。日本国内の携帯電話番号は通常「090-1234-5678」や「080-1234-5678」のように、数字の桁数とハイフンの配置が決まっています。正規表現では、\dで数字を表し、{n}で桁数を指定することで、こうした形式を簡単に確認できます。さらに、ハイフンがある場合とない場合の両方に対応するために、-?を使うことで柔軟に対応可能です。

また、関数化することで複数の電話番号を効率的に検証できることも重要なポイントです。ユーザー入力に対して、正規表現を直接使うよりも、isValidTel()のような関数を用意することで、再利用性が高まり、コードが整理されます。さらに、全角数字やスペースが混じった入力に対しては、事前に半角に変換してから正規表現で検証することで、より安全にチェックが可能です。市外局番や携帯番号の区別も、桁数を柔軟に設定する正規表現を使うことで、対応できます。

正規表現は便利ですが、複雑にしすぎると理解や保守が難しくなるため、初心者はまずシンプルなパターンから始めることが推奨されます。電話番号検証に慣れたら、同じ考え方を応用して、メールアドレスやパスワード、住所の入力チェックなどにも使うことができます。今回学んだ内容を繰り返し練習することで、JavaScriptの入力バリデーションやユーザーインターフェースの信頼性を高めるスキルが自然と身につきます。

サンプル関数の再確認

function isValidTel(tel) {
  // ハイフンの有無に対応した電話番号検証
  const regex = /^0\d{2}-?\d{4}-?\d{4}$/;
  return regex.test(tel);
}

// 使用例
console.log(isValidTel("090-1234-5678")); // true
console.log(isValidTel("08098765432"));   // true
console.log(isValidTel("03-1234-5678"));  // false（携帯以外の場合は応用の正規表現が必要）

このサンプルでは、ハイフンの有無に対応した電話番号を簡単に検証できます。testメソッドによって、電話番号が正しい形式かどうかを瞬時に判定できることがわかります。フォーム入力チェックやユーザーの入力ミスを防ぐ実践的な方法として活用できます。