コンテンツにスキップ

016. hx-get（GETリクエストによる情報の取得）

原理：Webの「参照」をHTMLで再定義する

GETリクエストの本来の役割

インターネットの世界において、「GET（ゲット）」という言葉は非常に特別な意味を持ちます。 ブラウザのアドレスバーにURLを打ち込む、検索結果のリンクをクリックする、ブックマークを開く。これらはすべて「サーバーさん、その情報を私にください（GET）」というお願いです。

GETリクエストには、Webを健全に保つための重要なルールがあります。それは、「GETは情報を読み取るだけで、サーバーの中身を書き換えてはいけない」というものです。これを「安全（Safe）」かつ「等巾（Idempotent）」な操作と呼びます。何度同じリンクをクリックしても、同じ情報が表示されるだけで、勝手に商品が購入されたりデータが消えたりすることはありません。

HTMXによる「リンク」の民主化

標準のHTMLでは、このGETリクエストを送れるのはほぼ <a> タグ（リンク）か、特定の条件での <form> タグだけでした。 HTMXの hx-get 属性は、この「情報の取得」という特権を、ボタン、画像、入力欄、あるいは単なる <div> といったあらゆる要素に解放します。

これにより、「カードをクリックしたら詳細が表示される」「入力欄に文字を打ったら検索候補が出る」「画面を表示した瞬間にデータを読み込む」といった、これまではJavaScript（JS）を駆使しなければならなかった動的な動作を、Webの最も基本的で安全なルール（GET）の上に構築できるようになります。

実践：多様な要素で「情報を引き寄せる」

1. ボタンによる非同期情報の読み込み

最もシンプルな使い方は、ボタンをクリックした時に情報の断片を取得し、画面の一部を書き換えることです。

<!-- button.html -->
<button hx-get="/api/latest-news" 
        hx-target="#news-panel" 
        hx-swap="innerHTML">
    最新ニュースを読み込む
</button>

<div id="news-panel">
    ここでは、まだ古いニュースが表示されています。
</div>
このボタンを押すと、HTMXは /api/latest-news へ「ニュースをください」とGETリクエストを送ります。サーバーからHTMLの断片が届くと、#news-panel の中身だけが最新のものに更新されます。

2. インラインでの詳細表示

画像やリストの項目をクリックした時に、その場で詳細を広げるようなUIも、hx-get なら簡単です。

<div class="product-item">
    <h3>高性能ヘッドホン</h3>
    <!-- 自分の親要素（closest .product-item）を詳細画面で置き換える例 -->
    <button hx-get="/product/123/details" 
            hx-target="closest .product-item" 
            hx-swap="outerHTML">
        詳細を見る
    </button>
</div>

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

  1. URLの指定: hx-get="/path/to/resource" で、どの情報を取得したいかを指定します。
  2. ターゲットの選定: hx-target を使って、取得した情報をどこに流し込むか決めます。指定しない場合は、ボタンそのものの中身が書き換わります。
  3. 安全性の確認: あくまで「読み取り」であることを意識し、サーバー側ではこのリクエストでデータベースを更新しないように設計します。

比較：aタグの遷移 vs hx-getの更新

標準のaタグ（リンク）

  • 動作: クリックすると、ブラウザが現在のページを捨てて、新しいページをゼロから読み込みます。
  • 欠点: 画面が白くチラつき、スクロール位置もリセットされます。ヘッダーやメニューまで再読み込みされるため、通信量も多くなります。

HTMXの hx-get

  • 動作: クリックしても、今のページはそのままです。裏側でこっそり情報を取りに行き、必要な部分だけをパズルのピースのようにカチッとはめ込みます。
  • 利点: ユーザー体験が非常に滑らか（SPA風）になり、サーバーが返すHTMLも最小限（パーツのみ）で済むため、レスポンスが高速です。

まとめ：初心者のための「取得」の美学

hx-get を使いこなすことは、Web開発における「情報を操る力」を手に入れることです。

  • URLを意識する: 自分が今、どこの「住所（URL）」に情報を聞きに行こうとしているのかを常に意識しましょう。
  • パーツで考える: ページ全体を作るのではなく、「ボタン一つ」「リストの一行」といった小さな部品をサーバーから届ける感覚を養ってください。
  • 読み取り専用の約束: GET属性を使うときは、「何かを変える」のではなく「何かを教えてもらう」という初心を忘れずに。

情報の「引っ越し（ページ遷移）」ではなく、情報の「出前（部分更新）」。この感覚が掴めれば、あなたのサイトはもっと生き生きとしたものに変わるはずです。次の記事では、情報を取得するだけでなく、積極的にサーバーにデータを送り届ける「hx-post」（017. hx-post）について詳しく見ていきましょう。