JavaScriptの配列メソッドの罠とその処方箋。Iteratorで書くスマートな反復処理とは

JavaScriptの「今」はこうなっている！現場のコードを変える注目機能を総ざらい 第3回

　配列はコレクションの基本であり、さまざまなデータ処理のメソッドを提供します。しかしながら、大量のデータを何段階にもわたって処理するには致命的な欠陥がありました。これが、Iteratorに同等のメソッドが実装されることで大きく変わります。コレクションの処理を相変わらず配列で書いていたら、とんでもない罠にはまっていることになるかもしれません。この回では、配列メソッドの問題点を浮き彫りにしてIteratorメソッドの優位性を明らかにすることで、コレクションのデータ処理における新しい標準を示します。

はじめに

　JavaScriptは絶え間ない進化を続けています。これを追いかけていくと、多数の便利な追加や改善の中に、従来のコードが時代遅れになるような、コードの書き方が変わるほどのインパクトある機能を見つけることができます。本連載は、JavaScriptを普段使いする開発者に向けて、JavaScriptの標準規格である「ECMAScript」で標準化された、あるいは標準化予定の機能を紹介しながら、開発者が自身のコードをどうアップデートすべきか解説します。

対象読者

• JavaScriptの最新バージョンの機能を把握したい方
• JavaScriptの経験者で、JavaScriptに改めて入門したい方
• プログラミング言語の最新パラダイムに関心のある方

必要な環境

　本記事のサンプルコードは、以下の環境で動作を確認しています。他の環境では動作しないか、動作が不安定になる可能性があります。

• macOS Sequoia
  • Node.js 26.3

Arrayオブジェクトにおける反復処理の問題点とは？（1）

　今回のメインテーマは、ECMAScript 2025で標準化された「Sync Iterator helpers」です。これは、Iteratorオブジェクトに新たに追加された反復処理のためのメソッド群で、Arrayオブジェクトにおける同種のメソッドの問題点を解決するものとされています。

　では、Arrayオブジェクトのメソッドにはどんな問題点があるのでしょうか？ それを詳しく見ていく前に、Arrayオブジェクトにおける反復処理について確認していきましょう。

Arrayオブジェクトにおける反復処理とは

　Arrayオブジェクトは文字通り配列を表すものであり、JavaScriptにおけるデータ処理の基本となるデータ型であるのは言うまでもありません。配列には、その性質上、すべての要素に対して繰り返し行う処理、反復処理が頻繁に発生します。

　例えば、条件に合致する要素のみを抽出する（フィルタリング）、すべての要素に一定の加工を施す、すべての要素について一定の処理を施す……などです。Arrayオブジェクトには、このためのメソッドが多数用意されています。

表：Arrayオブジェクトにおける反復処理のための主なメソッド

メソッド	概要
every(func)	すべての要素が条件を満たすかどうかを判定する
filter(func)	条件を満たす要素だけを抽出する
find(func)	条件を満たす最初の要素を返す
flatMap(func)	各要素をマッピングし結果をフラットなArrayとして返す
forEach(func)	各要素に対して指定した処理を実行する
map(func)	各要素に対して処理を施す
reduce(func, value)	すべての要素を集約して単一の値にまとめる
some(func)	少なくとも1つの要素が条件を満たすかどうかを判定する
sort()	要素を並び替えて元の配列への参照を返す
toSorted()	要素を並び替えて新しい配列を返す
values()	配列イテレータを返す

　よく使われるのはfilter、map、forEachメソッドなどで、条件によるフィルタリング、加工、最終処理を可能にします。おさらいとして、以下のリストを確認しておきましょう。

リスト　array_basic.js

// (1)0～99の配列を生成
const arr = new Array(100);
for (let i = 0; i < arr.length; i++) {
    arr[i] = i;
}
const result = arr
    .filter(x => x % 2 === 1)	// (2)奇数のみにフィルタリング
    .map(x => x + 1)		// (3)結果の全要素に1を加える
    .reduce((acc, x) => {	// (4)結果の合計値を求める
        return acc + x;
    }, 0);
console.log(result);	// 2550

　このリストで行われているのは以下の処理です。

• （1）0～99の100個の要素を持つ配列を生成する
• （2）filterメソッドで奇数のみを抽出する
• （3）その結果に対してmapメソッドですべての要素に＋1する
• （4）さらに、その結果に対してreduceメソッドで合計値に集約する

　filterメソッドもmapメソッドも結果を処理済みの配列として返すので、反復処理を連結することで複雑なデータ処理を一つの文で記述することができて便利です。

反復処理の連結には中間配列が生成される

　このように便利なArrayオブジェクトのメソッドですが、その利用においてはそれぞれのメソッドの戻り値に注意する必要があります。前述の通り、一部のメソッドを除き、メソッドの処理結果は新しい配列として返されます。

　これは、「メソッドをつなぐたびに一時的な中間配列が生成される」ことを意味します。メソッドを10個つなげたら、その間に9個の中間配列が生成されます。配列というデータ構造の性質上、ときには大量のデータを取り扱うときもあるので、この中間配列の生成はメモリ消費的にも処理速度的にも負担となります。

図　Arrayオブジェクトにおける反復処理の連結