Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
DOM Observable
Search
petamoriken / 森建
March 15, 2024
Programming
1
260
DOM Observable
福岡フロントエンド勉強会 #1
https://connpass.com/event/311524/
petamoriken / 森建
March 15, 2024
Tweet
Share
More Decks by petamoriken / 森建
See All by petamoriken / 森建
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.4k
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
520
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
230
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
2k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
550
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
680
Contributing to Deno is fun!
petamoriken
0
370
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.9k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.3k
Other Decks in Programming
See All in Programming
関数型まつりレポート for JuliaTokai #22
antimon2
0
100
エラーって何種類あるの?
kajitack
5
140
ReadMoreTextView
fornewid
1
410
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
210
Prism.parseで 300本以上あるエンドポイントに 接続できる権限の一覧表を作ってみた
hatsu38
1
110
GoのWebAssembly活用パターン紹介
syumai
3
10k
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
190
Use Perl as Better Shell Script
karupanerura
0
690
人には人それぞれのサービス層がある
shimabox
3
670
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
270
生成AIで日々のエラー調査を進めたい
yuyaabo
0
570
Perlで痩せる
yuukis
1
680
Featured
See All Featured
Visualization
eitanlees
146
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Into the Great Unknown - MozCon
thekraken
39
1.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
4
160
Agile that works and the tools we love
rasmusluckow
329
21k
How STYLIGHT went responsive
nonsquared
100
5.6k
Thoughts on Productivity
jonyablonski
69
4.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Raft: Consensus for Rubyists
vanstee
140
7k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
For a Future-Friendly Web
brad_frost
179
9.8k
Transcript
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 へ!