128. Conditional Rendering（状況に応じたHTMLの出し分け：最小限の努力で、最大限の情報を返す）

原理：必要なものだけを、必要な時に作る

「全部」作るか、「一部」作るか

サーバー側のプログラムは、普通は「ページ全体のHTML」を作成して返します。しかし、HTMXを使っている場合、いつも同じものを作っていては非効率です。「ボタンが押されたときだけ、この1行だけを新しく作りたい」「でも、URLを直接開かれたときは、ページ全体をちゃんと作りたい」

「条件付きレンダリング（Conditional Rendering）」とは、「そのリクエストが HTMX からのものか（126. hx-request）をチェックして、作る HTML の範囲（パーツだけか全体か）を賢く切り替えること」です。

実践：一つのプログラムで「二つの顔」を持つ

1. テンプレートの分岐

多くのWeb開発フレームワーク（Django, Flask, Rails, Laravelなど）では、以下のような条件分岐を一つの「ビュー（処理）」の中で行います。

# (Python/Flask の例)
def user_profile(user_id):
    user = get_user_from_db(user_id)

    if request.headers.get('hx-request'):
        # HTMXからの場合：プロフィールの中身（パーツ）だけを返す
        return render_template('partials/_user_info.html', user=user)
    else:
        # 通常のページ表示の場合：ヘッダーなども含めた「全体」を返す
        return render_template('user_full_page.html', user=user)

2. レイアウトの自動切り替え

さらに賢い方法は、「HTMXならレイアウト（外枠）を無しにする」という共通処理を作ってしまうことです。これにより、プログラム本体は常に同じものを書き、出力だけが自動で切り替わるようになります。

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

「パーツ（Partial）」を分ける: 再利用したい共通部分を別の小さなファイルに切り出しておきます。
ヘッダーをチェック: 全ての通信の入り口で hx-request ヘッダーの有無を確認します。
出し分ける: 真ならパーツを、偽なら全体を返します。

比較：全部作る vs 出し分ける

全部作る（非効率）

通信: 毎回ページ全体（ヘッダー、ロゴ、重いJSなど）を送る。
結果: 通信が遅く、ブラウザ側での画面の書き換えも「ガタつく」原因になる。

出し分ける（HTMX流）

通信: 本当に変わる場所（数行のテキストなど）だけを送る。
結果: 通信が一瞬で終わる！ 画面もパッパッと驚くほどスムーズに切り替わり、まるで手元のアプリを触っているような感覚になる。

まとめ：初心者のための「スマートな出力」

条件付きレンダリングは、HTMX開発における「最重要のコツ」です。

SEOと高速化の両立: URLを直接開いた時（SEOに関わる）は全体が返り、サイト内を回遊する時（高速化に関わる）はパーツだけが返る。正に理想の形です。
DRY（同じことを繰り返さない）原則: 「全体用」と「パーツ用」で別々のプログラムを作る必要はありません。同じデータを使い、出口だけを変えるだけです。
開発効率の向上: 小さなパーツだけを見れば良いので、不具合を見つけるのも、デザインを調整するのも楽になります。

必要なものを、必要な分だけ。条件付きレンダリングという「賢い出し分け」をマスターして、サーバーの負荷を最小に、ユーザーの心地よさを最大にする、プロ級のWebパフォーマンスを手に入れてください。次の記事では、さらに具体的にデータを削ぎ落とす「部分コンテンツの設計（129. Partial Content）」をご紹介します。