推しのウェブ技術 〜2026年夏〜 Declarative Partial Updates

Fukui Tech LT #2 での発表

Transcript

1. 推しのウェブ技術 〜2026年夏〜 @rch850 20206-08-08 Fukui Tech LT #2
2. テーマ 推し
3. 推しのウェブ技術 〜2026年 夏〜
4. 推しのウェブ技術 〜2026年 夏〜 Declarative Partial Updates
5. 推しのウェブ技術 〜2026年 夏〜 Declarative Partial Updates 宣言的部分更新
6. 宣言的部分更新って何だ？
7. きっと完全理解できます
8. 解決したい課題
9. 表示に時間がかかるウェブサイト
10. ……
11. …………
12. ………………
13. ………………！
14. 売上の集計に 時間がかかり 全体の表示が ひきずられる
15. なぜ表示が詰まるのか
16. 逐次描画だから
17. 【HTTP レスポンス】 <!DOCTYPE html> <html> <body> <header>...</header> ここで時間がかかる集計処理 表示は途中で止まったまま
18. 【HTTP レスポンス】 <!DOCTYPE html> <html> <body> <header>...</header> <main>...</main> </body> </html> 集計が終わり、 残りの HTML を返し、 描画が完了
19. ガワだけ表示して あとから数字を入れられないか
20. これまでの対策
21. 非同期処理 (Ajax)
22. 👀
23. 😊
24. <main> <div class=”sales”> loading.... </div> </main> HTTP 通信は一旦完了 売上を別の通信で取得 <main> <div class=”sales”> ¥428,600 </div> </main>
25. 非同期処理と部分描画を扱う フロントエンド技術の台頭
26. Ajax 誕生から20年ほどの時を経て
27. Chrome チームからの提案
28. Declarative Partial Updates
29. HTML で実現しちゃおうぜ
30. Declarative Partial Updates 【HTTP レスポンス】 【HTML 構造 (DOM)】 <div class=”sales-area”> <?start name=”sales”> loading… <?end> </div> <div class=”sales-area”> loading… </div> 「ここは後から書き換えますよ」というマークをする。
31. Declarative Partial Updates 【HTTP レスポンス】 【HTML 構造 (DOM)】 <div class=”sales-area”> <?start name=”sales”> loading… <?end> </div> <div class=”sales-area”> ¥428,600 </div> <template for=”sales”> ¥428,600 </template> <?start><?end> の場所に、後から書いた <template> の内容が入る
32. こんなの今まであった？
33. デモ https://x.com/rch850/status/2085954340452450526
34. <?start name=”sales”><?end>
35. <template for=”sales”> … </template>
36. order-count shipping orders events
37. Declarative Partial Updates 宣言的 部分更新 JavaScript なしで HTML だけで要素の差し替えを実現！
38. Declarative Partial Updates 【HTTP レスポンス】 【HTML 構造】 <div class=”sales-area”> <?start name=”sales”> loading… <?end> </div> <div class=”sales-area”> ¥428,600 </div> <template for=”sales”> ¥428,600 </template> <?start><?end> の場所に、後から書いた <template> の内容が入る
39. 今すぐ試したい！
40. 動かし方 1. Chrome のオプションを有効にする ◦ ◦ chrome://flags/#enable-experimental-web-platform-features “Experimental Web Platform features” 2. サンプル JavaScript をダウンロードして実行する。 ◦ 拡張子を cjs にして node で実行するなど。
41. まとめ • • • Declarative Partial Updates を紹介しました。 JavaScript なしで HTML だけで要素の差し替えを実現！ 今後フレームワークにも搭載されていくかも？
42. おまけ
43. Q&A • 用途は？ ◦ ◦ • 向いてないケースは？ ◦ • 何でも使っていい、と言いたい。 強いて言えば、データの即時反映を要求するダッシュボードや、個人ごとにコンテンツが異 なるサイトなど、キャッシュが不向きなウェブサイトか。 挿入位置が前後するもの。 コネクションが張りっぱなしにならない？ ◦ 現代インターネット（HTTP/2 以降）ではそもそも張りっぱなしなので、問題にならないと 思われます。
44. 気になること • クローラーの動作への影響 ◦ ◦ • クローラーの動作とは、Google 検索であったり、X や Slack での展開であったり 短時間でレスポンスを返しきれば問題なさそう キャッシュへの影響 ◦ ◦ SSR と同じように考えておけば良さそう つまり気をつけて扱いましょう
45. 関連資料 • • • • WICG/declarative-partial-updates · GitHub 宣言型部分更新 | Blog | Chrome for Developers Chrome 150に追加された宣言的部分更新でJavaScriptを一切書かずにスラ イドショーアプリを作る Declarative Partial UpdatesをストリーミングSSRに使う