JavaScriptの正規表現入門【初心者向けわかりやすい解説】

JavaScript 正規表現とは？

正規表現（せいきひょうげん）とは、文字列のパターンを表す記法です。「メールアドレスの形式かどうか確認したい」「電話番号の数字だけ取り出したい」といった処理に使います。

正規表現は /パターン/フラグ の形で書きます。

基本的な使い方

// test()：パターンに一致するか確認（true/false）
const pattern = /hello/;
console.log(pattern.test('hello world')); // true
console.log(pattern.test('goodbye'));     // false

// match()：一致した部分を取得
const str = 'My email is [email protected]';
const result = str.match(/[a-z]+@[a-z]+\.[a-z]+/);
console.log(result[0]); // [email protected]

// replace()：一致した部分を置換
const text = 'Hello World';
console.log(text.replace(/World/, 'JavaScript')); // Hello JavaScript

📖 詳しくはDOM操作入門で解説しています。

よく使うパターン

// 数字のみ
/^[0-9]+$/

// 英数字のみ
/^[a-zA-Z0-9]+$/

// メールアドレス（簡易）
/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/

// 日本の電話番号
/^0\d{1,4}-\d{1,4}-\d{4}$/

// URLの検証
/^https?:\/\/.+/

👉 ループ処理入門も参考にしてください。

フラグの種類

// g（global）：すべての一致を検索
'aababc'.match(/a/g); // ['a', 'a', 'a']

// i（ignore case）：大文字小文字を区別しない
/hello/i.test('Hello World'); // true

// m（multiline）：複数行に対応
/^hello/m.test('world\nhello'); // true

🔥 エラー処理入門で実践してみましょう。

正規表現の実践的な使い方

正規表現を使った実践的な例を紹介します。

使い方1：メールアドレスの形式チェック

フォームに入力されたメールアドレスが正しい形式かどうかを確認できます。「@」が含まれているか、ドメイン部分があるかなどをパターンで判定します。完璧なチェックは難しいですが、明らかな入力ミスは防げます。

使い方2：電話番号のハイフン除去

「090-1234-5678」のようなハイフン付き電話番号から、ハイフンだけを取り除いて「09012345678」にする処理です。replaceメソッドと正規表現を組み合わせて実現します。

使い方3：URLの抽出

長い文章の中からURLだけを取り出す処理です。「http://」や「https://」で始まる文字列をパターンマッチで見つけます。

使い方4：入力値のバリデーション

「半角数字のみ」「英字のみ」「3文字以上10文字以下」のような入力制限を正規表現で実現できます。

文字列操作の基本を先に学んでおくと、正規表現の理解がスムーズになります。「JavaScriptの文字列操作入門」で基本を確認しておきましょう。

よく使う正規表現パターン

覚えておくと便利なパターンを紹介します。

• 数字1文字：[0-9] または \d
• 英字1文字：[a-zA-Z]
• 任意の1文字：.（ドット）
• 0回以上の繰り返し：*（アスタリスク）
• 1回以上の繰り返し：+（プラス）
• 0回または1回：?（クエスチョン）
• 行の先頭：^（キャレット）
• 行の末尾：$（ドル）
• いずれか1文字：[abc]（aかbかc）
• 範囲指定：[0-9]（0から9のいずれか）

たとえば「3桁の数字」は「\d3」と書きます。3は「直前のパターンを3回繰り返す」という意味です。「郵便番号（3桁-4桁）」なら「\d3-\d4」と書けます。

正規表現でよくあるミス

ミス1：特殊文字をエスケープし忘れる

ドット（.）やアスタリスク（*）は正規表現で特別な意味を持ちます。文字そのものとしてマッチさせたいときは、バックスラッシュ（\）をつけてエスケープします。「\.」で「ドットそのもの」を意味します。

ミス2：貪欲マッチに気づかない

「.*」は「できるだけ多くの文字にマッチ」します。最短マッチにしたいときは「.*?」と書きます。HTMLタグの中身を取り出すときなどに注意が必要です。

ミス3：テストせずに使う

正規表現は複雑になりやすいので、必ずテストしてから使いましょう。パターンを入力するとマッチ箇所がリアルタイムで確認できる正規表現ビジュアライザーを使うと効率的に練習できます。

正規表現は最初は難しく感じますが、使いこなせると文字列処理が格段に楽になります。まずは簡単なパターン（数字だけ、英字だけ）から始めて、少しずつ複雑なパターンに挑戦しましょう。

JavaScriptの基本がまだ不安な人は「JavaScriptとは？初心者向けにわかりやすく解説」を先に読んでおくことをおすすめします。

正規表現はプログラミングのあらゆる場面で登場します。フォームの入力チェック、テキストの検索・置換、ログファイルの解析、データのクリーニングなど、用途は無限です。一度覚えれば、JavaScript以外の言語（Python、PHP、Rubyなど）でもほぼ同じ書き方で使えます。

まとめ

正規表現を使いこなすと、文字列の検証・抽出・置換が効率よくできます。レッスンでさらに実践的な使い方を学んでみましょう。