こんにちは！フロントエンドの現場でコードと格闘し続けているエンジニアです。
JavaScriptの世界へようこそ。今日は、プロの間でも「これを知っていると一気に開発が楽になる！」と評判の、「正規表現の名前付きキャプチャグループ」と「matchAll」という、ちょっと強そうな名前のテクニックについてお話しします。
難しそうに見えますか？大丈夫、全然そんなことはありません。まずは、身近な例えから入っていきましょう。
—
1. 「お買い物のレシート」でイメージしてみよう
例えば、あなたがオンラインショップの運営者だとします。お客さんから届く「注文メールの本文」から、「商品名」と「個数」を自動で抜き出したいとき、どうしますか？
普通にやると「何文字目から何文字目までを切り取って…」と計算したくなりますが、これはミスのもと。ここで登場するのが「正規表現」という強力な魔法です。
そして、その魔法をさらに便利にするのが「名前付きキャプチャグループ」です。
「名前付きキャプチャグループ」って何？
正規表現のなかで `(?<名前>…)` と書くと、「ここを抜き出して、この名前のラベルを貼っておいてね！」とコンピュータに指示できます。
- `(?
.?)` → 「商品名」というラベルを貼って抜き出す - `(?
\d+)` → 「個数」というラベルを貼って抜き出す
これを使うと、取り出したデータが「ただの文字列の羅列」ではなく、「中身が整理されたオブジェクト」として手に入るんです。まるで、整理整頓された引き出しの中にデータが勝手に入ってくれるような感覚ですね。
—
2. matchAllで一気に抜き出す
次に、`matchAll` です。これも名前の通り、「全部マッチするものを、全部持ってきて！」というメソッドです。
`match` メソッドだと最初の一つしか見つけてくれないことがよくありますが、`matchAll` は「全部見つかるまで諦めない」根性のあるメソッド。これと「名前付きキャプチャグループ」を組み合わせると、とんでもなく強力なコードが書けます。
さっそくコードを見てみましょう。
// 注文履歴のテキスト（こんなデータが来たと思ってください）
const text = “注文: りんご 3個, みかん 5個, バナナ 2個”;
// 正規表現のルールを作成
// (?
const regex = /(?
// matchAll で全部見つける！
const matches = text.matchAll(regex);
// 見つかったものを一つずつ取り出して、整理する
for (const match of matches) {
// ここが魔法のポイント！
// match.groups に、さっき付けた名前が入っています
const { product, count } = match.groups;
console.log(`商品名: ${product}、個数: ${count}個 を確認しました！`);
}
—
3. なぜこれが「現場の武器」になるのか？
初学者のうちは、「単に文字を抜き出すだけなら、replaceやsliceでもいいじゃない？」と思うかもしれません。
でも、考えてみてください。もし「個数」の順番が変わったり、表記が少し複雑になったりしたとき、`slice` で「何文字目から何文字目」と指定しているコードはすぐに壊れてしまいます。
一方、今回紹介した 「名前付きキャプチャグループ」 を使えば：
1. 可読性が高い: `match.groups.product` と書けば、誰が読んでも「商品名を取っているんだな」と分かります。
2. 変更に強い: 正規表現のルールさえ少し変えれば、プログラムの他の場所を直す必要がありません。
現場で最も恐ろしいのは、「何をしているか分からないコード」が積み上がることです。名前を付けてデータを管理する。これは、コードを「動くもの」から「メンテナンスできる資産」に変えるための、最初の一歩なんです。
—
最後に：つまずいても大丈夫
ここまで読んで「なるほど！」と思っても、実際に自分で書くと正規表現の記号が難しくて「あれ、動かない…」となることは、プロでも日常茶飯事です。
そんな時は、焦らずに「少しずつ」進めてください。
まずは `(?
JavaScriptは、書けば書くほど、あなたの意図を正確に汲み取ってくれるようになります。あなたの開発ライフが、この小さな知識で少しでも楽で楽しいものになれば、これほど嬉しいことはありません。
また何かあったら、いつでも相談してくださいね。応援しています！
コメント