コンテンツにスキップ

041. GET(情報の取得:Webの最も基本的で安全な「参照」)

原理:「ページをめくる」というWebの原点

GETリクエストの本来の意味

Webの世界において、GET(ゲット)リクエストは「読む」という行為を司ります。 あなたがブラウザのアドレスバーにURLを入力したり、リンクをクリックしたりするとき、ブラウザはサーバーに対して「そのページの内容を教えて(GET)」というメッセージを送っています。

GETには、非常に重要な二つのルールがあります。 1. 安全(Safe)であること: GETリクエストを送っただけで、サーバー側のデータが勝手に書き換わってはいけません。本を読んでも、本の文字が消えたり書き換わったりしないのと同じです。 2. 等巾(Idempotent)であること: 同じURLに何度GETを送っても、返ってくる結果は(基本的には)同じであり、何度読み込んでもシステムに副作用を与えないことが保証されています。

HTMXにおけるGETの役割

HTMXの hx-get 属性は、この「安全な読み取り」という行為を、あらゆる要素に解放します。 - リンクだけでなく、ボタンや div でも情報を取得できる。 - ページ全体ではなく、「HTMLの断片」だけを取得する。 これが、GETという伝統的な仕組みを使いつつ、SPAのようなサクサク動く体験を作る鍵となります。


実践:情報を安全に、効率的に引き寄せる

1. タブ切り替えでのGET活用

ユーザーがタブを切り替えたときに、その内容だけを読み込む例です。ここでは「読み取り専用」であるGETが最適です。

<!-- tab-menu.html -->
<div class="tabs">
    <button hx-get="/tabs/info" hx-target="#tab-body">会社概要</button>
    <button hx-get="/tabs/service" hx-target="#tab-body">サービス紹介</button>
</div>

<div id="tab-body">
    <!-- ここにボタンごとのHTMLパーツが読み込まれる -->
    ボタンを押すと、その内容だけがここに届きます。
</div>

2. インクリメンタル検索(情報の絞り込み)

入力するたびに最新の候補を表示するようなUIも、データの書き換えを伴わない「抽出」なので、GETで行います。

<input type="text" name="q" placeholder="ユーザー検索..."
       hx-get="/search" 
       hx-trigger="keyup delay:300ms changed" 
       hx-target="#search-results">

<div id="search-results"></div>

比較:GET vs POST(使い分けの基準)

GETを使うべきとき

  • データの取得・表示
  • 検索・フィルタリング
  • ページの切り替え ※ URLにパラメータが含まれても良い(ブックマークできる)場合。

POSTにすべきとき(GETではいけないとき)

  • データの新規登録・更新
  • ログイン処理(パスワードをURLに含めたくない)
  • サーバーに変化を与えるすべての操作

まとめ:初心者のための「参照」の美学

GETを正しく使うことは、Webの秩序を守ることです。

  • ブックマークできるか?: GETリクエストの結果は、パラメータを含めてURL一本で表現できるべきです。これによって、ユーザーは「今の状態」を保存したり共有したりできます。
  • 副作用を持たせない: 「ボタンを押すとサーバーのデータが消える」といった処理を hx-get で作ってはいけません。それはWebのルール違反であり、予期せぬバグ(ブラウザの先読みなどで勝手に消えるなど)の元になります。
  • HTMLパーツで考える: HTMXのGETは、ページ丸ごとではなく「その場に必要なパーツ」をサーバーから出前してもらう感覚で使いましょう。

Webの基本中の基本、GET。この「読む」という力をHTMXで再定義することで、あなたのサイトはもっと軽やかで、理に適ったものへと進化します。次の記事では、世界を書き換える「POST」(042. POST)の力について学びましょう。