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

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

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

IteratorオブジェクトもArrayオブジェクトに依存していた

　ところでJavaScriptでは、イテレータという仕組みがES2015から利用可能です。イテレータとは文字通り「反復」という意味で、反復処理に特化したオブジェクト（Iteratorオブジェクト）です。

　イテレータを使うと、必要なときに次の要素を同期的に取り出すことが可能です。ただし、これはあくまで値を1つずつ取り出す基本的な反復処理における利点であり、この段階ではフィルタリングや加工を連結する手段までは提供されていませんでした。

　イテレータの基本機能は、拡張for文（for...of文）における反復処理が中心であり、フィルタリングや加工を行うには、いったんArrayオブジェクトに変換する必要があったのです。つまり、この時点ではまだArrayオブジェクトのメソッドを使うことになり、中間配列の生成は避けられませんでした。

　以下のリストは、Arrayオブジェクトの例をIteratorオブジェクトを用いて書き直したものです。

リスト　iter_basic.js

// (1)0～99を返すジェネレータ関数
const generate = function* () {
    let i = 0;
    while (i < 100) {
        yield i++;	// (2)ここでiを返して関数をいったん抜ける
    }
};

const result = [...generate()]	// (3)スプレッド構文で配列に展開する
    .filter(x => x % 2 === 1)
    .map(x => x + 1)
    .reduce((acc, x) => {
        return acc + x;
    }, 0);
console.log(result);

　（1）は、イテレータを生成するジェネレータ関数です。functionキーワードの後に「*」を続けた特殊な関数で、（2）のyieldキーワードによりその時点のiの値を返して関数の実行をいったん中断します。次に呼び出されたときに関数の実行を再開し、これを関数終了まで繰り返します。この方法の利点は、配列を生成することなく、0～99の値を順に返せることです。

　しかしながら、イテレータにはArrayオブジェクトのようなメソッドがなかったので、それらのメソッドを使いたければいったんArrayオブジェクトに変換する必要がありました。これが（3）で、スプレッド構文で配列を生成し、そのあとはArrayオブジェクトの例のようにメソッドを呼び出しています。

Arrayオブジェクトの問題を解決する「Sync Iterator helpers」

　目的は達成できますが、Arrayオブジェクトにおける反復処理が必要なのは変わらず、イテレータのメリットを生かせません。そこで、ES2025において実装されたのが、Sync Iterator helpersのメソッド群です。これを「イテレータヘルパーメソッド」と言います。

Arrayオブジェクトと同様に使えるイテレータヘルパーメソッド

　主なイテレータヘルパーメソッドには、以下の表に挙げるものがあります（すべてIterator.prototypeに定義されたメソッド）。これらのほとんどは、Arrayオブジェクトにもあったメソッドです。すなわち、Arrayオブジェクトを操作するのと同じ感覚で、反復処理を記述できます。

表：主なイテレータヘルパーメソッド（*はArrayオブジェクトにはないメソッド）

メソッド	戻り値	概要
drop*	イテレータ	指定した数の要素をスキップし、その後の要素のみを返す
every	論理値	すべての要素が条件を満たすかどうかを判定する
filter	イテレータ	条件を満たす要素だけを抽出する
find	単一値	条件を満たす最初の要素を返す
flatMap	イテレータ	各要素をマッピングし結果をフラットなイテレータとして返す
forEach	なし	各要素に対して指定した処理を実行する
map	イテレータ	各要素に対して処理を施す
reduce	単一値	すべての要素を集約して単一の値にまとめる
some	論理値	少なくとも1つの要素が条件を満たすかどうかを判定する
take*	イテレータ	指定した数の要素だけを返す
toArray	配列	イテレータを配列に変換する

　この表において戻り値が「イテレータ」と記載されているものは、正確にはイテレータヘルパーオブジェクトです。これらのメソッドを使って、先ほどのジェネレータ関数を使った例を書き直してみましょう。

リスト　iter_helper.js

…ジェネレータは省略…
const result = generate()	// (1)ジェネレータ関数を直接呼び出す
    .filter(x => x % 2 === 1)
    .map(x => x + 1)
    .reduce((acc, x) => {
        return acc + x;
    }, 0);
console.log(result);

　変更箇所は一つで、（1）のようにスプレッド構文ではなく直接ジェネレータ関数を呼び出している点です。これだけで、イテレータヘルパーメソッドを使った反復処理となります。メソッドの使い方そのものは変わらないので、従来のコードをイテレータベースに置き換えるのは容易でしょう。

　イテレータの性質として、必要なときにデータを取得する仕組みであるので、Arrayオブジェクトのように中間配列を必要としません。このため、メモリの消費を抑制でき、結果として処理速度の向上を期待できます。

図　イテレータヘルパーメソッドによる反復処理

イテレータヘルパーメソッドを使うと本当に速いのか

　ここまで、イテレータヘルパーメソッドの使い方を紹介してきました。といっても大きく使い方が変わるわけではないので、関心は「本当に速いのか」というところにあるでしょう。速くなければ、わざわざコードを書き換える必要がないのでは？ といった疑問もあると思うので、簡単なベンチマーク試験を行ってみました。

　ここまでと同様にジェネレータ関数を使い、Arrayオブジェクトのメソッド、Iteratorオブジェクトのメソッドで同じ処理を実行し、処理時間を計測します。基本的な構造はこれまでと同じで、performanceオブジェクトのnowメソッドで日時を取得し、開始時点と終了時点の差を取得して出力しています。

　以下はArrayオブジェクト版のコードです。

リスト　array_method.js

// (1)0～99999999（とても大きな個数）を返すジェネレータ関数
const generate = function* () {
    let i = 0;
    while (i < 100000000) {
        yield i++;
    }
};

const start = performance.now();	// (2)開始時刻を記録
const result = [...generate()]		// (3)イテレータを配列に展開する
    .filter(x => x % 2 === 1)
    .map(x => x + 1)
    .reduce((acc, x) => {
        return acc + x;
    }, 0);
const end = performance.now();		// (4)終了時刻を記録
console.log(result);
console.log(`Execution time: ${end - start} ms`);

　（1）のように、反復回数をとても大きな数に変更しています。（2）（4）はその時点の日時情報を取得する処理で、差を取って経過時間を計算します。また、イテレータ版（iter_method.js）は、（3）においてジェネレータ関数を直接呼び出している点のみの違いとなります。

　Arrayオブジェクト版を実行すると、以下の結果になりました（環境やタイミングによって数値は変化します）。

2500000050000000
Execution time: 10762.628575 ms

　以下はイテレータ版の実行結果です。

2500000050000000
Execution time: 4651.424765 ms

　計算結果が同じなのは当たり前ですが、所要時間には2倍以上の開きがあります。これだけで判断するのは拙速ではありますが、ひとまずこういったケースではイテレータヘルパーメソッドの利用にはメリットがあると判断できるでしょう。