【JavaScript】文字列から「全部」を見つけ出す魔法の道具、`matchAll()` を世界一わかりやすく解説します！
こんにちは！日々楽しくコードを書いていますか？
JavaScriptを学び始めて、文字の操作（Stringメソッド）に触れるようになると、「文章の中から特定のパターンに合う文字を全部抜き出したい！」という場面に必ず出会います。
例えば、
- 「ブログの記事から、`#JavaScript` や `#プログラミング` などのハッシュタグを全部集めたい」
- 「長い文章の中から、メールアドレスっぽい部分を全部抜き出したい」
そんなとき、JavaScriptには `matchAll()` という、とっても頼りになるメソッドが用意されています。
「でも、なんだか難しそうな『正規表現』とか『イテレータ』っていう言葉が出てきて、ちょっと身構えちゃう……」
大丈夫、安心してくださいね。
今日は難しい専門用語をできるだけ使わず、身の回りの道具や日常のイメージに例えながら、この `matchAll()` の仕組みを優しく、丁寧に分解していきます。この記事を読み終わる頃には、「なんだ、そういうことか！」とスッキリ理解できているはずです。一緒に一歩ずつ進んでいきましょう！
—
1. `matchAll()` は「お買い物リストを順番にチェックする魔法の虫眼鏡」
まずはイメージから入ってみましょう。
あなたがスーパーにお買い物に来たと想像してください。手元には「お買い物リスト」があります。
広い店内の棚（これが対象の文字列です）から、リストに書かれた「果物（りんご、バナナ、みかんなど）」を全部見つけて、買い物カゴに入れたいとします。
このとき、「店内の棚をじっくり見渡して、果物を見つけるたびに、それが『何番目の棚の、どの位置にあったか』のメモと一緒に、1個ずつカゴに入れていく魔法の虫眼鏡」。これこそが、今回の主役である `matchAll()` です。
昔ながらのやり方（`match`）との違い
実は、昔からある `match()` というよく似たメソッドもあります。
でも、`match()` はちょっとおっちょこちょいです。
- 昔の `match()` くん：
「果物、全部集めてきました！」と、カゴに「りんご、バナナ、みかん」だけをドサッと入れてくれます。でも、「それがそれぞれどの棚の何番目に置いてあったか」や「値段のタグはどうだったか」といった詳しい情報は全部忘れてしまいます。
- 今回の `matchAll()` さん：
「1つ目のりんごは3番目の棚、2つ目のバナナは5番目の棚、それぞれ賞味期限は◯◯でしたよ」と、見つけたもの（マッチした文字列）だけでなく、その場所（インデックス）や、細かい情報（グループ化された情報）もすべて丁寧に抱えたまま、あなたに手渡してくれます。
この「詳しい情報まで丸ごと取っておいてくれる」というのが、`matchAll()` の最大の優しさであり、強みなのです。
—
2. 謎の言葉「イテレータ」ってなぁに？
`matchAll()` の説明を読むと、必ず「イテレータを返す」という難しい言葉が出てきます。ここで「うっ…」と拒絶反応が出てしまう方も多いのですが、全く怖がる必要はありません！
イテレータ（Iterator）を日本語に訳すと、「反復子（はんぷくし）」、もっと簡単に言うと「順番に1つずつ中身を取り出せる、整理整頓された引き出し」です。
一度に全部のデータをドカンと机の上に広げられると、散らかって整理が大変ですよね。
だからJavaScriptは、見つけた結果を「整理券」を配るように、1つずつ順番に並べて待たせておきます。
そして、あなたが「次の方、どうぞ！」と声をかける（ループ処理をする）たびに、1つずつ丁寧に取り出してくれる仕組み。これが「イテレータ」です。
この引き出しから中身を取り出す方法は、主に2つあります。
1. `for…of` というループ（繰り返し）を使って、1個ずつ取り出す
2. スプレッド構文（`[…]`）を使って、一瞬で使い慣れた「普通の配列」に変換する
実務ではどちらもよく使います。実際のコードを見てみると、「なんだ、簡単じゃん！」と思えるはずです。さっそく動くコードを見てみましょう！
—
3. 実際にコードを動かしてみよう！
今回は、「長い文章の中から、ハッシュタグ（`#` で始まる言葉）をすべて抜き出す」という、よくある機能を作ってみます。
エディタにそのまま貼り付けて実行できるので、ぜひ手元で動かしてみてくださいね。
// 1. 解析したい元の文章を用意します
const text = “今日は #JavaScript の勉強をしました！ #プログラミング は楽しいですね。 #駆け出しエンジニア と繋がりたいな。”;
// 2. 探したいパターン（正規表現）を作ります
// 「#」の後に、文字が1回以上続くものという意味です。
// 一番後ろの「g」はグローバル（＝全部探してね！）という超重要マークです！
const hashtagRegex = /#(\w+|[ぁ-んァ-ヶ一-龠]+)/g;
// 3. matchAll を使って、魔法の引き出し（イテレータ）を取得します
const resultsIterator = text.matchAll(hashtagRegex);
console.log(“— パターン1: for…of を使って、1つずつ丁寧に取り出す —“);
// イテレータは for…of ループで「次の方どうぞ！」と順番に取り出せます
for (const match of resultsIterator) {
// matchの中には、見つかった文字や、見つかった場所（index）などの詳しい情報がギッシリ詰まっています
console.log(`見つけたハッシュタグ: ${match[0]}`);
console.log(`見つかった位置（文字目）: ${match.index}`);
console.log(`「#」の中身だけ: ${match[1]}`); // カッコ () で囲んだ部分だけを抜き出したもの
console.log(“—————————————–“);
}
// — おまけ：イテレータを「普通の配列」に一瞬で変換
コメント