012. HTML over the wire（回線の上を流れるHTML）

原理：データを送るか、「見た目」を送るか

データの「二度手間」を解消する

Webアプリケーションが裏側で通信するとき、何が回線（ワイヤー）を流れるべきでしょうか？これまでのトレンド（SPAなど）では、「JSONというデータ」を送るのが主流でした。しかし、これには隠れた「二度手間」が存在します。 1. 一苦労（サーバー）: データベースから取ってきたデータを、JSONという文字データに変換して送る。 2. 一苦労（ブラウザ）: 届いたJSONをJSが分解（パース）し、それをHTMLのタグとして組み立て直し、ようやく画面に描画する。

この「2段階の組み立て」は、開発者にとって二箇所（サーバーとフロント）でコードを書く原因となります。さらに、ブラウザの非力なJSエンジンに「組み立て」という重労働を強いることにもなります。

「完成品」をデリバリーする思想

「HTML over the wire」という原理は、この無駄をバッサリと切り捨てます。回線の上を流れるのは、データではなく、すでにサーバー側で組み立てられた「完成済みのHTMLパーツ」です。

これは、家具に例えると分かりやすいでしょう。 - JSON方式: 届くのは「ネジと板（データ）」と、複雑な「説明書（JSのコード）」。あなたが自分の家で時間をかけて組み立てなければなりません（IKEA方式）。 - HTMX（HTML over the wire）: 届くのは「組み立て済みの完成した椅子（HTML）」。あなたはそれを部屋の好きな場所に置くだけですぐに使えます（完成品デリバリー）。

完成品を送るから、ブラウザは届いた瞬間にそれを描画できます。組み立てのロジックをJSで書く必要もありません。この「組み立て（レンダリング）をサーバー側に一本化する」という決断が、驚異的な開発スピードと実行速度をもたらします。

実践：生のHTMLパーツを通信でやり取りする

1. サーバーから「そのまま使える部品」を返す

HTMXのリクエストに対して、サーバー（例えばNode.jsのExpressなど）がどんなレスポンスを返すべきかを見てみましょう。

【サーバー側のコード（Expressの例）】

app.get('/api/user/1', (req, res) => {
    // データを取り出し、テンプレートでHTMLに流し込む
    const userHtml = `
        <div class="user-profile">
            <h3>田中太郎</h3>
            <p>担当ランク：プラチナ</p>
        </div>
    `;
    res.send(userHtml); // データを返さず、HTMLの「見た目」をそのまま返す
});

2. ブラウザ側で「貼るだけ」の指示

HTMXを使えば、ブラウザ側はこのパーツをどこに貼るか指示するだけです。

<button hx-get="/api/user/1" hx-target="#display">
    ユーザー情報を表示
</button>

<div id="display">
    <!-- ここに、サーバーで組み立てられた完成品が届けられる -->
</div>

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

サーバーの組み立て: サーバー側の得意なテンプレートエンジン（Jinja, EJS, Bladeなど）を使って、最終的なHTMLを作ります。
転送: 回線には純粋なテキストとしてのHTMLタグが流れます。
置換: ブラウザ（HTMX）は受け取ったHTMLを、ターゲットの場所にパコッとはめ込みます。

このプロセスには、JSONを扱うための JSON.parse() も、DOMを作るための document.createElement() も存在しません。ただ「HTMLが届いて、HTMLが置き換わる」。これ以上ないほどシンプルで高速なやり取りです。

比較：JSONデリバリー vs HTMLデリバリー

従来のJSONデリバリー

サーバーの仕事: データを整形してJSONにする。
ブラウザの仕事: 巨大なJSフレームワークを動かし、JSONをHTMLに変える「翻訳作業」を行う。
リスク: サーバー側のデータの形を変えると、ブラウザ側の「翻訳機（JS）」も壊れる。

HTMXのHTMLデリバリー (HTML over the wire)

サーバーの仕事: 最終的な見た目（HTML）を作る。
ブラウザの仕事: 届いたものをそのまま表示領域に流し込むだけ。
利点: 「翻訳作業」がないため、ブラウザの負荷が激減し、開発コードも半分以下に。

まとめ：初心者のための「完成品」重視の設計

「HTML over the wire」を信じることは、無駄な手間を省き、Webのスピードを取り戻すことです。

サーバーに描画を任せる: ブラウザは「見るための窓」であり、サーバーは「作るための工房」です。
テンプレートエンジンの再発見: JSでタグを組み立てるのではなく、サーバー側の使い慣れたテンプレートエンジンを愛しましょう。
最速のレンダリング: 届いた瞬間に表示される喜びを、ユーザーに届けてください。

回線の上を、鮮やかなHTMLが駆け巡る。このシンプルかつ強力なアーキテクチャこそが、複雑化した現代のWeb開発を救い出す「魔法の糸」になります。次の記事では、この思想を武器に、いかに既成概念（JSフレームワーク前提の考え）を打ち破っていくか（013. JSフレームワーク代替思想）を探求しましょう。