イテレーターとジェネレーターで巨大CSVをサクッとプレビューしたい

Transcript

1. Ginza. j #1 © LayerX Inc. 1
2. Ginza.js#11 イテレーターとジェネレーターで 巨大CSVをサクッとプレビューしたい yata(@0e2b3c) © LayerX Inc. 2
3. 自己紹介 yata(@0e2b3c) 株式会社 LayerX バクラク人事労務 SWE CSSプロパティのMdn全部読みました スマブラとヨルシカと礼賛と ゆる言語学ラジオが好きです © LayerX Inc. 3
4. 今回話すこと イテレーター と ジェネレーター の話をします ↑ を使って重いCSVでもブラウザ上でプレビューできるビューワーをサクッと作れたよ という話もします © LayerX Inc. 4
5. 1. イテレーターとは © LayerX Inc. 5
6. 1-1. イテレーターとは？ 構文やスプレッド構文( ... )などで要素を順番に取ってくるものの中身 配列などを for of に入れると要素が取れるのはイテレーターが実装されているから 逆に言えば、イテレーターを実装すれば好きなオブジェクトをfor ofで回せる for of 例えばツリーを深さ順にconsoleで出力するとかもできる © LayerX Inc. 6
7. 1-1. イテレーターを構成する３つの要素 イテラブルなオブジェクト: イテレーターを持つオブジェクト 正確には「 [Symbol.iterator] を呼び出した時にイテレーターが返るオブジェクト」 配列や文字列、MapやSetなど イテレーター: 順番にイテレーターリザルトを取り出すことができるオブジェクト イテレーターリザルトを返却するnext()が実装されている イテレーターリザルト: valueとdoneを持つオブジェクト value: 配列で言うところのそれぞれの要素の値 done: 終了しているかどうかのフラグ © LayerX Inc. 7
8. 1-1. イテレーターを構成する３つの要素 イテラブルなオブジェクト: イテレーターを持つオブジェクト 正確には「 [Symbol.iterator] を呼び出した時にイテレーターが返るオブジェクト」 配列や文字列、MapやSetなど イテレーター: 順番にイテレーターリザルトを取り出すことができるオブジェクト イテレーターリザルトを返却するnext()が実装されている イテレーターリザルト: valueとdoneを持つオブジェクト value: 配列で言うところのそれぞれの要素の値 done: 終了しているかどうかのフラグ ↑長い！ © LayerX Inc. 8
9. 1-1. これだけ覚えて欲しいこと 説明済: for of で回せるものの中にはイテレーターというオブジェクトがいる for of で回すと、イテレーターの中にある next() というメソッドが呼び出されて、次 の値を取得してくれる next() © LayerX Inc. の呼び出しを繰り返していくことで順番に値が取り出されていく 9
10. 1-2. サンプル: 1〜10 を順番に返すイテラブルなオブジェクト © LayerX Inc. 10
11. 結構書くのめんどくさいな... © LayerX Inc. 11
12. そんなあなたにジェネレーター関数 © LayerX Inc. 12
13. 2. ジェネレーター関数とは © LayerX Inc. 13
14. 2-1. ジェネレーター関数とは イテレーターを普通の関数の様に実装できる構文 さっきのごちゃごちゃを考えなくて済む © LayerX Inc. 14
15. 2-2. サンプルを書き直してみる 12行のサンプルが... © LayerX Inc. 15
16. 2-2. サンプルを書き直してみる 4行になる の実装も、イテレーターの生成も、 next() の実装も、 イテレーターリザルトの組み立ても、done の管理も、全部 ジェネレーター がやってく れる 書かなきゃいけないのはコアロジックだけ [Symbol.iterator] © LayerX Inc. 16
17. 2-2. サンプルを書き直してみる 4行になる と書いたらジェネレーター関数になる yield という特殊なキーワードを使う function*() © LayerX Inc. 通常の関数でいう所の return yield まで到達すると値を返すのに加えて、実行がそこで止まる。変数の値を保持したまま止まる 次の next() が呼び出されたら続きから再開する 17
18. 3. ジェネレーター で CSV ビューワーを作ってみた © LayerX Inc. 18
19. 3-1. 作りたいもの 想定：CSV の中身をサッと確認するプレビュー用途 機能は簡素でいい、とにかく軽く速く簡単に実装したい でもどんなに重い CSV でも開けるようにしたい 手元の 320万行・200MB の CSV (北海道の住所一覧) で検証しました © LayerX Inc. 19
20. 3-2. 素直に実装すると 初期表示 793ms、メモリ 294MB 読み込み中は UI も固まる © LayerX Inc. 20
21. 3-3. 方針：64KB ずつ読む 全部読むのをやめて、 file.stream() で 64KB ずつ読む stream は非同期イテラブル → for await...of で回せる 下までスクロールしたら next() で次の64KBを読んでいく ただし1つ問題が...チャンクはサイズで切られるので、行の真ん中で切れる →チャンクの末尾と次のチャンクの先頭をくっつけてあげる必要がある © LayerX Inc. 21
22. 3-4. まずイテレーターもジェネレーターも使わずに書くと... © LayerX Inc. 22
23. 3-4. まずイテレーターもジェネレーターも使わずに書くと... 何が大変か 「今どこまで読んだか」を 状態変数で管理する必要がある 「読み込み済みから返すか、新しく読むか」の状態遷移の分岐を書く必要がある © LayerX Inc. 23
24. 3-5. ジェネレーター なら 9 行で解決 「どこまで読んだか」は yield の停止位置で分かるので状態遷移も条件分岐も消せる 変数の値を保持し続けられるので、末尾の持ち越しも rest 1 つで済む © LayerX Inc. 24
25. © LayerX Inc. 25
26. 4. まとめ © LayerX Inc. 26
27. まとめ イテレーターを使えば何でも for of で回せる ジェネレーター関数を使えばそれを更に簡単に実装できる 大きなデータを扱う時や、状態変数を持っておかないといけない時に便利 © LayerX Inc. 27
28. ご清聴ありがとうございました！ © LayerX Inc. 28