<template for>：どの領域を置き換えるかを HTML 自身に宣言させる

Chrome 150（2026 年 6 月 30 日）が <template for="…"> に対応しました。Edge 150 が 7 月 2 日に続き、Firefox と Safari は未対応です。

一行で言えば、HTML の中で「後で置き換えられる領域」を示し、ストリームで届く <template> がそこを埋めることができるようになりました。

使い方

位置は処理命令で示します。

<p>コメントを読み込み中…</p>
<?marker name="comments">

範囲ならこうです。

<?start name="feed">
  <p>プレースホルダ</p>
<?end>

そしてサーバは、レスポンスを終わらせないまま同じストリームへ押し込み続けられます。

<template for="comments">
  <p>最初のコメント</p>
</template>

ブラウザがこの template を受け取ると、comments という名前のマーカー（または start/end の範囲）に置き換えます。

何を解決するのか

これはページを対話的にする新しい方法ではありません。そんなものは既にたくさんあります。扱うのはもっと狭く、厄介な問題です。サーバ側ストリーミングでは、コンテンツの到着順はデータ源が決め、ページ上の位置は決めない。

典型的な板挟み：

コメント API は本文より速いが、コメントは本文の下にある
サイドバーの「関連記事」は検索を待つが、本文はずっと前に準備できている
遅いエンドポイントが一つあると、その後に続くすべてが詰まる。HTML は順番にしか出せないから

従来のストリーミングは順序に縛られます。先に届いたものは先にしか書けません。だから速いものを遅いものに待たせるか、速い内容を後で移動させる場所に仮置きするかでした。

<template for> は位置と順序を分離します。内容はストリームのどの時点でも到着できます。どのマーカーに属するかを宣言しさえすれば。

私の見解：今は使わない

理由は三つ。

Chromium のみ。 Firefox と Safari にはありません（Firefox は bug 2053472 として認識していますが、日程はありません）。フォールバックを設計する必要があり、そのフォールバックは通常「すべてが到着順に下へ積み上がる」で、ストリーミングしないより見苦しくなります。
ページロードの約 0.06%。 この数字が、出たばかりであることを示しています。確立したパターンも、ツールも、知見の蓄積もありません。踏む穴はすべて自分で掘ることになります。
サーバが協力する必要がある。 フレームワーク（または手書きのコード）がレスポンスへ断片を押し込み続け、各断片のマーカー名を知っている必要があります。属性を一つ足せば得られる能力ではありません。

注目しておく価値がある場合

次のすべてに当てはまるなら、記憶に留めておく価値があります。

ページが多数のデータ源からなる大量の内容を持つ（ニュースのトップ、ダッシュボード、コメント付き記事）
最も遅いエンドポイントが最初のバイト以降の待ち時間を決めている
「Chromium の利用者はより良い版、それ以外は完全な静的版」を受け入れられる

三番目が要点です。これは漸進的強化に自然に向きます。未対応なら内容はソース順に現れます。欠けるものはなく、順序が最適でないだけです。

私がより気にしている点

この機能の形は注目に値します。JavaScript を強くするのではなく、「内容の一部を置き換える」ことを HTML 自身が表現できるようにするものです。

十数年にわたり、部分更新は JavaScript の領分でした。データを取り、ノードを探し、innerHTML を差し替える。代価は、スクリプトが動くまでその領域が存在しないか、誤っていることです。

<template for> はこれを HTML 層に戻します。サーバが置換命令を直接出し、ブラウザがネイティブに実行し、スクリプトは関与しません。これは <details>、popover、<dialog> と同じ道です。よくある対話を宣言的マークアップへ降ろしていく道です。

その道の価値は節約できる JavaScript の行数ではありません。「JavaScript なしでも動く」が再び有効な既定になりうることです。