JavaScriptの正規表現をデバッグするツールの使い方

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

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

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

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

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

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

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

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

3. デバッグしながらパターンを確認

3. デバッグしながらパターンを確認

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

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

4. 正規表現のフラグも確認する

4. 正規表現のフラグも確認する

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

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

5. 正規表現のデバッグのコツ

5. 正規表現のデバッグのコツ

• 小さい文字列でまずテストする
• 一つずつパターンを追加して動作確認する
• キャプチャグループやフラグの効果を確認する
• オンラインツールを使ってマッチの視覚化を行う

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