← PC・IT用語集へ戻る

クエリパラメータ / パスパラメータ

Query Parameter / Path Parameter
web network development beginner
URLを通じてWebサーバーにデータを送るための2つの仕組み。
クエリパラメータ / パスパラメータ (Query Parameter / Path Parameter)

概要（サマリー）

クエリパラメータ（Query Parameter）とパスパラメータ（Path Parameter）は、どちらもWebブラウザやアプリからサーバーに向けて、URLを通じてデータを渡すための仕組みである。

例えば、検索サイトで特定のキーワードを入力したときや、ブログで特定の記事を開いたときに、URLの形が変化するのを見たことがあるだろう。その変化している部分こそが、この2つのパラメータである。

詳細解説

URLでデータを送る仕組みとは

WebサイトやAPIを利用するとき、ブラウザとサーバーの間で「どのようなデータを求めているか」という情報をやり取りする必要がある。

その際、HTTPリクエストのボディ部ではなく、URLという目に見える「住所」の一部に情報を載せて送る手法として、クエリパラメータとパスパラメータが広く使われている。

クエリパラメータとは何か

クエリパラメータ（「クエリ文字列」とも呼ばれる）は、URLの末尾に ? を起点として、「名前=値」の形式でデータを付け足す方法である。複数のデータを送る場合は & で繋ぐ。

  • URLの例: https://example.com/search?keyword=javascript&page=2
  • 特徴: キーワード検索の条件、ページの表示順序（ソート）、絞り込みフィルターなど、「補助的な情報（オプション）」を送る際によく使われる。

パスパラメータとは何か

パスパラメータ（「パス変数」とも呼ばれる）は、URLの階層構造（パス）そのものにデータを組み込む方法である。

  • URLの例: https://example.com/users/123 （末尾の 123 がユーザーIDを表すデータ）
  • 特徴: 特定のユーザー情報、特定のブログ記事など、「一意のリソース（主役となるデータ）」を直接指し示す際によく使われる。

2つの使い分けの判断基準

設計においてどちらを使うべきか迷ったときは、以下のように考えると整理しやすい。

  • パスパラメータを使うべき場面: そのデータがないとページが表示できない、または「特定の一要素」を特定したい場合。（例: 商品詳細ページ /products/99）
  • クエリパラメータを使うべき場面: ページ自体は同じで、中身を並び替えたり、特定のキーワードで絞り込んだりしたい場合。（例: 商品一覧の並び替え /products?sort=price_low）

コード例

以下は、Webアプリケーション（Node.jsのExpressフレームワークを想定）で、それぞれのパラメータをサーバー側で受け取るプログラムのコード例である。

パスパラメータを受け取る例

// :id の部分がパスパラメータになり、req.params から取得できる
app.get('/users/:id', (req, res) => {
  const userId = req.params.id;
  res.send(`ユーザーID ${userId} の情報を返します。`);
});

クエリパラメータを受け取る例

// ?keyword=xxx の部分がクエリパラメータになり、req.query から取得できる
app.get('/search', (req, res) => {
  const searchKeyword = req.query.keyword;
  res.send(`キーワード「${searchKeyword}」の検索結果です。`);
});

このように、プログラム内での受け取り方の記述もそれぞれ異なっている。

AIコーディングとの関係

AIにWeb APIの開発やURLのルーティングの実装を依頼する際、どちらのパラメータを使ってデータを送りたいかを明確に指定すると、非常にスムーズに動作するコードを書いてもらえる。

例えば、AIへ相談する際は以下のように指示するとよい。

Node.jsとExpressを使って、商品の詳細データを取得するAPIのルーティングを作ってください。
商品のID（数字）は、パスパラメータとして `/items/:id` の形式で受け取りたいです。
また、レスポンスのフォーマットをクエリパラメータの `?format=json` または `?format=xml` で切り替えられるようにコードを書いてください。

このように指定することで、AIはパスパラメータ（req.params）とクエリパラメータ（req.query）を適切に組み合わせたプログラムを正確に出力してくれる。

よくある勘違い

パラメータに個人情報やパスワードを載せてもいい？

絶対に避けるべきである。 URLに載せたパラメータは、ブラウザの閲覧履歴、サーバーのアクセスログ、アクセス解析ツールなどに残りやすい。そのため、パスワード、クレジットカード番号、個人情報などはURLのパラメータに含めず、HTTPS通信の上で、必要に応じてPOSTリクエストのボディなどで送信する必要がある。

クエリパラメータの順番が変わると別のページになる？

技術的には同じページとして処理されることが多いが、検索エンジンのクローラーは「順序が違うURL」をそれぞれ別のURLとして認識してしまうことがある。これを防ぐため、内部的なプログラム側で処理を統一するか、HTML内に canonical（優先URL）を設定するなどの対策をとるのが一般的である。

日本語をそのままURLに載せていい？

ブラウザのアドレスバーには日本語が表示されていることがあるが、内部的には「URLエンコード（パーセントエンコード）」という英数字の羅列に変換されて送信されている。プログラム内でパラメータを処理する際、自動でデコード（復元）されない環境では、文字化けを防ぐために手動でデコード処理を入れる必要がある。

まとめ

  • クエリパラメータは、URL末尾に ?key=value の形式で付与するオプション的なデータである。
  • パスパラメータは、URLの階層構造（パス）にデータを組み込んで特定のリソースを指し示す。
  • 機密性の高いデータ（個人情報やパスワード）はURLに含めてはならない。
  • AIにAPI設計を指示する際は、どちらのパラメータ形式を使うかを明確に伝える。

情報ソース

より詳しくAIに聞いてみよう

  • クエリパラメータとパスパラメータの使い分けについて、ECサイトの「商品一覧ページ」と「商品詳細ページ」を例にしてわかりやすく解説してください。
  • JavaScriptで、現在のページのURLから特定のクエリパラメータ（例：?ref=ad の ad 部分）を抽出するフロントエンドのコードを教えてください。
  • Express以外のWebフレームワーク（PythonのFastAPIやPHPのLaravel）で、クエリパラメータとパスパラメータを取得するコードの書き方を比較して見せてください。
  • URLのパラメータが検索エンジンのSEOに与える影響と、重複コンテンツとして扱われないようにするための canonical タグの正しい使い方を教えてください。
  • URLパラメータに含まれる日本語や特殊文字が文字化けしてしまう仕組みと、それをプログラム側で「エンコード/デコード」して解決する方法を教えてください。