129. Partial Content（部分コンテンツの設計：HTMLを「部品」として捉え直す）

原理：画面は「パズル」でできている

「ページ（Page）」という単位を捨てる

これまでのWeb製作では、「index.html」「contact.html」というように、「ページ」ごとにファイルやプログラムを作るのが当たり前でした。しかし、HTMXの世界では、画面を「小さなHTMLの部品（パーツ/コンポーネント）の集まり」として考えます。

「部分コンテンツ（Partial Content）」とは、「名前のパーツ」「在庫数のパーツ」「コメント一覧のパーツ」というように、画面を構成する細かい部品単位で、HTMLを生成・提供することです。

実践：再利用可能な「パーツ」の作り方

1. 断片（Fragment / Partial）の切り出し

例えば、ユーザー情報のカードであれば、それだけを独立したHTMLファイルとして用意します。

<!-- _user_card.html (部品) -->
<div class="user-card" id="user-{{user.id}}">
    <img src="{{user.avatar_url}}">
    <h3>{{user.name}}</h3>
</div>

2. 親ページから「呼び出す」

全体のページを作る時は、これらのパーツを組み合わせて作ります。

<!-- user_list.html (全体) -->
<div id="user-list">
    {% for user in users %}
        {% include '_user_card.html' %}
    {% endfor %}
</div>

3. HTMXからのリクエストに応える

「更新」ボタンが押されたら、サーバーは _user_card.html だけを単体で 返します。HTMXはそれを受け取り、画面上の古いカードと入れ替えます。

4. ステップ・バイ・ステップ解説

画面を細分化する: 「ここだけ更新されるかも」という単位で、HTMLを塊（ブロック）に分けます。
IDを付ける: 入れ替える際の重要な目印になります。
テンプレートの整理: 小さな部品を集めて大きなページを作る、という「積み木」のスタイルでプログラミングを進めます。

比較：JSONによる更新 vs HTML部品による更新

JSONによる更新（一般的なSPA）

特徴: サーバーはデータ（文字）だけを送る。ブラウザはそのデータを見て「HTMLの形に組み立てる」作業（プログラミング）が必要。

HTML部品による更新（HTMX）

特徴: サーバーが最初から「完成したHTML部品」を送る。
利点: ブラウザはただ「貼るだけ」なので、JavaScriptのコードを書く必要がなく、開発が圧倒的に高速になる。

まとめ：初心者のための「部品化」の思考

部分的なコンテンツを設計することは、Webサイトをより柔軟で、メンテナンスしやすいものに変えます。

一度作れば、どこでも使える: 綺麗なユーザーカードのパーツを一つ作れば、それはプロフィール画面でも、ランキング画面でも、検索結果でも、HTMXでそのまま使い回せます。
デザインの統一: 部品を使い回すので、アプリ全体でデザインが自然と揃うようになります。
「全部」を考えない心の余裕: 開発の際、画面全体を一度に考える必要はありません。「今は『保存ボタン』の中身だけを作ろう」というように、集中して小さく開発できます。

画面を部品に分解し、Webを再びシンプルなパズルへと戻す。「部分コンテンツ」という設計思想を大切にして、変更に強く、動作の軽い、理想的なWebアプリの構造を築き上げてください。次の記事では、この手法につきものの「キャッシュの混乱」を防ぐ「Varyヘッダー（130. Vary Header）」をご紹介します。