先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptの正規表現を書いても期待通りに動かないことがあります。どうやって確認すればいいですか？」

先生

「その場合は正規表現をテストできるデバッグツールを使うと便利です。ブラウザやオンラインサービスで簡単に動作確認ができます。」

生徒

「具体的にはどんなツールがありますか？」

先生

「オンラインでは『Regex101』や『RegExr』が有名です。ブラウザの開発者ツールでも簡単にデバッグできます。」

1. オンラインツールで正規表現をテストする

正規表現を一つ一つ確認したい場合は、オンラインツールが便利です。例えば Regex101 では、入力した文字列と正規表現のマッチをリアルタイムで確認できます。ツールはマッチ部分の色分けや、キャプチャグループの確認もできます。


    （Regex101やRegExrなどのサイトでテスト可能）

2. ブラウザのコンソールで簡単にテスト

Google ChromeやFirefoxなどのブラウザには開発者ツールがあります。コンソールで正規表現を直接書いてテストできます。test メソッドは文字列がマッチするかどうかを確認でき、match メソッドはマッチした部分を配列で返します。


const regex = /abc/;
console.log(regex.test("abcdef")); // true
console.log("abcdef".match(regex)); // ["abc"]

正規表現が複雑な場合、キャプチャグループや量指定子が意図通り動いているかを確認することが大切です。オンラインツールでは、各部分がどの文字列にマッチしているか視覚的に確認できます。


const regex = /(\d{4})-(\d{2})-(\d{2})/;
const str = "2025-12-11";
console.log(str.match(regex));
// 出力: ["2025-12-11","2025","12","11"]

正規表現にはフラグという設定があります。例えば g は全体検索、i は大文字小文字を区別しない検索です。デバッグ時にフラグが正しく設定されているか確認しましょう。


const regex = /abc/gi; // 大文字小文字を無視して全体検索
const str = "Abc abc ABC";
console.log(str.match(regex)); // ["Abc","abc","ABC"]

このように正規表現は、一見難しそうですがツールを使えば確認しやすくなります。デバッグを習慣にすると、バグの原因も素早く見つけられるようになります。