135. Templating Strategies（テンプレート戦略：HTMXに最適な「HTMLの作り方」）

原理：HTMLのパズルを、どう組み立てるか

HTMXの効率は「テンプレート」で決まる

HTMXは「HTMLを返す」ことが仕事です。そのため、サーバー側でいかに効率よく、かつ綺麗にHTMLの断片（129.）を生成できるかが、開発の楽しさとスピードを左右します。

「テンプレート戦略（Templating Strategies）」とは、「ページ全体用」と「HTMX用の部分パーツ」を、同じコードを二度書くことなく（DRYに）、スマートに作り分けるための考え方と工夫のことです。

実践：同じコードで「全体」と「部分」を両立する

1. ベースレイアウトの継承（Template Inheritance）

Jinja2（Python）, Blade（Laravel）, ERB（Rails）などの多くのエンジンで使える「基本（ベース）」を使い回す方法です。

<!-- base.html (全体の枠組み) -->
<html>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>

<!-- partial_item.html (中身) -->
{% extends "base.html" if not is_htmx else "" %}
{% block content %}
    <div>現在の値: {{ value }}</div>
{% endblock %}

※ 「HTMXなら base.html を使わない（extendsしない）」という一行を入れるだけで、同じファイルから「全体」と「部分」の両方を出力できるようになります。

2. 「部品（コンポーネント）」の徹底した切り出し

例えば「ユーザーアイコン」や「メッセージボックス」などの小さな単位を全て、別の小さなテンプレートファイル（Partial）に追い出します。メインページでも、HTMXのレスポンスでも、同じそのファイルを include する。これが最もバグの少ない、堅牢な戦略です。

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

エンジンを選ぶ: 自分が使い慣れた言語のテンプレートエンジンを選びます。HTMXはどんなエンジン（PHP, Python, Ruby, JS...）とも相性が抜群です。
「断片（Partial）」を基本にする: 「ページ」を作るのではなく、「部品」を作ってそれを「ページ」に組み立てる、という逆の発想で作り始めます。
分岐の自動化: 「もしリクエストヘッダーに hx-request があったら、レイアウトを無効にする」という処理を共通化し、個別のコードには書かないように工夫します。

比較：複雑なJSコンポーネント vs HTMXのテンプレート

JavaScriptコンポーネント (React/Vueなど)

特徴: ブラウザ上でHTMLを組み立てる。
課題: サーバー側とフロント側で「二重に」知識を持つ必要があり、管理が大変。

HTMXのテンプレート戦略

特徴: 全ての「画面の答え（HTML）」をサーバー側の一箇所で管理する。
利点: 「一箇所直せば、検索結果も詳細画面も、HTMXの更新画面も全て一気に直る」。このシンプルさが最大の武器です。

まとめ：初心者のための「パズル」の掟

テンプレート戦略は、あなたの開発スピードを「10倍」にする可能性を秘めています。

DRY（Do not Repeat Yourself）を貫く: 同じHTMLコードを二箇所以上に書かないように、徹底的に共通化しましょう。
小さなファイルは正義: 1000行の大きなテンプレートより、10行のテンプレートが100個あるほうが、HTMX開発では圧倒的に扱いやすいです。
HTMLを愛する: HTMX開発は「HTMLをいかに綺麗に書くか」の勝負です。テンプレートエンジンの機能をフル活用して、美しいHTMLのパズルを完成させましょう。

部品を磨き、全体を紡ぐ。テンプレート戦略という「HTMLの設計図」を正しく描くことで、どんなに複雑な画面でも迷うことなく、サクサクと作り上げられる真のHTMXデベロッパーへと成長してください。次の記事では、さらに具体的に「全体」と「部分」を引き剥がす「Fragment vs Layout（136. Fragments vs Layouts）」をご紹介します。