「マッチした中の一部分だけを取り出す」という発想
const [, p] = s.match(/(foo)/) は、文字列の中から正規表現にマッチした部分を取り、その中でも「丸括弧で囲んだ部分だけ」を変数に取り出す書き方です。 ここで主役になるのが、(foo) という「キャプチャグループ」と、match の戻り値の配列構造、そして分割代入 const [, p] = ... です。
キャプチャグループとは何か
/(foo)/ のように、パターンを丸括弧 () で囲むと、その部分が「キャプチャグループ」になります。 キャプチャグループは、「ここにマッチした文字列を覚えておいて、あとから取り出せるようにする印」だと思ってください。
例を見ます。
const s = "bar foo baz";
const m = s.match(/(foo)/);
console.log(m);
// ["foo", "foo"]
JavaScriptm は配列で、 先頭の m[0] が「全体のマッチ(今回だと ‘foo’)」、 次の m[1] が「1番目のキャプチャグループにマッチした部分(これも ‘foo’)」です。
キャプチャグループが増えると、m[2], m[3]…と続いていきます。
分割代入で「欲しい部分だけ」抜き出す
const [, p] = s.match(/(foo)/) は、この配列から「2番目の要素だけ欲しい」という意図を、分割代入で表現したものです。
const s = "bar foo baz";
const [, p] = s.match(/(foo)/);
console.log(p); // "foo"
JavaScript[, p] という書き方は、 最初の要素(インデックス 0)は捨てて、 2番目の要素(インデックス 1)を p に代入する、という意味になります。
これによって、「キャプチャした部分だけを、直接変数として受け取る」ことができます。
もう少し実務寄りの例:数字だけキャプチャする
キャプチャグループは、固定文字列だけでなく「パターン」にも使えます。
const s = "ID: 12345";
const m = s.match(/ID:\s*(\d+)/);
const [, id] = m;
console.log(id); // "12345"
JavaScriptここでは、
ID:\s* が「ID: とその後の空白」を表す部分。 (\d+) が「1文字以上の数字」をキャプチャするグループ。
match の結果は ["ID: 12345", "12345"] のような配列になり、 分割代入で id に "12345" が入ります。
こうして、「文字列から意味のある値だけを抜き出して、変数として扱う」ことができます。
マッチしなかったときの注意点
match は、パターンにマッチしなかった場合 null を返します。 そのまま const [, p] = s.match(/(foo)/) と書くと、マッチしなかったときに null から分割代入しようとしてエラーになります。
安全に書くなら、いったん結果を変数に受けてからチェックします。
const s = "bar baz"; // "foo" がない
const m = s.match(/(foo)/);
if (m) {
const [, p] = m;
console.log("見つかった:", p);
} else {
console.log("foo は見つからなかった");
}
JavaScript「match の結果は null かもしれない」という前提を持つことが、正規表現+キャプチャを扱ううえでとても重要です。
まとめ:キャプチャ+分割代入は「欲しい部分だけを一発で抜き出す技」
const [, p] = s.match(/(foo)/) という書き方は、
キャプチャグループで「ここを抜き出したい」と印を付ける。 match の戻り値配列から、分割代入でその部分だけを変数に受け取る。
という 2 ステップを、コンパクトにまとめたものです。
「この文字列の中から、パターンに合う部分だけを変数として取り出したい」と感じたときに、 キャプチャグループ+分割代入を思い出せるようになること。
それが、正規表現を「ただマッチさせるだけでなく、情報を抽出するための道具」として使いこなすための、大きな一歩になります。
