URLの「?」以降、どう読んでる？JavaScriptの URLSearchParams
検索ページの「?q=web」や、一覧ページの「?category=css」。URLに付いた値をJavaScriptで使いたいとき、文字列を分割する処理を毎回書くのは少し面倒ですよね。
そんなときは URLSearchParams が便利です。URLのクエリー文字列から、名前を指定して値を取り出せます。
まずは get() で値を取り出す
動作を試すなら、次のコードをブラウザーの開発者ツールのコンソールで実行してみてください。テスト用の文字列なので、今開いているページのURLに関係なく確認できます。
const params = new URLSearchParams("?q=web&category=css");
console.log(params.get("q")); // "web"
console.log(params.get("category")); // "css"
console.log(params.get("page")); // null実際に表示しているページの値を読む場合は、クエリー部分を表す window.location.search を渡します。次の例では、categoryが「css」のときだけ処理を実行できます。
const params = new URLSearchParams(window.location.search);
const category = params.get("category");
if (category === "css") {
console.log("CSS向けの表示に切り替える処理をここに書く");
}検索条件や表示状態の受け渡しに
検索キーワードを入力欄に戻す、一覧のカテゴリーを選択済みにする、URLで指定されたタブを開く。こうした「別のページから状態を渡す」場面で使えます。ただし、値を取得するだけでは画面は変わりません。入力欄やタブを更新する処理は別に用意します。
文字列として受け取り、使う前に確認
get() の戻り値は文字列で、名前が存在しなければ null です。「?q=」のように値が空なら空文字列になります。数値として使うなら、存在や空文字を確認してから変換し、範囲もチェックしましょう。
同じ名前が複数ある場合、get() は最初の値を返します。すべて必要なら getAll() を使います。また、URL全体をそのまま new URLSearchParams() に渡さず、クエリー部分を渡すのがポイントです。
URLの値は閲覧者が自由に変更できます。表示切り替えには使えますが、権限の判定には使わないようにしましょう。画面に文字として表示する際は、innerHTML へ直接入れず、textContent などで扱うと安心です。
