宣言型部分更新は何を解決しどこへ向かうのか

フロントエンドカンファレンス関西2026の登壇資料です。

Transcript

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