【JS応用】量指定子 +, *, ? と {n}

正規表現における量指定子の完全理解：柔軟なパターンマッチングの極意

フロントエンド開発において、バリデーション、文字列操作、ルーティング処理など、正規表現（Regular Expressions）は避けて通れない強力なツールです。特に、パターンの「繰り返し」や「存在」を制御する「量指定子（Quantifiers）」を自在に操れるかどうかは、コードの堅牢性と保守性に直結します。

本記事では、+、*、?、および {n} といった主要な量指定子の概念を深掘りし、実務におけるベストプラクティスを解説します。

量指定子とは何か：パターンの繰り返しを制御する

量指定子は、直前の要素（文字、文字クラス、またはグループ）が何回出現するかを指定するメタ文字です。これらを活用することで、固定の文字列だけでなく、可変的なフォーマットを持つ文字列を柔軟に抽出・検証することが可能になります。

正規表現エンジンは、量指定子に出会うと「どれだけマッチさせるか」という決定を下します。この挙動を理解することは、パフォーマンス最適化の第一歩でもあります。

主要な量指定子の詳細解説

まずは、最も頻繁に使用される4つの量指定子について、その挙動と意味を整理します。

1. プラス記号 (+)
直前の要素が「1回以上」出現することにマッチします。必須項目であり、かつ複数存在しても良い場合に適しています。

2. アスタリスク (*)
直前の要素が「0回以上」出現することにマッチします。要素がなくてもマッチするため、オプション的な要素の指定に用いられます。

3. クエスチョンマーク (?)
直前の要素が「0回または1回」出現することにマッチします。つまり、その要素が「あるかないか」を判定する際に使用されます。

4. 中括弧 {n}, {n,}, {n,m}
より厳密な回数指定を行うための構文です。
・{n}: ちょうどn回
・{n,}: n回以上
・{n,m}: n回以上、m回以下

実務におけるサンプルコードと実装パターン

以下に、フロントエンドでよく遭遇するユースケースをもとに、量指定子の使い分けを提示します。

// 1. 電話番号のバリデーション（数字が3桁-3桁-4桁）
const phoneRegex = /^\d{3}-\d{3}-\d{4}$/;
console.log(phoneRegex.test("090-1234-5678")); // true

// 2. HTML属性の抽出（クォートの有無に対応）
// ? を使うことで、クォートがあってもなくてもマッチさせる
const attrRegex = /class=["']?([^"']+)["']?/;
const html = 'class="container"';
console.log(html.match(attrRegex)[1]); // "container"

// 3. URLのプロトコル部分（http または https）
// s? を使うことで http にも https にも対応
const urlRegex = /^https?:\/\//;
console.log(urlRegex.test("https://google.com")); // true

// 4. 不定長のログメッセージの抽出
// + を使って、少なくとも1文字以上のメッセージをキャプチャ
const logRegex = /\[ERROR\]\s+(.+)/;
console.log(" [ERROR]   System Failure".match(logRegex)[1]); // "System Failure"

貪欲マッチングと非貪欲マッチングの罠

量指定子を語る上で欠かせないのが「貪欲（Greedy）」と「非貪欲（Lazy/Non-greedy）」の概念です。

デフォルトでは、+ や * は「貪欲」に動作します。つまり、可能な限り長い文字列にマッチしようとします。例えば、`

` に対して `<.+>` を適用すると、`

const greedy = /<.+>/;
const lazy = /<.+?>/;

const str = "
content
";
console.log(str.match(greedy)[0]); // "
content
"
console.log(str.match(lazy)[0]);   // "
"