137. JSON vs HTML（JSONよりHTMLを愛する理由：Webの「本来の力」を信じる）

原理：データの形、情報の形

なぜ他のフレームワークはJSONを使うのか

ReactやVueなどの多くのSPAフレームワークは、サーバーから「JSON（データだけの文字列）」を受け取り、ブラウザ側のJavaScriptで「HTML（見た目）」に変換します。 - サーバー：「{ "price": 100 }」 - ブラウザ：これを見て「<p>価格は100円です</p>」というタグを組み立てる。

一見効率的に見えますが、これには「HTMLの作り方（ロジック）」をサーバーとブラウザの両方に書かなければならない、という大きな弱点があります。

HTMXがHTMLを返す理由

HTMXは、サーバーから直接「完成したHTML」を受け取ります。 - サーバー：「<p>価格は100円です</p>」 - ブラウザ：そのまま画面に貼るだけ。

これが「JSON vs HTML」の議論の本質です。

実践：HTMLを返すことの圧倒的メリット

1. サーバーの知識を一箇所に集める（SSoT）

「価格が100円未満なら赤字で書く」というデザインルールがあったとします。 - JSON方式: サーバー（判定）とブラウザ（色付け）の両方にプログラムを書く。 - HTMX方式: サーバー側のテンプレート一枚を直すだけ。ブラウザは何も知らなくていい。

2. JavaScriptの量を極限まで減らす

ブラウザでHTMLを組み立てる必要がないため、あなたが書かなければならない複雑なJavaScriptコードがほぼゼロになります。これはバグを減らし、メンテナンス性能を劇的に上げます。

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

JSON送受信を忘れる: APIからデータを取ってくる、という発想から一度離れます。
HTMLテンプレートを楽しむ: サーバー側の言語（PHP, Ruby, Python等）でHTMLを直接デザインします。
そのまま届ける: hx-get でそのHTMLを呼び出せば、一瞬で画面が完成します。

比較：JSON方式 vs HTML方式（HTMX）

JSON方式 (データ中心)

特徴: データの通信量は最小だが、ブラウザ側の負担（重いJS）と開発の手間が大きい。

HTML方式 (HTMX / 文書中心)

特徴: データの通信量は少し増えるが（タグの分）、ブラウザ側は軽く、「圧倒的に開発が速く、ミスが少ない」。

まとめ：初心者のための「原点回帰」

「Webの基本はHTMLである」という事実に立ち返る。それがHTMXの思想です。

HTMLはパワフル: HTMLには「リンク」「フォーム」「ボタン」といった、ユーザーと対話するための機能が最初から備わっています。JSONはただの文字ですが、HTMLは「動く文書」です。
「ギガ」の誤解: タグを含めても、今の高速なネット環境では数キロバイトの差に過ぎません。それよりも、数メガバイトある「重いJavaScriptファイル」を読み込ませる方が、ユーザーにとっては大きな負担です。
エンジニアの幸せ: サーバーとフロントで別々の言語を使い分ける苦労から解放されます。

データではなく、体験を送る。JSONという名の「部品」ではなく、HTMLという名の「完成品」をやり取りすることで、Web開発の真の喜びとスピード感を取り戻してください。次の記事では、この通信を安全に守る「セキュリティ（CSRF）（138. Security (CSRF)）」をご紹介します。