JavaScriptの正規表現を理解する|郵便番号 /^\d{3}-\d{4}$/ から学ぶ最初の一歩(2025年版)

4 min 32 views
JavaScript-regular-expression

プログラムで文字列を扱うとき、「ある文字列が特定の形式かどうか」を調べたいことがあります。
たとえば:

  • 入力された郵便番号が正しいか?
  • メールアドレスの形になっているか?
  • 文の中に「http」が含まれているか?

こうした“文字のルール”を表すのが正規表現(Regular Expression)です。

JavaScriptでは、

const regex = /パターン/;

という形で簡単に書けます。

最も身近な例のひとつが、日本の郵便番号です。
たとえば「123-4567」という形の番号をチェックしたい場合、次のように書けます。

const postal = /^\d{3}-\d{4}$/;
console.log(postal.test("123-4567")); // ✅ true
console.log(postal.test("12-34567")); // ❌ false

これだけで「文字列が郵便番号形式かどうか」を判定できます。
ではこの /^\d{3}-\d{4}$/ を分解して見てみましょう。

部分意味説明
/ /正規表現リテラルを囲む記号JavaScriptでは /.../ の形で表す
^文字列の先頭「これが最初に来なければいけない」
\d数字1桁(0〜9)“digit” の略
{3}直前を3回繰り返す\d{3} → 数字3桁連続
-ハイフンそのもの特別な意味はなし(文字)
\d{4}数字4桁4桁連続の数字を意味
$文字列の末尾「ここで終わる」ことを指定

🔍 つまり:

「先頭から3桁の数字、ハイフン、4桁の数字で終わる文字列」だけがOK。

例:
123-4567 → OK
住所123-4567 → NG(先頭に余計な文字)
123-4567abc → NG(末尾に文字がある)

const regex = /^\d{3}-\d{4}$/;

console.log(regex.test("123-4567"));   // ✅ true
console.log(regex.test("123-4567")); // ❌ 全角数字はNG
console.log(regex.test("1234567"));    // ❌ ハイフンなし
console.log(regex.test("A23-4567"));   // ❌ 数字以外が含まれる
console.log(regex.test("123-4567a"));  // ❌ 末尾に文字

💡 ^$ をつけることで、「完全一致」をチェックできるようになります。
もしこれを外すと、文章中の一部に「123-4567」が含まれているだけでも true になってしまいます。

日本語のフォームでは「全角数字」で入力されることもよくあります。
その場合は、全角の数字範囲 [0-9] も加えると対応できます。

const postal = /^[0-90-9]{3}-[0-90-9]{4}$/;

console.log(postal.test("123-4567")); // ✅ true

ここでは [0-90-9] が「半角0〜9 または 全角0〜9」のどちらかを許す、という意味になります。

正規表現には検索モードを変えるための“フラグ”があります。
たとえば /abc/ii は「大文字小文字を区別しない」設定です。

フラグ説明
gグローバル検索(すべてヒット)/a/g
i大文字・小文字を区別しない/abc/i
m複数行モード(^と$が行ごとに働く)/^abc/m
s改行も.でマッチする/a.b/s

郵便番号のように「完全一致」でチェックしたい場合は、フラグは不要です。

記号意味マッチする文字列
.任意の1文字(改行除く)/a.b/acb, a_b
[]指定した文字のいずれか/[abc]/a, b, c
[^]指定以外の文字/[^0-9]/数字以外
\d数字/\d+/1, 22, 333
\w英数字または _/\w+/abc_123
\s空白・タブなど/\s+/スペースなど
+1回以上の繰り返し/a+/a, aa, aaa
*0回以上/a*/"", a, aaa
?0または1回/colou?r/color, colour
{n}n回繰り返し/\d{3}/123
{n,m}n〜m回繰り返し/\d{2,4}/12, 123, 1234
``OR条件`/cat
()グループ化/(ab)+/ab, abab
created by Rinker
¥5,060 (2025/11/04 14:14:47時点 楽天市場調べ-詳細)
用途正規表現説明
郵便番号/^\d{3}-\d{4}$/3桁-4桁
電話番号/^0\d{1,4}-\d{1,4}-\d{4}$/一般的な電話番号
メールアドレス/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/iメール形式
URL/^https?:\/\/[^\s]+$/httpまたはhttpsで始まる
日付/^\d{4}-\d{2}-\d{2}$/YYYY-MM-DD 形式
ミス結果改善策
^$ を忘れる部分一致してしまう常に「完全一致」を意識する
\d で全角数字も通ると思っている全角はマッチしない[0-90-9] を使う
パターンを複雑にしすぎる読めない・直せない段階的に組み立てる
test() ではなく match() を使って混乱結果が違うtest() は真偽、match() は配列

🔸 名前付きキャプチャ(ES2020〜)

const regex = /(?<first>\d{3})-(?<second>\d{4})/;
const match = "123-4567".match(regex);
console.log(match.groups.first);  // 123
console.log(match.groups.second); // 4567

🔸 前後読み(Lookahead / Lookbehind)

console.log("300円".match(/\d+(?=円)/)); // ["300"]
console.log("#タグ".match(/(?<=#).+/));   // ["タグ"]

最初は「記号だらけで難しそう」に見える正規表現ですが、
意味を分解して理解すれば、まるで文法のように読めるようになります。

郵便番号 /^\d{3}-\d{4}$/ はその最初の一歩。
ここを理解すれば、他のパターン(電話・日付・メール・URL)もスラスラ読めるようになります。

関連記事