「リクエスト」その2 ~どうしてURLはこんなに長い？~

身近なリクエスト

長いURL

クエリパラメータ

クエリパラメータの使い方

URL

クエリパラメータはビュー側でもコントローラ側でも扱うことができます。
WebページのURLにあるクエリパラメータは、ビューファイル側で取得することができます。

https://wown.co.jp?user_id=2024&user_name=wown

例えばページのURLがこのようになっている場合、以下のようにしてビューファイルの変数に収めることができます。

const queryParams = new URLSearchParams(window.location.search);
const queryUserId = queryParams.get('user_id');
const queryUserName = queryParams.get('user_name');

API

APIのURIにも含めることが可能です。

export default function CountButton() 
{ 
    return ( 
        <button onClick={() => post('/api/system/user/show?user_id={queryUserId}&user_name={queryUserName}'> 
            クリック 
        </button> 
    ); 
}

APIにクエリパラメータを含めると、コントローラではRequestオブジェクトからクエリパラメータの内容を含めることができます。上記のAPIなら、「$request->user_id」「$requst->user_name」でそれぞれクエリパラメータの内容にアクセスできます。

取り扱い注意

クエリパラメータをよく扱いやすいページとしては

• 検索条件（キーワード、ソート順、フィルタリングなど）
• ページ送りの番号
• 商品や記事などのID

このあたりのデータを扱うことが多いでしょうか。

クエリパラメータは取り扱いやすいですが、リクエストボディと違ってパラメータの内容を簡単に見ることができ、非常に簡単に改ざんすることが可能です。ですので、パスワードなどの秘密情報をクエリパラメータで扱うのは好ましくありません。

ですが、小さな情報を扱う際にたいへん扱いやすく便利ですし、ユーザーに情報が伝わることがメリットであることもあります。実際、今回の例に挙げたGoogleの検索結果ページはリクエスト内容をクエリパラメータで扱っていたことから同一の検索結果の共有ができていました。また、ブラウザバック(戻るボタン)などで過去の結果にアクセスする際にも問題が起こりにくいです。

クエリパラメータはあちこちで利用されています。Webページを見る際、ちょっとだけURLに目を凝らして見てみると、その構造の一端が見えるかもしれません。