やあ、ようこそ！フロントエンドの世界へ。
私はこれまで数えきれないほどのコードを書き、巨大なシステムの設計図を引いてきましたが、初心に戻って「文字列」と向き合う時間は今でも大好きです。
JavaScriptを学び始めると、`slice`で切り抜いたり、`replace`で入れ替えたりと、文字列を「加工」する技術をたくさん覚えますよね。でも、実は文字列には「自分自身の中身を、一歩ずつ順番に案内する」という、とても健気で大切な仕組みが備わっているんです。
今日は、その秘密の鍵である`[Symbol.iterator]`（シンボル・イテレータ）という少し難しそうな名前の主役を、どこよりも優しく、現場の知恵を交えて解説しますね。
—
1. 文字列は「ビーズがつながったネックレス」
想像してみてください。文字列は、一文字一文字が丁寧に糸でつながれた「ビーズのネックレス」のようなものです。
例えば、`”HELLO”` という文字列があったとします。
私たちはパッと見て「ハローだね」と分かりますが、プログラムがこの中身を一つずつ調べたいとき、「次はこのビーズ、その次はこのビーズ……」と指でなぞっていく必要があります。
この「指でなぞる仕組み」こそが、今回紹介するイテレータです。
JavaScriptの文字列には、最初から「私を順番になぞるなら、このルールでどうぞ！」という案内役が内蔵されています。それが `[Symbol.iterator]` という名前の特別な仕組みなんです。
—
2. 魔法の合言葉 `for…of` を使ってみよう
この案内役（イテレータ）を一番簡単に呼び出す方法が、`for…of` というループ文です。難しい設定は一切いりません。
まずは、基本の形を見てみましょう。
// お気に入りのフルーツを文字列にしてみます
const message = “Lemon”;
// messageの中にある「案内役」を呼び出して、一文字ずつ取り出す
for (const char of message) {
console.log(`今のビーズは: ${char}`);
}
/
結果：
今のビーズは: L
今のビーズは: e
今のビーズは: m
今のビーズは: o
今のビーズは: n
/
どうですか？
`message.length` を数えて、`i++` して……なんていう昔ながらの複雑な計算は不要です。`for…of` を使うだけで、文字列が持っている「案内役」が裏側で「次は ‘L’ ですよ」「次は ‘e’ ですよ」と、優しく手渡してくれるんです。
—
3. なぜ「案内役」が必要なの？（ここがプロの視点！）
「でも、普通に `message[0]` みたいに番号で指定すればいいじゃない？」と思うかもしれませんね。実は、ここに現代のWeb開発で避けて通れない落とし穴があるんです。
それは、絵文字の存在です。
例えば、赤いリンゴの絵文字 `🍎`。これ、見た目は1文字ですが、コンピュータの世界では「2人分のスペース」を使って表現されていることがあります（サロゲートペアと言います）。
昔ながらの番号指定でバラバラにしようとすると、リンゴが真っ二つに割れて、文字化けしてしまうんです。
const emojiStr = “🍎酒”; // リンゴと酒（プロの現場ではよくある組み合わせ！？）
// ❌ 昔ながらの方法（番号でアクセス）
console.log(emojiStr[0]); // 🍎の半分だけが取り出され、文字化けする
// ✅ イテレータ（for…of）を使う方法
for (const char of emojiStr) {
console.log(char); // 🍎 を「一つのまとまり」として正しく認識してくれる！
}
この「案内役（イテレータ）」は、文字が何個分のスペースを使っていようが、人間が見た時の『1文字』として正しく扱ってくれるという、とても賢い知性を持っているんです。
「大丈夫、絵文字もちゃんと一文字として数えるから任せて！」という、案内役の頼もしい声が聞こえてきそうでしょう？
—
4. 案内役は「スプレッド演算子」でも活躍する
このイテレータ（案内役）の仕組みは、`for…of` 以外でも大活躍します。
一番便利なのが、文字列をパッとバラバラにして「配列」にしたいときです。
const word = “あいうえお”;
// […] という書き方（スプレッド演算子）も、実は裏でイテレータを使っています
const charArray = […word];
console.log(charArray);
// 結果: [“あ”, “い”, “う”, “え”, “お”]
// 綺麗に一文字ずつバラバラになりました！
お買い物で買ったものを、一つずつ袋から取り出してテーブルに並べるような感覚ですね。これも、文字列の中に `[Symbol.iterator]` という案内役がいてくれるおかげでできる技なんです。
—
最後に：難しい名前を怖がらないで
`[Symbol.iterator]` という名前を初めて見たときは、「うわっ、難しそう……」と身構えてしまうかもしれません。でも、実態は「文字列というネックレスを、一粒ずつ丁寧に取り出すためのルール」に過ぎません。
私たちが普段何気なく使っている `for…of` や `[…]` の裏側には、こうした健気な仕組みが隠れていて、私たちのコードがバグらないように支えてくれているんです。
もし、あなたがこれからコードを書いていて「文字列を順番に処理したいな」と思ったら、この案内役のことを思い出してあげてください。
「一文字ずつ、よろしくね」
そう思いながら `for…of` を書くようになれば、あなたはもう立派なJavaScriptエンジニアの仲間入りです。焦らず、一歩ずつ、このネックレスをなぞるように学んでいきましょう。
大丈夫、JavaScriptは思ったよりずっと、あなたに寄り添ってくれますよ！
コメント