公開日: 2025 年 5 月 1 日
JavaScript を記述する場合、反復処理は頻繁に行います。配列を操作するループを記述するか、map、filter などの関数型プログラミング メソッドを使用して、さまざまなデータを処理します。
ただし、これらのメソッドを使用する際の難点は、配列でのみ使用できることです。イテラブルにこれらのメソッドを使用する場合は、イテラブルを配列に変換してから、必要なメソッドを呼び出す必要があります。これは無駄になる可能性があります。また、イテレラブルがジェネレータ関数を使用して無限のデータセットを含む場合は、不可能です。ただし、イテレータ ヘルパーがベースラインの新規機能となったことで、この機能がすべてのブラウザで利用可能になりました。
イテレータ ヘルパーの仕組み
イテレータ ヘルパーは、Iterator オブジェクトの prototype に新しいメソッドを定義することで公開されます。これらのメソッドは、map、filter、reduce などの、慣れ親しんだ多くの関数型プログラミング メソッドと一致します。
たと��ば、filter メソッドでイテレータ ヘルパーを使用して、DOM ノードのコレクションの innerText プロパティの内容でリストアイテムをフィルタリングし、後で for ループで使用できます。
const posts = document.querySelectorAll("ul#specific-list > li")
.values()
.filter(item => item.textContent.includes("kiwi"));
// For-of loops can only be used on iterables, which `posts` is!
for (const post of posts) {
console.log(post.textContent);
}
上記のコード スニペットでは、filter のインテレータ ヘルパー メソッドを使用して、特定の <ul> 要素内のすべての <li> 要素を反復処理しています。フィルタ条件は、各要素のテキスト コンテンツに "kiwi" の部分文字列が含まれていることです。
イテレータ ヘルパーは、ジェネレータ関数でも使用できます。この例では、階乗を��������るジェネレータ関数ですが、イテレータ ヘルパーを使用して、8 で割り切れる値にフィルタし、フィルタされた最初の 5 つの値をコンソールにログに記録します。
function* factorials (n) {
let result = 1;
for (let i = 1; i <= n; i++) {
result *= i;
yield result;
}
}
const filteredFactorials = factorials(128).filter(x => x % 8 === 0);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
特に、上のコード スニペットは、イテレータ ヘルパーでは不可能な処理の例です。なぜなら、階乗の数は無限であり、配列に変換できないからです。
状況に応じて、イテレータ ヘルパーには多くの可能性があります。これらのイテラブル メソッドのそれぞれで使用できます。
イテレータ ヘルパーのユースケースは多岐にわたり、デベロッパーの作業効率を大幅に向上させることができます。ベースラインとして新たに利用可能になったため、互換性の問題を恐れずに使用できるという確信が今後ますます強まっていくはずです。詳しくは、以下のリソースをご覧ください。