フロントエンド開発において、私たちは日常的に「ループ」を書いています。forEachやmapといった便利なメソッドに頼り切りになりがちですが、JavaScriptの根底には「Iterator protocol」という強力な仕組みが備わっています。今回は、単なる繰り返しを超えた、データ制御の視点からこのプロトコルを紐解いてみましょう。
Iterator protocolがもたらす「制御の主導権」
Iterator protocolとは、簡単に言えば「次にどの値を取り出すか」を自分で決定できる仕組みのことです。通常のfor文は、一度開始すると最後まで走り抜けるのが基本ですが、イテレーターを使うと、自分のタイミングでnext()を呼び出し、値を一つずつ手繰り寄せることができます。
この「制御の主導権」が重要になるのが、非同期処理や大規模データの取り扱いです。例えば、数万件の巨大なJSONデータを一度に処理しようとするとブラウザのメインスレッドがブロックされますが、イテレーターを使えば、ユーザーの操作の合間に少しずつ処理を進める「タイムスライス」の実装が容易になります。
無限リストという思考実験
Iterator protocolの面白さは、「終わりのないデータ」を扱える点にあります。配列はメモリ上に全てのデータが存在する必要がありますが、イテレーターは「次の値を計算するロジック」さえあれば、理論上無限に値を生成し続けることが可能です。
例えば、フィボナッチ数列を生成するイテレーターを作ってみましょう。
const fibonacci = {
[Symbol.iterator]() {
let [prev, curr] = [0, 1];
return {
next() {
[prev, curr] = [curr, prev + curr];
return { value: prev, done: false };
}
};
}
};
このコードでは、呼び出すたびに計算が行われるため、メモリを浪費することなく、必要な分だけ数列を取得できます。
実務での活用：データフェッチの抽象化
私が実務でよく使うのは、ページネーションの抽象化です。APIのレスポンスをイテレーターでラップすることで、呼び出し側は「次のページがあるかどうか」や「URLの組み立て」を意識することなく、ただfor…ofループを回すだけで全データを取得できるようになります。
「すべてを一度に受け取る」のではなく、「必要な分だけを引き出す」というアプローチは、パフォーマンスとメモリ効率を両立させるための現代的な武器です。皆さんも、次に配列を回すときは、このIterator protocolの存在を思い出してみてください。コードの抽象度が一段階上がるはずです。