1. 導入
Web開発において、URLのクエリパラメータを操作する機会は非常に多いでしょう。例えば、検索フォームの値をURLに反映させたり、ページネーションの状態を管理したりするケースです。従来、文字列操作でパラメータを解析していた方も多いかもしれませんが、モダンブラウザで標準サポートされている URLSearchParams APIを使えば、より堅牢で保守性の高いコードが書けます。特に entries() メソッドは、パラメータを反復処理（イテレーション）する際に非常に強力で、クエリ文字列をオブジェクトへ変換する際などの「変換処理」を簡潔に解決してくれます。
2. 基礎知識
URLSearchParams は、URLのクエリ部分を扱うための組み込みオブジェクトです。
その中でも entries() メソッドは、URLSearchParamsオブジェクトに含まれるすべてのキーと値のペアを、挿入順に保持したイテレーターを返します。
これにより、for…of ループや、Object.fromEntries() と組み合わせることで、クエリパラメータを簡単にJavaScriptのオブジェクトとして扱うことが可能になります。
3. 実装/解決策
実務で最も頻繁に遭遇するケースは「URLのクエリパラメータを現在の状態として取得し、加工して再利用する」という場面です。
1. URLSearchParams インスタンスを作成する。
2. entries() を使用して各パラメータをループ処理する、または Object.fromEntries() で一括変換する。
3. 必要に応じて値を更新し、URLに戻す。
このフローにより、正規表現などで複雑な文字列解析を行う必要がなくなり、バグの混入を防ぐことができます。
4. サンプルプログラム
以下は、現在のURLからクエリパラメータを抽出し、オブジェクトへ変換してコンソールに出力する実用的なコードです。
// 現在のURLが "?search=frontend&page=2&sort=desc" だと仮定します
const urlParams = new URLSearchParams(window.location.search);
// 1. entries()を使って各要素をループ処理する場合
console.log("--- 個別のパラメータ取得 ---");
for (const [key, value] of urlParams.entries()) {
// keyにはパラメータ名、valueには値が自動で格納されます
console.log(`${key}: ${value}`);
}
// 2. 実務でよく使う「オブジェクトへの一括変換」
// entries()はイテレーターを返すため、Object.fromEntriesにそのまま渡せます
const paramsObj = Object.fromEntries(urlParams.entries());
console.log("--- 変換後のオブジェクト ---");
console.log(paramsObj);
// 出力: { search: "frontend", page: "2", sort: "desc" }
// 3. 値を加工してURLを構築し直す例
paramsObj.page = parseInt(paramsObj.page) + 1; // ページをインクリメント
const newParams = new URLSearchParams(paramsObj);
console.log("新しいクエリ文字列:", newParams.toString());
5. 応用・注意点
実務で利用する際の注意点が2つあります。
・重複するキーの扱い
同一のキーが複数存在する場合（例: ?tags=js&tags=react）、entries() はその両方を順に返します。一方、Object.fromEntries() でオブジェクトに変換すると、後から定義された値で上書きされてしまいます。重複を許容する仕様の場合は、entries() をループして配列に格納するなどの工夫が必要です。
・ブラウザの互換性
URLSearchParams 自体はIEを除くモダンブラウザで完全にサポートされています。もしIE11をサポートする必要がある場合は、Polyfillの導入を検討してください。
また、URLを直接操作する際は、エンコード/デコード処理がAPI内部で自動的に行われます。手動で encodeURIComponent() を呼び出す必要がないため、セキュリティ的にもURLSearchParamsを使うことがベストプラクティスとなります。