046. Query Parameters（URLパラメータ：住所の後に「おまけ」を添える）
原理：URLに情報を刻み込む通信術
「はてな」の後に続く情報の正体
WebサイトのURLを見ていると、?q=htmx&lang=jp のように末尾に「？（はてな）」から始まる文字列がついていることがあります。これが「Query Parameters（クエリパラメータ）」、または「URLパラメータ」と呼ばれるものです。
これはサーバーに対して、「この住所（URL）のページを見たいんだけど、ついでにこういう条件も付けてね」という追加の注文を出すための仕組みです。
- q=htmx: 「htmx」という言葉で検索してね。
- lang=jp: 日本語の結果を表示してね。
このように、名前=中身 というペアを & で繋いで送るのが共通のルールです。
GETリクエストの最高の相棒
クエリパラメータは、主にGETリクエスト（情報の取得）で使われます。 最大の特徴は、「URLを見ただけでどんな注文を出したか一目でわかる」ことです。これにより、検索結果のURLをブックマークしたり、友達にシェアしたりすることが可能になります。
実践：HTMXでパラメータを自在に操る
1. hx-get で自動送信されるパラメータ
HTMXでは、hx-get を設定した要素が入力フォーム（<input>など）を包んでいる場合、その中身を自動的にクエリパラメータとしてURLの末尾に付け足して送信してくれます。
<!-- search-form.html -->
<form hx-get="/search" hx-target="#results">
<input type="text" name="keyword" placeholder="キーワード入力...">
<button type="submit">検索</button>
</form>
/search?keyword=（入力した文字） というURLを組み立ててサーバーへ聞きに行きます。
2. aタグ（リンク）での固定パラメータ
ブースト機能（hx-boost）を使っているリンクでも、パラメータはそのまま引き継がれます。
<nav hx-boost="true">
<!-- クリックすると /items?category=books が部分更新で読み込まれます -->
<a href="/items?category=books">本の一覧</a>
<a href="/items?category=toys">おもちゃの一覧</a>
</nav>
3. ステップ・バイ・ステップ解説
- 名前（name）を付ける: 入力欄には必ず
name="◯◯"という名前をつけましょう。これがパラメータのラベルになります。 - 特別な文字に注意: スペースや日本語は、ブラウザが自動的に
%E3%81%...のような記号に変換（エンコード）してくれます。 - サーバーで受け取る: サーバー側（PHPやPythonなど）では、「URLパラメータの keyword を取ってきて」という命令一つで簡単に中身を取り出すことができます。
比較：クエリパラメータ vs パスパラメータ
クエリパラメータ（?名前=中身）
- 書き方:
/search?q=htmx - 用途: 検索、並び替え、フィルタリング（オプション的な情報）。
- 特徴: 順番を入れ替えても動作が変わらないことが多い。
パスパラメータ（/中身）
- 書き方:
/user/123 - 用途: 特定のデータそのものを指し示す（必須の情報）。
- 特徴: 住所の一部として組み込まれている。
まとめ：初心者のための「住所」の飾り方
クエリパラメータを使いこなすと、あなたのWebアプリは「ユーザーの好みに合わせる」柔軟性を手に入れます。
- 見える化のメリット: URLに情報が乗ることで、ユーザーは「今何を見ているか」を把握しやすくなり、ブラウザの「戻る」操作もより自然になります。
- 機密情報は載せない: パスワードやクレジットカード番号などをクエリパラメータにしてはいけません。URLは履歴に残ってしまうため、そうした情報はPOSTリクエストで送りましょう。
- URLを汚さない: パラメータがあまりに長くなりすぎると、URLが呪文のようになって扱いにくくなります。必要な情報だけをスマートに添えましょう。
「住所」の後に、ちょっとした追加注文（パラメータ）を。hx-get と組み合わせて、ユーザーが思わず誰かに教えたくなるような、共有力の高い検索・一覧画面を作ってください。次の記事では、URLの一部として情報を埋め込む「パスパラメータ」（047. Path Parameters）をご紹介します。