導入
Web開発において、URLのクエリパラメータ（?key=value&id=123など）を扱う機会は非常に多いです。従来は文字列の分割（split）や正規表現を使ってパースしていましたが、これらはバグの温床になりがちでした。現代のフロントエンド開発において、標準APIである「URLSearchParams」を使いこなすことは、コードの可読性を高め、保守性を向上させるために必須のスキルです。
基礎知識
URLSearchParamsとは、URLのクエリ文字列を操作するための標準的なJavaScript APIです。これを使うことで、パラメータの取得、追加、削除、更新といった操作をオブジェクト指向的なインターフェースで行うことができます。
例えば、location.searchから直接インスタンスを生成できるため、煩雑な文字列操作から解放されます。
実装/解決策
URLSearchParamsを利用する際は、対象の文字列をコンストラクタに渡すだけで準備が完了します。
特によく使われるメソッドは以下の通りです。
・get(): 指定したキーの最初の値を取得する
・set(): 指定したキーの値を設定する（既存の場合は上書き）
・append(): 指定したキーに値を追加する（同名キーを許容）
・toString(): 操作した内容をクエリ文字列形式に変換する
これらを活用すれば、検索フィルタの構築や、ページネーションの状態保持、APIリクエスト時のパラメータ作成が非常にシンプルになります。
サンプルプログラム
以下のコードは、現在のURLからパラメータを取得し、新しいパラメータを付与して新しいURL文字列を生成する実用的な例です。
// 現在のURLが ?category=tech&page=1 の場合を想定
const params = new URLSearchParams(window.location.search);
// 1. 値の取得
const category = params.get('category'); // "tech" が取得できる
// 2. 値の更新
params.set('page', '2'); // pageを2に更新
// 3. 新しいパラメータの追加
params.append('sort', 'desc'); // ?category=tech&page=2&sort=desc になる
// 4. URLとして出力
const newQueryString = params.toString();
console.log(newQueryString); // コンソールに "category=tech&page=2&sort=desc" と表示
// 実務応用：fetchの際にURLへ付与する例
const baseUrl = 'https://api.example.com/items';
const url = `${baseUrl}?${params.toString()}`;
// fetch(url) で実行可能
応用・注意点
現場で活用する際の注意点は以下の3点です。
1. 複数値の扱い
URLSearchParamsは同名のキーを複数保持できます（例: ?tag=js&tag=react）。get()メソッドは最初の値しか返さないため、すべての値を取得したい場合はgetAll(‘tag’)を使用してください。
2. ブラウザ対応とポリフィル
主要なモダンブラウザはすべて対応していますが、非常に古い環境をサポートする必要がある場合は、念のため「core-js」などのポリフィルを検討してください。
3. エンコードの自動処理
URLSearchParamsは、値のエンコード（日本語や特殊文字）を自動的に行ってくれます。手動でencodeURIComponentを行う必要がないため、セキュリティ的にも安全でバグが減ります。これこそが手書きの文字列連結ではなく、本APIを使う最大のメリットです。