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
240
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
2.1k
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
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
250
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
440
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
480
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
A2A プロトコルを試してみる
azukiazusa1
2
1.2k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
370
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Speed Design
sergeychernyshev
32
1k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Building an army of robots
kneath
306
45k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Practical Orchestrator
shlominoach
188
11k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Building Adaptive Systems
keathley
43
2.6k
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 へ!