正規表現の基本とJavaScriptでの活用方法

2025年3月6日 最終更新日時 : 2025年3月23日 ar

もくじ

1. 正規表現とは？

正規表現（Regular Expression）とは、文字列中のパターンを定義・検索・置換するための強力なツールです。単なる文字の並びではなく、特殊なメタ文字や構文を用いることで、任意の文字や特定の文字集合、繰り返しパターンなど、複雑な条件を簡潔に記述できます。
例えば、電話番号、メールアドレス、郵便番号といった決まったフォーマットを持つデータを効率的に検出できるため、データの入力チェックやフォーマットの整合性検証に非常に有用です。実際、正規表現を活用すれば、ユーザーが入力した内容が期待される形式に沿っているかどうかを瞬時に判断でき、エラーを未然に防ぐことができます。
JavaScriptでは、RegExpオブジェクトを用いてフォームのバリデーションや、テキストデータの整形、不要な文字の除去、データの抽出など幅広い用途で利用されます。また、正規表現エンジンは、パターンマッチングの際に効率的なアルゴリズム（例えば、有限オートマトンやバックトラッキング）を駆使しており、複雑なパターンでも比較的高速に処理することが可能です。
このように、正規表現は単なる文字列操作ツールにとどまらず、データのクレンジングや解析、さらにはセキュリティ対策（不正入力のフィルタリングなど）にも役立つ、開発現場で欠かせない技術と言えるでしょう。

2. 正規表現が使える場面

① フォーム入力チェック（バリデーション）

正規表現は、ユーザーが入力するデータが所定の形式に沿っているかを瞬時に確認するための非常に有効な手法です。たとえば、メールアドレスの場合、「@」や「.」などの必須要素が正しい位置にあるか、不要な記号が混じっていないかをチェックできます。また、電話番号の場合、ハイフンの位置や桁数、余計な文字（例えばアルファベットや記号）が含まれていないかを検証することが可能です。
実装例（JavaScript）:

// メールアドレスチェック例
const email = document.getElementById('email').value;
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailRegex.test(email)) {
  alert("正しいメールアドレスを入力してください。");
}

このように、フォーム入力時に正規表現でバリデーションを行うことで、不正なデータがサーバーへ送信される前にユーザーへフィードバックを返し、データの整合性を保つことができます。

② データクレンジング

大量のデータを扱う際、データセットには不要な文字列や余分なスペース、フォーマットのばらつきが混入している場合があります。正規表現は、こうしたデータの不整合を自動で修正するツールとしても優れています。

  • CSVデータの一括変換:
    CSVファイル内のデータ形式が異なる場合、正規表現を使って特定のパターンに一致する部分を抜き出し、一律のフォーマットに変換することができます。たとえば、日付や数値のフォーマットが統一されていない場合、正規表現で検出し置換することで、データの標準化が可能です。
  • 住所データの不要スペース削除:
    住所データは、ユーザー入力により余計な空白やタブ、改行が混じりやすいです。正規表現を利用して、前後や中間の不要な空白を取り除くことで、データベースへの登録前にクレンジングを実施できます。

実装例（JavaScript）:

// 住所データから不要な空白を削除
const address = "  東京都  渋谷区 1丁目 2番地  ";
const cleanedAddress = address.replace(/^\s+|\s+$/g, "").replace(/\s+/g, " ");
console.log(cleanedAddress); // "東京都 渋谷区 1丁目 2番地"

③ テキスト検索・置換

正規表現は、文章中から特定のパターンを検索・抽出し、置換する処理にも非常に強力です。

  • 特定単語の強調表示:
    Webサイトやブログ記事内で、特定のキーワードやフレーズに対してスタイルを適用したい場合、正規表現を用いてその部分だけを抽出し、HTMLタグで囲むなどして強調表示することができます。

実装例（JavaScript）:

// 文章内の"重要"という単語を<strong>タグで囲む例
const text = "この情報は非常に重要です。";
const highlighted = text.replace(/(重要)/g, '<strong>$1</strong>');
console.log(highlighted);  // "この情報は非常に<strong>重要</strong>です。"
  • 指定パターンの文字列のみ抽出:
    大量のテキストから、特定の形式（例：日付、番号、コードなど）に一致する部分だけを抜き出す場合にも正規表現は有効です。これにより、必要な情報だけを効率的に収集でき、後続の処理（データ解析やレポート生成）に活用できます。

実装例（JavaScript）:

// テキストから日付形式 "yyyy/mm/dd" を抽出する例
const log = "イベント発生日は2025/03/06です。次回は2025/04/10に予定。";
const dates = log.match(/\d{4}\/\d{2}\/\d{2}/g);
console.log(dates);  // ["2025/03/06", "2025/04/10"]

3. 正規表現の基本構文一覧表

記号意味使用例
.任意の1文字a.b（aとbの間に何か1文字）
^行頭^abc（abcで始まる行）
$行末abc$（abcで終わる行）
*直前の文字0回以上ab*c（ac, abc, abbc）
+直前の文字1回以上ab+c（abc, abbc だが acはNG）
?直前の文字0回または1回colou?r（color, colour）
|どちらかa|b（a,b）
()グループ化(abc)+（abcabcなど）
[]文字クラス（いずれか1文字）[aeiou]（母音）
{n}ちょうどn回繰り返しa{3}（aaa）
{n,}n回以上a{2,}（aa, aaa, aaaa）
{n,m}n回からm回a{2,4}（aa, aaa, aaaa）
\d数字（[0-9]）\d{3}（3桁数字）
\w英数字＋（[a-zA-Z0-9]）\w+（単語）
\s空白（スペース、タブ、改行）\s+（空白1つ以上）
\b単語境界\bword\b（単語単体）
\エスケープ\.（ピリオドそのもの）
\n改行文字（LF）\n（改行）
\tタブ文字（ハードタブ）\t（タブ1つ）
\rキャリッジリターン（CR）\r\n（CR＋LFの改行）
\xXX16進数XXの文字\x41（A）

4. 正規表現を活用するJavaScriptコード例

① メールアドレスチェック

const email = "test@example.com";
const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

if (regex.test(email)) {
    console.log("正しいメールアドレスです");
} else {
    console.log("メールアドレスの形式が不正です");
}

② 数字以外を削除（電話番号クレンジング）

const phone = "03-1234-5678";
const cleaned = phone.replace(/[^\d]/g, "");
console.log(cleaned); // 0312345678

③ 郵便番号（ハイフンあり）

const regex = /^\d{3}-\d{4}$/;
console.log(regex.test("123-4567"));  // true

④ URLの判定

const regex = /^https?:\/\/[\w.-]+(?:\.[\w.-]+)+(?:\/[\w./?%&=-]*)?$/;
console.log(regex.test("https://www.example.com"));  // true

⑤ 半角カナチェック

const regex = /^[ｦ-ﾟ]+$/;
console.log(regex.test("ｱｲｳｴｵ"));  // true

⑥ HTMLタグの除去（タグをプレーンテキスト化）

const str = "<p>サンプル</p>";
const cleaned = str.replace(/<[^>]*>/g, "");
console.log(cleaned); // サンプル

⑦ 全角カナ変換（JavaScript）

function toFullWidthKana(input) {
    return input.replace(/[ｦ-ﾟ]/g, (s) => {
        return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
    });
}
console.log(toFullWidthKana("ｱｲｳｴｵ")); // アイウエオ

⑧ テキスト内の改行位置を検出

const text = "行1\n行2\n行3";
const lines = text.split(/\n/);
console.log(lines); // ["行1", "行2", "行3"]

⑨ タブ文字をスペースに置換

const text = "A\tB\tC";
const result = text.replace(/\t/g, "    ");
console.log(result); // A    B    C

⑩ 16進数指定で特定文字を検索

const text = "文字A文字B";
const regex = /\x41/;  // Aを検索
console.log(regex.test(text)); // true

⑪ 数字だけを抽出（電話番号や価格データ処理）

const input = "TEL: 03-1234-5678";
const numbers = input.match(/\d+/g);
console.log(numbers.join(""));  // "0312345678"

⑫ スペース・タブ・改行の除去（トリミング）

const input = "  サンプル　\n";
const trimmed = input.replace(/^\s+|\s+$/g, "");
console.log(trimmed);  // "サンプル"

⑬ 重複スペースを1つに統一

const input = "A   B C    D";
const result = input.replace(/\s+/g, " ");
console.log(result);  // "A B C D"

⑭ 日付形式チェック（yyyy/mm/dd）

const regex = /^\d{4}\/\d{2}\/\d{2}$/;
console.log(regex.test("2025/03/06"));  // true

⑮ クレジットカード番号（16桁チェック）

const regex = /^\d{4}-\d{4}-\d{4}-\d{4}$/;
console.log(regex.test("1234-5678-9012-3456"));  // true

⑯ 半角英数字のみ許可

const regex = /^[a-zA-Z0-9]+$/;
console.log(regex.test("abc123"));  // true

⑰ 連続する同じ文字を検出（aaaや111）

const regex = /(.)\1\1/;
console.log(regex.test("aaa"));  // true

⑱ 日本語（全角ひらがな・カタカナ）チェック

const regex = /^[ぁ-んァ-ンー]+$/;
console.log(regex.test("こんにちは"));  // true

⑲ 16進カラーコードチェック

const regex = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
console.log(regex.test("#ff5733"));  // true

⑳ ファイル名の拡張子チェック（jpg, png, gif）

const regex = /\.(jpg|jpeg|png|gif)$/i;
console.log(regex.test("image.png"));  // true

㉑ 単語の前後に空白がないかチェック（トリム確認）

const regex = /^\S.*\S$/;
console.log(regex.test(" sample "));  // false

㉒ 住所に「丁目」「番地」が含まれるかチェック

const regex = /[丁目番地]/;
console.log(regex.test("東京都渋谷区1丁目2番地"));  // true

㉓ 携帯電話番号チェック（070,080,090）

const regex = /^0(7|8|9)0-\d{4}-\d{4}$/;
console.log(regex.test("080-1234-5678"));  // true

㉔ 禁止文字チェック（<>など）

const regex = /[<>]/;
console.log(regex.test("こんにちは>"));  // true

㉕ 特定のドメイン限定メールチェック（@example.com）

const regex = /^[a-zA-Z0-9._%+-]+@example\.com$/;
console.log(regex.test("user@example.com"));  // true

5. 正規表現を学ぶ際のコツとポイント

① パターンを細かく分解する

1. 複雑なパターンを分解する意義

  • 理解しやすくなる：長い正規表現は、一見すると何をしているのか分かりにくいですが、小さなパーツに分けることで、それぞれの意味や役割を個別に把握できます。
  • デバッグが容易：エラーが発生した場合、全体ではなく分解した個々の部分をテストできるため、どこに問題があるか特定しやすくなります。
  • 再利用性の向上：分解したパーツは、他のパターン作成時にも再利用できるため、効率的に正規表現を構築できます。

2. メールアドレス正規表現の例で考える

一般的なメールアドレスの正規表現：

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

このパターンを以下のように分解して考えます。

① ユーザー名部分
  • パターン: [a-zA-Z0-9._%+-]+
  • 意味: 英数字や一部の記号（ピリオド、アンダースコア、パーセント、プラス、ハイフン）が1文字以上続く
  • ポイント: ユーザー名で許可する文字の範囲をここで決定しています。
② ドメイン部分
  • パターン: [a-zA-Z0-9.-]+
  • 意味: ドメイン名に使われる英数字、ピリオド、ハイフンが1文字以上続く
  • ポイント: サブドメインも含め、ドメインとして妥当な文字列を許可する設計です。
③ ドット以下部分（トップレベルドメイン）
  • パターン: \.[a-zA-Z]{2,}
  • 意味: ドットの後に、少なくとも2文字以上の英字が続く（例: .com, .net, .jp）
  • ポイント: トップレベルドメインの長さや種類に柔軟性を持たせています。

3. 分解アプローチの実践方法

  • 段階的にテスト: 各パーツを個別にテストするため、例えばオンラインツール（regex101など）を使い、ユーザー名部分だけでマッチする文字列を確認します。
  • グループ化を活用: 丸括弧 () を使って、各パーツをグループ化し、キャプチャーグループとして抽出しながら動作を検証できます。
  • コメントを挿入: JavaScriptや他の言語では、正規表現リテラルにコメントを入れることはできませんが、コード内にコメントとして各部分の役割を記述することで、後で見直した際に理解しやすくなります。

4. まとめ

パターンを細かく分解することで、複雑な正規表現も構造的に理解でき、デバッグやメンテナンスが容易になります。メールアドレスの例のように、ユーザー名、ドメイン、トップレベルドメインという具合に、各部分のルールを個別に考えることは、正規表現学習の基本となるアプローチです。これにより、パターンの修正や拡張も柔軟に行えるようになります。

② 検証ツールを活用する

リアルタイムにマッチング結果が見えるツールを活用すると、試行錯誤がしやすくなります。

③ まずはよく使うパターンから

  • 数字のみチェック：^\d+$
  • 半角英数字のみチェック：^[a-zA-Z0-9]+$
  • 特定文字を含むか：abc
  • メールアドレスチェック：^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$
  • 電話番号チェック（ハイフンあり）：^\d{2,4}-\d{2,4}-\d{4}$
  • 郵便番号チェック（123-4567）：^\d{3}-\d{4}$
  • URLチェック：^https?:\/\/[\w.-]+(?:.[\w.-]+)+(?:\/[\w./?%&=-]*)?$
  • 日付チェック（yyyy/mm/dd）：^\d{4}\/\d{2}\/\d{2}$
  • ひらがなのみ：^[ぁ-ん]+$
  • カタカナのみ：^[ァ-ンー]+$
  • 半角カタカナのみ：^[ｦ-ﾟ]+$
  • 全角文字チェック：^[^\x01-\x7E]+$
  • スペース・タブ・改行を除去：\s+
  • HTMLタグ除去：<[^>]*>
  • 連続スペースを1つに：\s+
  • ファイル拡張子チェック（画像系）：`.(jpg
  • カラーコードチェック：`^#([0-9a-fA-F]{3}
  • 全角数字のみチェック：^[０-９]+$
  • 改行コードチェック（CRLF）：\r\n
  • タブ文字チェック：\t

6. おわりに

正規表現は最初は取っつきにくいものですが、一度仕組みを理解すれば日常業務の効率が飛躍的にアップします。
特にHTML＋CSS＋JavaScriptを組み合わせると、フォーム入力チェックやデータ変換、リアルタイムバリデーションなどさまざまな場面で活用できます。

PR広告

楽天ブックスで正規表現の本を探す

JavaScriptで正規表現のニガテを克服するための本

新品価格
￥300から
(2025/3/13 21:59時点)

カテゴリー
Javascript
タグ
前の記事
【Monaco Editor】を活用したウェブサイト構築
2025年2月28日
次の記事
【CORSエラー】JavaScriptにおける対策
2025年3月9日