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

推しのウェブ技術〜2026年夏〜 @rch850 20206-08-08 Fukui Tech LT #2

テーマ推し

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

推しのウェブ技術〜2026年夏〜 Declarative Partial Updates 宣言的部分更新

宣言的部分更新って何だ？

きっと完全理解できます

解決したい課題

表示に時間がかかるウェブサイト

……

…………

………………

………………！

売上の集計に時間がかかり全体の表示がひきずられる

なぜ表示が詰まるのか

逐次描画だから

【HTTP レスポンス】 <!DOCTYPE html> <html> <body> <header>...</header> ここで時間がかかる集計処理表示は途中で止まったまま

【HTTP レスポンス】 <!DOCTYPE html> <html> <body> <header>...</header> <main>...</main> </body> </html>
集計が終わり、残りの HTML を返し、描画が完了

ガワだけ表示してあとから数字を入れられないか

これまでの対策

非同期処理 (Ajax)

<main> <div class=”sales”> loading.... </div> </main> HTTP 通信は一旦完了売上を別の通信で取得 <main>
<div class=”sales”> ¥428,600 </div> </main>

非同期処理と部分描画を扱うフロントエンド技術の台頭

Ajax 誕生から20年ほどの時を経て

Chrome チームからの提案

Declarative Partial Updates

HTML で実現しちゃおうぜ

Declarative Partial Updates 【HTTP レスポンス】【HTML 構造 (DOM)】 <div class=”sales-area”>
<?start name=”sales”> loading… <?end> </div> <div class=”sales-area”> loading… </div> 「ここは後から書き換えますよ」というマークをする。

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> の内容が入る

こんなの今まであった？

デモ https://x.com/rch850/status/2085954340452450526

<?start name=”sales”><?end>

order-count shipping orders events

Declarative Partial Updates 宣言的部分更新 JavaScript なしで HTML だけで要素の差し替えを実現！

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> の内容が入る

今すぐ試したい！

動かし方 1. Chrome のオプションを有効にする ◦ ◦ chrome://ﬂags/#enable-experimental-web-platform-features “Experimental Web Platform
features” 2. サンプル JavaScript をダウンロードして実行する。 ◦ 拡張子を cjs にして node で実行するなど。

まとめ • • • Declarative Partial Updates を紹介しました。 JavaScript なしで
HTML だけで要素の差し替えを実現！今後フレームワークにも搭載されていくかも？

おまけ

Q&A • 用途は？ ◦ ◦ • 向いてないケースは？ ◦ • 何でも使っていい、と言いたい。
強いて言えば、データの即時反映を要求するダッシュボードや、個人ごとにコンテンツが異なるサイトなど、キャッシュが不向きなウェブサイトか。挿入位置が前後するもの。コネクションが張りっぱなしにならない？ ◦ 現代インターネット（HTTP/2 以降）ではそもそも張りっぱなしなので、問題にならないと思われます。

気になること • クローラーの動作への影響 ◦ ◦ • クローラーの動作とは、Google 検索であったり、X や Slack
での展開であったり短時間でレスポンスを返しきれば問題なさそうキャッシュへの影響 ◦ ◦ SSR と同じように考えておけば良さそうつまり気をつけて扱いましょう

関連資料 • • • • WICG/declarative-partial-updates · GitHub 宣言型部分更新 |
Blog | Chrome for Developers Chrome 150に追加された宣言的部分更新でJavaScriptを一切書かずにスライドショーアプリを作る Declarative Partial UpdatesをストリーミングSSRに使う

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

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

More Decks by rch850

Other Decks in Programming

Featured

Transcript

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

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