DOM Observable 福岡フロントエンド勉強会 #1 pixiv Inc. 森内建太 petamoriken 2024.3.15

2 自己紹介 ● Web エンジニア ● ECMAScript や WHATWG を追うのが好き ● 最近 Float16Array が SpiderMonkey, V8 に入った！ petamoriken カスタマーオペレーション ＆セーフティ本部 オペレーション開発部

3 目次 ● JavaScript におけるストリーム ● Observable とは ● DOM Observable の提案 ● RxJS との違い ● 細かい話

4 JavaScript におけるストリーム ● Pull ストリーム ○ Iterator, AsyncIterator (ECMAScript) ○ ReadableStream (Streams Standard) ● Push ストリーム ○ EventTarget (DOM Standard) ■ 一応ストリームとして扱えるがどちらかといえばイベント

5 Observable とは ● Push ストリームのライブラリ実装 ○ JS だと RxJS が一番有名

6 DOM Observable の提案 ● TC39 の方で標準化を進めていたが5年くらい音沙汰がなかった ● RxJS コアチームリードの Ben Lesh さんが Web 側で標準化する提案を出した

7 DOM Observable の提案

8 RxJS との違い ● RxJS の Hot Observable を作る機能はない ● クリーンアップの処理のコールバックの渡し方が違う ● RxJS は fromEvent 函数で変換するが、直接 EventTarget にメソッドが生える ○ EventTarget#on が提案されていたが Break the Web で駄目 😭 ○ EventTarget#observe は IntersectionObserver 等と型が違うから微妙

9 細かい話 ● Observable#subscribe のコールバックは同期的に実行される ○ Promise#then や await ではマイクロタスクになるため非同期になる ○ Observable を非同期にしちゃうと Event#preventDefault が呼べなくなっちゃう 👉 Promise に変換するときに要注意！

10 詳しくは Zenn へ！