004. ハイパーメディアの復権（Restoring Hypermedia）

原理：Webの「本当の力」を思い出そう

「ハイパーメディア」とは何だったのか？

Webの歴史を語る上で欠かせない言葉の一つに「ハイパーメディア（Hypermedia）」があります。難しく聞こえるかもしれませんが、その核心は非常にシンプルです。それは、「文書の中に、次にできる操作（リンクやボタン）がすべて含まれている」という仕組みのことです。

あなたがブラウザでニュースサイトを見ているとき、次にどのニュースを読むかを選ぶために、ブラウザに特別なプログラミングを教えたりはしません。ただページにある「リンク」をクリックするだけです。この「クリックして次の状態へ移る」という、誰もが知っている自然な体験こそが、ハイパーメディアの凄さです。

データの塊に成り下がった現代のWeb

しかし、近年のWeb開発では、このハイパーメディアの仕組みが無視されがちです。多くの開発者は、HTMLを単なる「データの容れ物」として扱い、本質的なやり取りはJSONという「ただの文字データ」で行おうとします。JSONには「次に何ができるか」は書かれていません。そのため、ブラウザ側のJavaScript（JS）が「このデータが届いたら、次にこのURLを叩くボタンを表示して…」という知識をあらかじめ持っていなければなりません。これは、ブラウザ側が高度に複雑化する原因となりました。

HTMXの「復権」という言葉には、「JSに頼らなくても、HTML（ハイパーメディア）だけでアプリを動かせるはずだ」という強いメッセージが込められています。

実践：HTMLに「次の行動」を込めて返す

1. サーバーが「導線」を引く

HTMXの世界では、サーバーはデータだけではなく、次にユーザーが押すべきボタンやリンクを含めたHTMLを返します。

例えば、ユーザーの編集画面で「編集」ボタンを押したときの挙動を見てみましょう。

<!-- 1. 最初は「表示モード」のHTMLがサーバーから届く -->
<div id="user-profile">
    <p>名前：田中太郎</p>
    <!-- このボタン自体に「次の指示」が含まれている -->
    <button hx-get="/user/edit/1" hx-target="#user-profile">編集する</button>
</div>

2. サーバーが「次の選択肢」を届ける

上記のボタンを押すと、サーバーは「編集用フォーム」のHTMLを返します。ブラウザはそれを表示するだけです。

<!-- 2. ボタンを押した後に届くHTMLパーツ -->
<div id="user-profile">
    <form hx-put="/user/update/1" hx-target="#user-profile">
        <input type="text" name="name" value="田中太郎">
        <button type="submit">保存</button>
        <!-- 「キャンセル」という別の選択肢もここで提示される -->
        <button hx-get="/user/show/1" hx-target="#user-profile">キャンセル</button>
    </form>
</div>

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

初期状態: ブラウザは「編集」という選択肢をHTMLとして受け取ります。
アクション: ユーザーがクリックします。
変容: 画面がフォームに変わります。このフォームには「保存」と「キャンセル」という「次にできること」が書かれています。

この一連の流れにおいて、ブラウザ側のJSは「次に何を表示するか」のルールを一切知りません。サーバーが送ってくるHTML（ハイパーメディア）が、まるで迷路の案内板のように、ユーザーをアプリのゴールへと導いていくのです。

比較：JSによる「ルール管理」 vs HTMLによる「案内」

従来の「API（JSON）方式」

サーバー: { "id": 1, "name": "田中" } というデータだけ送る。
ブラウザ（JS）: 「いま表示モードだから、このデータを元に、編集ボタンをクリックしたら renderEditForm() 関数を呼んで、その中のinputタグにデータを流し込んで…」という膨大なルールをプログラムとして持っておく。
問題点: サーバー側でURLの仕組みを変えると、ブラウザ側のJSもすべて書き直さなければなりません。

HTMXの「ハイパーメディア方式」

サーバー: HTMLの断片（ボタンやフォーム）を送る。そこに、次に通信すべきURL（hx-put="..."など）を書く。
ブラウザ: 届いたHTMLを表示する。ユーザーがクリックした場所にある指示に従って、次の通信を送る。
利点: ブラウザは「ただの表示器」です。サーバー側で機能が増えたりURLが変わったりしても、ブラウザ側の修正は一切不要です。

まとめ：初心者のための「Webの原点」思考

「ハイパーメディアの復権」を理解することは、あなたが作っているものを「プログラム」から「対話」に変えることです。

HTMLはナビゲーション: タグを、単なる枠組みではなく、ユーザーへの「お誘い」として扱いましょう。
知識をサーバーに置く: ブラウザにアプリの構造を教える必要はありません。その時々に必要なボタンを届けるだけでいいのです。
自然な繋がりを大切に: リンクを辿っていくような感覚でアプリを構築すれば、設計は自ずとシンプルになります。

Webの本来のポテンシャルを信じ、HTMLにすべての魔法を託す。これができれば、あなたはもう真のWeb開発者の仲間入りです。次の記事では、このハイパーメディアをさらに洗練させたWebのお作法「REST」との関係（005. RESTとの親和性）について学んでいきましょう。