イテレータとイテラブルの概要と課題、未来

イテレータとイテラブルの概要と課題、未来 JSConf 2024

#jsconfjp_b

自己紹介 SUZUKI Sosuke ( @__sosukesuzuki ) • ユビー株式会社プロダクト開発エンジニア •
筑波大学情報学群情報科学類 B4 • WebKit コミッター • Prettier メンテナー

この話のモチベーション日常的にJavaScriptやTypeScriptを書いている人であっても、イテレータ・イテラブルについてちゃんと理解して、活用している人は少ない。イテレータ・イテラブルは強力な言語機能だから、使うべきときに使えないのはもったいない。だから、知ってほしい。

この話のモチベーションこの発表の目的は、聞いた皆さんが、 1. 日常のプログラミングの中でイテレータやイテラブルを使うことを考えられるようになること 2. ライブラリ・フレームワークがイテレータ・ジェネレータを前提にしたインタフェースを持っていても臆することなく使いこなせるようになること

話すこと 1. イテレータ・イテラブルの基本 2. イテレータ・イテラブルのユースケース 3. イテレータ・イテラブルはなぜあまり使われないのか 4. 最新、そしてちょっと未来のイテレータ・イテラブル 5.
まとめ

1. イテレータとイテラブルの基本

イテレータ・イテラブルの基本イテレータ・イテラブルを一言でいうと「連続して生成される値を一貫したインタフェースで取り扱うための仕組み」

イテレータ・イテラブルの基本連続した値を反復して処理したくなることがある。JavaScript でよく使われる反復の対象はArray。

イテレータ・イテラブルの基本 for (const foo of bar) {} の of の右側にArrayを書くことが多
い。しかし、実際にはイテラブルであればどんなオブジェクトでも書くことができる。 Array、Set、Mapなどの組み込みコレクションはイテラブルであるため、for of 構文で反復して処理できる。

イテレータ・イテラブルの基本イテラブルとはIterable Interface を満たすオブジェクトのこと。イテラブルは、Symbol.iteratorという名前のプロパティを持っていて、そのプロパティはイテレータを返す関数。

イテレータ・イテラブルの基本余談 • JavaScriptでは { [symbol]: value } という記法でシンボルの値をキーに持つオブジェクトを作れる
• Symbol.iteratorのようにSymbol.hogeという形をしているのは Well-known Symbolsと呼ばれている。JavaScriptの様々な隠れ挙動を制御するために使われる特別なシンボル

イテレータ・イテラブルの基本 ArrayやSetはイテラブル、つまりSymbol.iterator関数がある。この関数を直接呼び出すこともできる。 ArrayのSymbol.iterator関数はArray Iteratorというイテレータを返す。

イテレータ・イテラブルの基本イテラブルでなければ for…of の of の右側に置くことはできない。意図的にIterableInterfaceを満たさなくなるように Arrayオブジェクトを破壊してみると、エラーになる。

イテレータ・イテラブルの基本説明したこと • イテラブルであれば for…of で反復処理できること ◦ 組み込みコレクションのArrayやSetもイテラブルの一種であること •
イテラブルは、Symbol.iterator プロパティがイテレータを返す関数であるようなオブジェクトであること

イテレータ・イテラブルの基本イテレータは、Iterator Interfaceを満たすオブジェクトのこと。Iterator Interface では、一つの必須プロパティ(next関数)と二つのオプショナルなプロパティ(return と throw)が決められている。

イテレータ・イテラブルの基本 ※ この発表では return と throw については触れません。すでに色々な人が日本語で記事を書いてくれているので、そちらを参照してください: •
Masaki Hara. 2021. JavaScriptのIterator / Generatorの整理. https://zenn.dev/qnighy/articles/112af47edfda96 • uhyo. 2024. イテレータを分岐させるとどうなる？　Iterator Helpersに見るJavaScriptのイテレータの挙動. https://zenn.dev/uhyo/articles/iterator-helpers-iterator-close

イテレータ・イテラブルの基本 next、return、throwはIteratorResult Interfaceを返す関数。IteratorResult Interface は boolean の done プロパティ
と、何かしらの値を持つ value プロパティを持っている。

イテレータ・イテラブルの基本シンプルなオリジナルのイテレータ・イテラブル。

イテレータ・イテラブルの基本変数iterableはイテラブルなので、for…ofで反復できる。やってみると... 1が無限に出力されている。変数iteratorのnext関数が返している value: 1 が element に入ってそうな、感じがする。
イテレータのnextメソッドをちょっといじってみる。

イテレータ・イテラブルの基本 iterator は counter というプロパティを持つ。next 関数で counter をインクリメントし、5 以上であれば done
が true の IteratorResult を返す。

イテレータ・イテラブルの基本 iteratorだけ更新して、もう一度同じコードを実行してみると書いたとおりに4で止まっている！

イテレータ・イテラブルの基本この動作から、 1. 反復のたびにiteratorのnextメソッドが呼び出されていること 2. doneがtrueのIteratorResultを返すと反復が止まることがわかる。これがイテレータ・イテラブルの正体。ArrayやSetなどの標準コレクションもこうなっている。

イテレータ・イテラブルの基本 Arrayはイテラブルだがイテレータではない。Array の裏にはArrayIteratorというイテレータが隠れている。このイテレータのnext 関数を直接使ってみる。 ArrayIteratorのnextはベースのArrayの要素を一つずつ返すことがわかる。

イテレータ・イテラブルの基本ジェネレータのことも思い出してみよう。みなさん覚えてますか。redux-sagaでよく書きましたよね。

イテレータ・イテラブルの基本この function* で始まる関数をジェネレータ関数という。ジェネレータ関数はジェネレータを返す。

イテレータ・イテラブルの基本ジェネレータはイテレータかつイテラブル。なので、next 関数を持っている。ジェネレータのnext関数は、ジェネレータ関数の中でyieldされた値を生成する。

イテレータ・イテラブルの基本ジェネレータ関数は、yieldで処理を中断し、nextの呼び出しで処理を再開できる関数。「Promiseはあるがasync/awaitはない」という時代には、ジェネレータでasync/await風の書き味を実現するライブラリもあった( https://github.com/tj/co など)。ジェネレータ関数内でPromiseがyieldされたらresolveもしくはrejectされるまで待ち、resolveされたらnextで再開する。

イテレータ・イテラブルの基本これまでの話を整理すると • for…ofのofの右側にはイテラブルを書ける • ArrayやSetなどはイテラブルである • イテラブルは、Symbol.iterator関数を持つオブジェクトである。その関数はイテレータを返す。 •
イテレータはnext関数を持つオブジェクトである。その関数は { done: boolean, value: any } の形のオブジェクトを返す。 • ジェネレータはイテレータかつイテラブルである

イテレータ・イテラブルの基本ちなみに、非同期イテレータ・非同期イテラブルもある。イテレータのnext関数がIteratorResultオブジェクトを返すのに対して、非同期イテレータのnext関数は Promise<IteratorResult> を返す。イテラブルの Symbol.iterator 関数がイテレータを返すのに対して、非同期イテラブルの
Symbol.asyncIterator 関数は非同期イテレータを返す。

イテレータ・イテラブルの基本

イテレータ・イテラブルの基本 • next関数がPromise を返している • 非同期イテラブルは Symbol.asyncIterat or関数を持つ • for
await of という構文で反復している

イテレータ・イテラブルの基本これらを踏まえた上で、冒頭の主張について考えてみる。

イテレータ・イテラブルの基本イテレータ・イテラブルを一言でいうと「連続して生成される値を一貫したインタフェースで取り扱うための仕組み」

イテレータ・イテラブルの基本イテレータ・イテラブルを一言でいうと「連続して生成される値を一貫したインタフェースで取り扱うための仕組み」イテレータのnext関数によって生成される

イテレータ・イテラブルの基本イテレータ・イテラブルを一言でいうと「連続して生成される値を一貫したインタフェースで取り扱うための仕組み」 for (const foo of bar) {}
など

イテレータ・イテラブルの基本ちなみに、イテラブルは他にも色んなところで使える • for…of • Array.from • スプレッド構文 • 分割代入
• MapやSetのコンストラクタ • Promise.all など • yield* など

2. イテレータとイテラブルのユースケース

2. イテレータとイテラブル組み込みではないカスタムのやジェネレータのユースケース

イテレータ・イテラブルのユースケースたとえば、こういうユースケースがある: 1. カスタムのリスト風データ構造に対して反復処理がしたい 2. 無限のリストがほしい 3. メモリに載せたくないくらいデカイデータセットに対して反復処理がしたい 4.
非同期で生成されるデータストリームに対して反復処理がしたい

イテレータ・イテラブルのユースケースこういう連結リストがあるとする。こいつはこのままだと for…ofでループしたり、分割代入したりできない。 1. カスタムのリスト風データ構造に対して反復処理がしたい

イテレータ・イテラブルのユースケースこういうSymbol.iteratorがあれば、 for…of でループできて嬉しい。 1. カスタムのリスト風データ構造に対して反復処理がしたい

イテレータ・イテラブルのユースケース大人気のコレクションであるArrayやSetは、すべての要素がメモリに乗るため、無限だったりめちゃくちゃデカかったりするリストを表現するのが難しい。 2. 無限のリストがほしい

イテレータ・イテラブルのユースケースジェネレータを使うと簡単に実現できて嬉しい。 generatorのnext関数を呼ぶと値が1ずつ増えていき、何度でも呼び出せる。 2. 無限のリストがほしい

イテレータ・イテラブルのユースケースメモリに載せたくないくらいめちゃくちゃデカイデータセットがあって、それを反復処理したいような状況。 HDD上にあるめっちゃデカイCSVファイルを処理したい、とか。 3. メモリに載せたくないくらいデカイデータセットに対して反復処理がしたい

イテレータ・イテラブルのユースケース有名なCSVパーサーライブラリであるnode-csvでは、パース結果を非同期イテラブルとして扱える。 3. メモリに載せたくないくらいデカイデータセットに対して反復処理がしたい

イテレータ・イテラブルのユースケース非同期で生成されるデータのストリームを非同期イテラブルとして表現できれば、for await of を使って反復処理できる。たとえば、Bunのconsoleオブジェクトは非同期イテラブルになっている（びっくり！）。 4. 非同期で生成されるデータストリームに対し
て反復処理がしたい

イテレータ・イテラブルのユースケース consoleのイテレータのnext関数は、入力された行を非同期で取得して返す。 Console Standardsにはない挙動なので否定的な意見もあるが、非同期イテラブルの使い方としては面白い。 4.

イテレータ・イテラブルのユースケースこういうユースケースに遭遇したら、イテレータチャンス！ 1. カスタムのリスト風データ構造に対して反復処理がしたい 2. 無限のリストがほしい 3. メモリに載せたくないくらいデカイデータセットに対して反復処理がしたい 4.

3. イテレータとイテラブルはなぜあまり使われないのか

イテレータ・イテラブルはなぜあまり使われないのか実は、イテレータ・イテラブルを使うべき状況に遭遇することはあんまりない、という根本的な理由がある。 ArrayやSetを使うべきときに無理にカスタムイテレータやジェネレータを使うのは悪手。性能は落ちるし使いにくいはず。

イテレータ・イテラブルはなぜあまり使われないのかしかし、とはいえ、我々JavaScriptプログラマーはイテレータ・イテラブルについて無知すぎる、と思う。ジェネレータのyield, yield*の意味論を知らない。イテレータ・イテラブル、非同期イテレータ・非同期イテラブルの構造、作り方を知らない。コードを書くときに、それらを使うという発想に至らない。

イテレータ・イテラブルはなぜあまり使われないのかそして、これまでのイテレータはぶっちゃけあんまり便利ではなかった。イテレータが便利な言語には、いろんな便利関数があったりする（たとえばRust）。 JavaScript(ECMAScript 2024時点)では、ほとんどない。カスタムイテレータを作ったり、ジェネレータを使ったりしても、それを便利に使うことができない。

4. 最新、そしてちょっと未来のイテレータ・イテラブル

最新、そしてちょっと未来のイテレータ・イテラブル Iterator HelpersというStage 4のECMAScript プロポーザルがある。 2024年10月のTC39(東京開催)で、Stage 4になり、主要な3 つのJavaScript処理系(V8、SpiderMonkey、JavaScriptCore)
ではすでに実装されている。

最新、そしてちょっと未来のイテレータ・イテラブル Iterator Helpersの前に、いくつかの前提。 ArrayオブジェクトのイテレータであるArrayIteratorオブジェクトは、%ArrayIteratorPrototype% を継承する %ArrayIteratorPrototype%
は%IteratorPrototype%を継承す %ArrayIteratorPrototype% ArrayIterator オブジェクト（イテレータ） Arrayオブジェクト（イテラブル） %IteratorPrototype% Symbol.iterator 継承継承

最新、そしてちょっと未来のイテレータ・イテラブル %IteratorPrototype%は直接アクセスできない、いわば隠れオブジェクトだった（Object.getPrototypeOfなどを使うとアクセスできる） %ArrayIteratorPrototype% ArrayIterator オブジェクト
（イテレータ） Arrayオブジェクト（イテラブル） %IteratorPrototype% Symbol.iterator 継承継承

最新、そしてちょっと未来のイテレータ・イテラブル思い出そう %ArrayIteratorPrototype% ArrayIterator オブジェクト（イテレータ） Arrayオブジェクト（イテラブル） %IteratorPrototype%
Symbol.iterator 継承継承

最新、そしてちょっと未来のイテレータ・イテラブル Arrayに限らず、SetやMapなどの組み込みイテラブルのイテレータは、間接的に %IteratorPrototype% を継承している

最新、そしてちょっと未来のイテレータ・イテラブル Iterator Helpersプロポーザルは、以下の３つの重要な変更を加えた: 1. %IteratorPrototype% とそのコンストラクタをグローバルに公開した 2.
%IteratorPrototype% に便利なヘルパー関数を追加した 3. 普通のオブジェクトにあとから %IteratorPrototype% を継承させる方法を提供した

最新、そしてちょっと未来のイテレータ・イテラブル Iterator Helpersプロポーザルは • Iterator コンストラクタ • Iterator.prototype (=
%IteratorPrototype% ) をグローバルに公開した。

最新、そしてちょっと未来のイテレータ・イテラブル Iterator Helpersプロポーザルは以下のヘルパー関数を %IteratorPrototype% に追加した • map • filter
• take • drop • flatMap • reduce • toArray • forEach • some • every • find

最新、そしてちょっと未来のイテレータ・イテラブル Iterator Helpersプロポーザルは、普通のオブジェクトにあとから %IteratorPrototype% を継承させる方法を提供した。

最新、そしてちょっと未来のイテレータ・イテラブル Iteratorを継承したクラスを作ることもできる。　　　　　　　　　　　　　　　　直接 new はできない。

最新、そしてちょっと未来のイテレータ・イテラブル Iterator Helpersがあると、こういうコードが書ける。

最新、そしてちょっと未来のイテレータ・イテラブル Iterator Helpersは素晴らしいが、これだけではちょっと... • map • filter • take
• drop • flatMap • reduce • toArray • forEach • some • every • find

最新、そしてちょっと未来のイテレータ・イテラブルということで、いくつかのプロポーザルがある • Iterator.zip (Stage 2.7) https://github.com/tc39/proposal-joint-iteration • Iterator.concat
(Stage 2.7) https://github.com/tc39/proposal-iterator-sequencing • Async Iterator Helpers (Stage 2) https://github.com/tc39/proposal-async-iterator-helpers • Iterator.range (Stage 2) https://github.com/tc39/proposal-iterator.range • Iterator chunking (Stage 2) https://github.com/tc39/proposal-iterator.range

5. まとめ

まとめイテラブルはイテレータは

まとめ • for…ofをはじめとしたいろんな構文、ビルトイン関数はイテラブルを受け取る。 • 以下の場合に、イテレータ・ジェネレータとして表現することを検討しよう ◦ カスタムのリスト構造を扱うとき ◦
無限のリストを扱うとき ◦ メモリに載せたくないくらいデカイデータを扱うとき ◦ 非同期に生成されるデータストリームを扱うとき

まとめ • 最近のJavaScriptには、Iterator.prototype にいろんなヘルパーが追加されている。 ◦ 自分のオリジナルイテレータに Iterator.prototype を継承させれば（Iterator.from
や Iterator コンストラクタによって）ヘルパーを使える。 • 他にも新たなヘルパーを追加するプロポーザルがアクティブに動いている。

イテレータとイテラブルの概要と課題、未来

イテレータとイテラブルの概要と課題、未来

More Decks by sosukesuzuki

Featured

Transcript