【ITニュース解説】Stop Spreading Iterables Into Arrays to Join Them. Iterator.concat() Is Here

JavaScriptのデータ処理において、複数の要素の集まり（イテラブルと呼ぶ）を順番に結合し、その全てを処理したい場面はよくある。例えば、既存の配列、Set（重複しない要素の集まり）、そしてジェネレーター関数が生成する一連の値をすべてまとめてループ処理したい場合などが該当する。これまで、このような要件を満たすために多くの開発者が慣習的に使用してきたのが、スプレッド構文（...）を用いた配列結合の手法である。具体的には、[...pinned, ...recentSet, ...loadMore()]のように記述し、これらを新しい一つの配列にまとめてからfor...ofループで処理する方法だ。

このスプレッド構文は非常に便利で直感的に使える反面、潜在的な非効率性を抱えている。それは、元のイテラブルが持つすべての要素を一時的に作成される新しい配列へとコピーしてしまう点にある。もし元のイテラブルが非常に大量のデータを含んでいたり、loadMore()のようなジェネレーター関数が無限に近いデータを生成したりする場合、実際に必要とされるのはその一部だけであっても、スプレッド構文はすべての要素を生成し、一時配列に格納しようと試みる。これは「貪欲な（greedy）」処理と呼ばれ、不要なメモリ消費と、場合によっては無視できないパフォーマンスの低下を招く。特に、ループの途中で処理を中断し、最初の数個の要素しか必要なかったとしても、一時配列の作成のためにすべての要素が生成・コピーされるという無駄が発生する。生成された一時配列は、処理が終わればすぐにガベージコレクションの対象となるため、まさに「使い捨ての配列」のためにリソースを浪費していることになる。このような非効率性を避けるために、これまでは開発者が手書きでyield*を用いたジェネレーター関数を作成し、各イテラブルから要素を一つずつ遅延的に生成する「遅延評価（lazy evaluation）」のアプローチをとる必要があった。

この課題を解決し、より効率的で簡潔なデータ処理を実現するために、JavaScriptに新しく導入されるのがIterator.concat()という機能である。これは、先に述べた手書きのジェネレーター関数が提供していた「遅延的な結合」の仕組みを、言語の組み込み機能として提供するものだ。Iterator.concat()は、任意の数のイテラブルを引数として受け取り、それらを順番に要素を生成するイテレーターを返す。

Iterator.concat()の最大の利点は、その「遅延評価」の特性にある。これは、必要な要素だけを、必要な時に生成・処理するという原則に基づいている。つまり、Iterator.concat()を呼び出した時点では、引数として渡されたイテラブルの要素は一つも生成されず、実際のイテレーション（ループ処理）が始まってから、必要に応じて一つずつ要素が生成される。この仕組みにより、一時的な配列の作成が不要となり、大幅なメモリ削減とパフォーマンス向上が期待できる。

具体的な例で考えてみよう。例えば、それぞれ1000行のデータを生成するジェネレーター関数page(start)が二つあり、その合計2000行のうち最初の3行だけをUIに表示したいとする。 スプレッド構文を用いて[...page(0), ...page(1000)].slice(0, 3)と書いた場合、page(0)とpage(1000)がそれぞれすべての1000行を生成し、合計2000行が一時的な配列にコピーされる。その後、その配列から最初の3行が切り出されることになる。結果として3行しか使用しないにもかかわらず、2000行分の生成とコピー処理が行われるため、メモリとCPUリソースが無駄になる。 これに対し、Iterator.concat(page(0), page(1000)).take(3).toArray()と書いた場合、Iterator.concat()は遅延的に動作するため、実際に必要とされる3行だけが生成される。take(3)というイテレーターヘルパーが「3つの要素を取得したらそこで停止する」と指示するため、合計3行分の生成と処理で完結するのだ。これは「解析されたログ行」や「デコードされた画像」のような大規模なデータ処理に置き換えると、その効率性の差は単なる学術的な議論ではなく、実際のシステム性能に大きく影響する現実的なメリットとなる。

また、Iterator.concat()が返す結果は「本物のイテレーター」であるため、JavaScriptに新しく導入されるイテレーターヘルパー群（filter()、map()、take()、toArray()など）と直接組み合わせて利用できる点も大きなメリットだ。これにより、結合されたデータに対して、フィルタリングや変換といった複雑な処理を、非常に簡潔で読みやすいコードで実現できるようになる。例えば、Iterator.concat()で結合したデータから偶数だけを抽出し、その値を10倍するといった処理が、メソッドチェーンで直感的に記述できるようになる。

Iterator.concat()は、配列やSetだけでなく、Mapオブジェクトやジェネレーター関数など、JavaScriptのあらゆるイテラブルなデータ構造に対応している。特にMapの結合では、「デフォルト設定とユーザー設定をマージする」といったシナリオで非常に役立つ。複数のMapをIterator.concat()で結合し、新しいMapを作成することで、後から結合されたMapのキーが優先される形で設定を簡単に上書きできる。これはMapコンストラクタの既存の振る舞いと一致するため、自然に利用できる。

Iterator.concat()の遅延性は、ソースの開き方にも影響する。concat関数が呼び出された時点では、どのイテラブルも開かれない。実際のイテレーションが進み、最初のイテラブルから要素が尽きた後に初めて次のイテラブルが開かれる。この「必要な時まで触らない」という特性により、無限に要素を生成し続けるイテラブル（例えば、自然数を延々と生成するジェネレーター）を扱いつつ、take()のようなヘルパーを使って必要な数だけ取得するといった安全な処理も可能になる。

このIterator.concat()は、TC39のIterator Sequencing提案としてStage 4（最終段階）に達しており、標準化が完了している。ブラウザでの利用状況は、2026年3月以降、Chrome、Edge、Firefox、Safariといった主要なブラウザで利用可能になる予定だ。ただし、Node.jsの現行バージョン（v24.11.0時点）ではまだ実装されていないため、Node.js環境で今日利用したい場合は、記事で紹介されている5行程度のジェネレーター関数をフォールバックとして使用する必要がある。

使用上の注意点もいくつか存在する。 まず、JavaScriptの文字列はイテラブルであるものの、Iterator.concat()は文字列を直接受け付けない。文字列を引数として渡すとTypeErrorが発生するため、Iterator.from("abc")のようにIterator.from()でラップするか、[..."abc"]のようにスプレッド構文で配列に変換してから渡す必要がある。nullを渡した場合も同様にエラーとなる。 次に、「素のイテレーター」と呼ばれる、next()メソッドのみを持つオブジェクトも直接は受け付けない。これらもTypeErrorとなるため、Iterator.from()でラップする必要がある。ただし、[1, 2, 3].values()のような組み込みのイテレーターは、それ自体がイテラブルでもあるため、問題なく利用できる。 また、Iterator.concat()の実行結果は、通常のイテレーターと同様に「単回利用」である。一度全ての要素をイテレーションして消費してしまうと、再度イテレーションしようとしても何も返さなくなる。複数回同じ結合順序で要素が必要な場合は、その都度Iterator.concat()を呼び出す必要がある点に注意したい。 最後に、ループ処理を途中で中断した場合（例えばbreak文を使用した場合）でも、開かれたリソースは適切にクリーンアップされる。これは、内部でリソースを解放するロジック（finallyブロックなど）が適切に実行されることを意味し、リソースリークの心配がない。

Iterator.concat()は、複数のイテラブルを効率的かつ簡潔に結合し、処理するための強力な新機能である。これまで開発者が手書きで書いていた遅延評価のロジックが言語に組み込まれ、さらにイテレーターヘルパーと組み合わせることで、より柔軟で高性能なデータパイプラインを構築できるようになる。日常的に[...a, ...b]のようなスプレッド構文を一度きりのループのために使っている場合、今後はIterator.concat(a, b)の利用を検討すべきだろう。これにより、アプリケーションのメモリ効率とパフォーマンスを改善し、より洗練されたコードを書くことが可能になる。