Share
Embed
Slide 1
Slide 1 text
宣⾔型部分更新は何を解決し
どこへ向かうのか
2026/10/12 did0es
Slide 2
Slide 2 text
Hirai Shuta | did0es（🗣 ディドス）
SWE @ CIU / Next Experts (Client) @ CyberAgent, Inc.
Representative Director, FEC Association / Lead Organizer, FEC Tokyo
More: https://did0.es
Slide 3
Slide 3 text
宣⾔的部分更新（DPU）
Slide 4
Slide 4 text
今⽇お話すること
1. Web標準におけるDPU
2. DPUに関連した他の技術
3. DPUとWeb標準でSPA開発できるか
4. まとめ
Slide 5
Slide 5 text
今⽇お話しないこと
● DPU以外のWeb標準の詳しい説明
● DPUとAIのかけ合わせ
Slide 6
Slide 6 text
Web標準におけるDPU
Slide 7
Slide 7 text
① Web標準におけるDPU
DPUについて簡潔に
● Chrome 148から実験的に利⽤可能
● ⽂書のコンテンツの組み換え向け機能
● HTML要素とJS APIによって提供
Slide 8
Slide 8 text
DPUが⽣まれるまで
Slide 9
Slide 9 text
① Web標準におけるDPU
マークアップの問題点
● HTML：コンテンツ順にかかわらず、上から下に配信
● CSS：コンテンツ順序を変更できるが、a11yに配慮必要
Slide 10
Slide 10 text
① Web標準におけるDPU
JSの問題点
● DOM操作が複雑
● パフォーマンス悪化させやすい
Slide 11
Slide 11 text
① Web標準におけるDPU
ライブラリの問題点
● ⽂書のルールに則るよりも、コンポーネント志向が強い
● パフォーマンスが下がりうる
○
ページが準備できるまで待つ
○
⾮同期でUIを読み込む
○
フレームワーク⾃体が重い
Slide 12
Slide 12 text
これらを解決するDPUのAPI
Slide 13
Slide 13 text
① Web標準におけるDPU
メインの2つのAPI
● Patching（順不同ストリーミング）
● 動的マークアップの刷新
Slide 14
Slide 14 text
Patching（順不同ストリーミング）
Slide 15
Slide 15 text
① Web標準におけるDPU
HTMLにプレースホルダを置いて、後からコンテンツを⼊れ替える
Slide 16
Slide 16 text
① Web標準におけるDPU
記法 その1
● 要素
○
置き換えコンテンツ
● 要素
○
処理命令プレースホルダ
○
XML以前から存在。HTMLではコメント扱いで無視
Slide 17
Slide 17 text
① Web標準におけるDPU
⼊れ替え中にフォールバックのコンテンツを表⽰する
Slide 18
Slide 18 text
① Web標準におけるDPU
記法 その2
● / 要素
● テンプレート置き換え中に表⽰するコンテンツ⽤の処理命令
Slide 19
Slide 19 text
① Web標準におけるDPU
他のライブラリでいうところのなに
● Next.jsのLayout
● RemixのRootのLayout
● Astroの
● その他Island Architectureに基づくもの
○
HotWire
○
Turbolinks
Slide 20
Slide 20 text
① Web標準におけるDPU
備考
● WICGのProposal
● GoogleChromeLabsによるPolyfill
● 制限
○
⼊れ替えや挿⼊はMutationObserverによるものなので
HTMLパーサーに関与できない
Slide 21
Slide 21 text
JS向けの⼿段も
Slide 22
Slide 22 text
動的マークアップの刷新
Slide 23
Slide 23 text
① Web標準におけるDPU
HTMLの動的な挿⼊⽅法
● innerHTML, outerHTML
● setHTMLUnsafe
● setHTML
● createContextualFragment
● insertAdjacentHTML
Slide 24
Slide 24 text
① Web標準におけるDPU
innerHTML, outerHTML
● サニタイズなし
● Declarative Shadow DOM(DSD)⾮対応
● inner：⼦要素
● outer：⾃⾝含めた全体の要素を置き換え
Slide 25
Slide 25 text
① Web標準におけるDPU
setHTMLUnsafe
● innerHTMLの後継
● サニタイズなし
● DSDに対応
○
⽂字列からShadow Rootを構築できる
Slide 26
Slide 26 text
① Web標準におけるDPU
setHTML
● 対象要素の⼦要素を置き換え
● サニタイズあり
○
HTML Sanitizer APIによるもの
○
外部から⼊⼒を受け付けられる
Slide 27
Slide 27 text
① Web標準におけるDPU
createContextualFragment
● サニタイズなし
● 埋め込んで実⾏できる
● DocumentFragmentを返す
○
⽣DOMを書き換えない
Slide 28
Slide 28 text
① Web標準におけるDPU
insertAdjacentHTML
● サニタイズなし
● 指定した位置にDOMノードを挿⼊
○
beforebegin(⾃⾝の前)
○
afterbegin(最初の⼦要素の前)
○
beforeend(最後の⼦要素の後)
○
afterend(⾃⾝の後)
Slide 29
Slide 29 text
これらを拡張‧刷新
Slide 30
Slide 30 text
① Web標準におけるDPU
拡張‧刷新の⽅向性
● ストリーミング向けAPIを追加
● サニタイズなしのUnsafeなAPIを拡張
○
オプションで有効化は可能
○
runScripts を有効化でスクリプトの実⾏も可能
Slide 31
Slide 31 text
① Web標準におけるDPU
setHTML(html, options);
● 従来のsetHTMLをオプションで拡張
Slide 32
Slide 32 text
① Web標準におけるDPU
replaceWithHTML(html, options);
● outerHTML相当
● オプションで拡張
Slide 33
Slide 33 text
① Web標準におけるDPU
beforeHTML(html, options);
● insertAdjacentHTML(ʻbeforebegin’, …) 相当
● オプションで拡張
Slide 34
Slide 34 text
① Web標準におけるDPU
prependHTML(html, options);
● insertAdjacentHTML(ʻafterbegin’, …) 相当
● オプションで拡張
Slide 35
Slide 35 text
① Web標準におけるDPU
appendHTML(html, options);
● insertAdjacentHTML(ʻbeforeend’, …) 相当
● オプションで拡張
Slide 36
Slide 36 text
① Web標準におけるDPU
afterHTML(html, options);
● insertAdjacentHTML(ʻafterend’, …) 相当
● オプションで拡張
Slide 37
Slide 37 text
① Web標準におけるDPU
備考
● WICGのProposal
● GoogleChromeLabsによるPolyfill
Slide 38
Slide 38 text
DPUのその他のAPI
Slide 39
Slide 39 text
① Web標準におけるDPU
Route matching
● CSS向けの拡張
● View Transition APIで実装が難しい領域をカバー
○
⼀覧ページ ↔ 詳細ページ
Slide 40
Slide 40 text
① Web標準におけるDPU
CSSでURLをMatchingする
● @navigation (from: --home) { ... }
● @navigation (to: --about) { ... }
● @navigation (between: --home and --about) { ... }
● @navigation (at: url("/exact/?a=b")) { ... }
Slide 41
Slide 41 text
① Web標準におけるDPU
遷移のイベント的なもので制御
● @navigation (phase: loading) { ... }
● @navigation (phase: ready) { ... }
● @navigation (phase: committed) { ... }
Slide 42
Slide 42 text
① Web標準におけるDPU
ユーザーのNav関連のアクションのMatching
● @navigation (history: navigate) { ... }
● @navigation (history: reload) { ... }
● @navigation (history: traverse) { ... }
● @navigation (history: back) { ... }
● @navigation (history: forward) { ... }
Slide 43
Slide 43 text
① Web標準におけるDPU
疑似要素によるURLのMatching
● a:link-to(--home) { ... }
● a:link-to(url-pattern("/about")) { ... }
● a:link-to(url("/exact?a=1")) { ... }
Slide 44
Slide 44 text
DPUに関連した他の技術
Slide 45
Slide 45 text
② DPUに関連した他の技術
SPAに⽤いられうるWeb標準の例
● DOM Parts API
● Web Components
● Declarative Shadow DOM
● moveBefore(DOM API)
● signals‧AbortSignal
● View Transition API
● Popover API, Top Layer API etc...
Slide 46
Slide 46 text
② DPUに関連した他の技術
DPUとの組み合わせ⽅を紹介（⭐マークがついたもの）
● ⭐ DOM Parts API
● Web Components
● Declarative Shadow DOM
● moveBefore(DOM API)
● signals‧AbortSignal
● ⭐ View Transition API
● Popover API, Top Layer API etc...
Slide 47
Slide 47 text
DOM Parts APIとPatchingの併⽤
Slide 48
Slide 48 text
② DPUに関連した他の技術
DOM Parts APIの “{{}}” による表現
● 処理命令で “{{}}” に対する注釈付け
● や動的マークアップ向けAPI以外をカバー
Slide 49
Slide 49 text
② DPUに関連した他の技術
contentrevision属性
● どのページにもあるコンテンツを再読み込みしないようにする
● 例：問い合わせのウィジェット
Slide 50
Slide 50 text
② DPUに関連した他の技術
patchsrc属性
● 外部URLを取得してコンテンツを更新するとき、
JSを外部から読み込むときと同じレベルのセキュアさで⾏える
● 例：![]()
Slide 51
Slide 51 text
View Transition APIと
Route Matchingの併⽤
Slide 52
Slide 52 text
② DPUに関連した他の技術
Slide 53
Slide 53 text
DPUとWeb標準でSPA開発できるか
Slide 54
Slide 54 text
③ DPUとWeb標準でSPA開発できるか
https://web-standards-spa.did0es.workers.dev
Slide 55
Slide 55 text
③ DPUとWeb標準でSPA開発できるか
条件
● Chrome最新版（Chrome 154）で動作する
○
enable-experimental-web-platform-featuresフラグをON
● ライブラリを使わない
○
Polyfillやその他ライブラリなし
Slide 56
Slide 56 text
③ DPUとWeb標準でSPA開発できるか
PoCでDPUと併せて使⽤したWeb標準
● Web Components
● Declarative Shadow DOM
● moveBefore(DOM API)
● View Transition API
● Popover API, Top Layer API
Slide 57
Slide 57 text
③ DPUとWeb標準でSPA開発できるか
使⽤しなかったWeb標準
● DOM Parts API
● signals（TC39 Signals）
Slide 58
Slide 58 text
デモ
Slide 59
Slide 59 text
③ DPUとWeb標準でSPA開発できるか
https://github.com/shuta13/web-standards-spa
Slide 60
Slide 60 text
ソースコード解説
Slide 61
Slide 61 text
ReactやVueは代替されるのか
Slide 62
Slide 62 text
③ DPUとWeb標準でSPA開発できるか
部分的にそう
● Depsを削ることが可能
● ただ、これを抽象化して提供するのが現実的
○
単体で流⾏るようなものとは思えないほどの複雑さ
● 結局ReactやVueは需要がある
Slide 63
Slide 63 text
③ DPUとWeb標準でSPA開発できるか
内部実装でこういったWeb標準を使い始める？
● Web標準に重きをおいている、Svelteのようなものが
真っ先に取り⼊れる？
● Vue.jsのVapor Mode？
● React CompilerのようなAOTコンパイラ？
Slide 64
Slide 64 text
まとめ
Slide 65
Slide 65 text
④ まとめ
● Web標準のDPUについて、
従来のDOM APIや既存のライブラリと⽐較しつつ紹介した
● DPUがすべて置き換えるわけではないが、⾮常に有⽤
● 逆にUI関連技術がDPUを取り⼊れていく⽅向が⾃然かも
Slide 66
Slide 66 text
④ まとめ
参考⽂献
● 宣⾔型部分更新（chrome for developers）
● WICG Proposal
Slide 67
Slide 67 text
ありがとうございました