1. 導入：なぜURLSearchParamsが重要なのか
Web開発をしていると、URLの後ろにつく「?id=123&category=books」といった「クエリパラメータ」を扱いたい場面が必ず訪れます。従来は文字列の分割や正規表現を使って無理やり取り出していましたが、コードが複雑になりバグの温床になりがちでした。URLSearchParams APIを使えば、これらの操作を非常に直感的かつ安全に行うことができます。
2. 基礎知識：クエリパラメータとは何か
クエリパラメータとは、URLの「?」以降に記述されるデータのことです。サーバーに「どのページを表示するか」「どんな条件で検索するか」を伝えるための重要な役割を担っています。URLSearchParamsは、この文字列をオブジェクトのように扱い、値の追加・削除・取得を簡単にしてくれる組み込みの機能です。
3. 実装：使い方を理解する
URLSearchParamsを利用するには、まずは「URL」オブジェクトや「URLSearchParams」コンストラクタにクエリ文字列を渡してインスタンスを作成します。あとは用意されたメソッド（get, set, append, deleteなど）を呼び出すだけで操作が完了します。
4. サンプルプログラム
以下のコードは、URLからパラメータを取得し、新しいパラメータを追加してURL全体を再構築する実例です。ブラウザのコンソールに貼り付けて試してみてください。
// 1. 解析したいURLを定義
const urlString = "https://example.com/search?q=javascript&lang=ja";
const url = new URL(urlString);
// 2. searchParamsを取得
const params = url.searchParams;
// 3. 値を取得する
console.log("検索キーワード:", params.get("q")); // 出力: javascript
// 4. 値を追加・変更する
params.append("sort", "desc"); // 新しいパラメータを追加
params.set("lang", "en"); // 既存の値を変更
// 5. 最終的なURLを確認
console.log("更新後のURL:", url.toString());
// 出力: https://example.com/search?q=javascript&lang=en&sort=desc
5. 応用・注意点：現場で役立つポイント
注意点1：配列のような複数値の扱い
同じキーで複数の値を持つ場合（例: ?tags=html&tags=css）、getメソッドは最初の値しか返しません。すべての値を取得したい場合は「getAll(“tags”)」を使いましょう。
応用：現在のページURLを操作する
Webサイト制作で「現在のページURLを維持したまま、特定のパラメータだけ書き換えたい」というケースは多いです。その際は「window.location.href」をURLコンストラクタに渡すことで、現在のURLをベースに安全にパラメータを操作し、ブラウザの表示を更新することができます。
バグ回避のコツ
パラメータを操作した後は、必ず「url.toString()」を使用して文字列に戻すことを忘れないでください。URLSearchParamsオブジェクト自体はただのインターフェースであり、URLそのものではない点に注意しましょう。