047. Path Parameters（パスパラメータ：URLの一部に情報を埋め込む）

原理：URLという「住所」の中に、特定の「部屋番号」を書く

住所そのものを変える

前回のクエリパラメータが、住所の後に添える「おまけのメモ（?q=book）」だったのに対し、今回紹介する「Path Parameters（パスパラメータ）」、または「パス変数」は、URLそのものの一部として組み込まれる情報です。

例えば、https://example.com/users/tanaka というURLがあったとします。この /tanaka の部分がパスパラメータです。 - /users/ : 「ユーザーたちの名簿」という場所 - tanaka : その中の「田中さん」という特定の個人このように、「特定の一つのデータ」を指し示すためにURLを穴埋めにする仕組みがパスパラメータの本質です。

階層で整理する美しさ

パスパラメータを使う最大のメリットは、URLが非常に読みやすく、情報の構造（階層）がハッキリすることです。 ?id=123 と書くよりも、/123 と書く方が、そのデータが「システムにとって主役である」ことが伝わります。これは「REST（レスト）」というモダンなWebの設計ルールにおいても非常に推奨されている書き方です。

実践：HTMXで見通しの良いURLを設計する

1. 特定のアイテムを操作するURL

商品一覧から、特定の商品（ID=55）の詳細を呼び出すような例です。

<!-- item-list.html -->
<div class="item">
    <span>高級チョコレート</span>
    <!-- URLの一部に直接ID(55)を組み込む -->
    <button hx-get="/items/55/details" hx-target="#detail-area">
        詳細を見る
    </button>
</div>

<div id="detail-area"></div>

2. サーバー側での「穴埋め」の受け取り

サーバー（バックエンド）では、パスの一部を「変数」として定義して待ち受けます。（例：/items/{id}/details） HTMXがボタンからリクエストを送ると、サーバーはこの {id} の部分から 55 という数字を取り出し、「55番のチョコの情報を取ってこよう」と判断します。

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

名詞の設計: 「ユーザー」「記事」「商品」など、対象となるデータの名前をパスに含めます（例：/articles/）。
IDや名前の埋め込み: その後に、特定の個体を識別する文字や数字を置きます（例：/articles/001）。
アクションの追加（任意）: 必要に応じて、そのデータに対して何をしたいかを末尾に足すこともあります（例：/articles/001/edit）。

比較：クエリパラメータ vs パスパラメータ（使い分け）

パスパラメータ（/123）を使うとき

特定のデータを選択するとき（ユーザー、記事、カテゴリーなど）。
その情報がないとページが成立しないとき。
例：/user/antigravity, /blog/hello-world

クエリパラメータ（?id=123）を使うとき

データの見せ方を変えるとき（並び替え順、絞り込み条件、ページ数など）。
オプションの情報（なくても表示はできる）とき。
例：/search?q=htmx&sort=newest

まとめ：初心者のための「美しいURL」

パスパラメータを使いこなすと、あなたのWebアプリは「整理整頓された図書館」のような使い心地になります。

URLはUIである: ユーザーがURLを見ただけで、「今自分はどこの階層にいるか」を理解できるのが理想です。
SEO（検索エンジン対策）に強い: Googleなどの検索エンジンにとっても、パスで整理されたURLは内容を把握しやすいため、好まれる傾向にあります。
HTMXとの相性: hx-push-url（037.URL更新）と組み合わせれば、部分更新をしながら、この美しいパスパラメータをアドレスバーに刻んでいくことができます。

住所を短く、美しく。hx-get や hx-post を使うときに、パスパラメータ（/data/id）の形式を第一候補に考えることで、あなたのWeb開発スキルは一段上の「RESTful（レストフル）」なステージへと到達します。次の記事では、通信の「中身」そのものである「フォームデータ（048. Form Data）」の仕組みについて解説します。