導入
Web開発において、URLのクエリパラメータを扱う機会は非常に多いでしょう。従来、文字列操作や正規表現でパラメータを解析していましたが、現在は「URLSearchParams」APIを活用するのが標準的です。特に「forEach」メソッドを使いこなすことで、複雑なパラメータ処理を直感的かつ安全に実装できます。本記事では、このAPIを活用して開発効率を上げるための実践的なTipsを解説します。
基礎知識
URLSearchParamsは、URLのクエリ文字列を操作するための組み込みインターフェースです。
「forEach」メソッドは、その名の通り、URLSearchParamsオブジェクトに含まれるすべてのキーと値のペアを反復処理します。
重要な点は、クエリパラメータには「同じキーで複数の値を持つ（例: ?tags=js&tags=web）」場合が存在することです。forEachはこの「重複したキー」も漏れなく処理できるため、手動でパースするよりも遥かに堅牢です。
実装/解決策
実務では、単にループを回すだけでなく、特定の条件でフィルタリングしたり、オブジェクト形式に変換してAPIリクエストのペイロードを作成したりするケースが頻出します。
forEachのコールバック関数は「(value, key, parent) => {}」の引数を受け取ります。これを利用して、パラメータを安全に抽出・加工するロジックを組みます。
サンプルプログラム
以下のコードは、現在のURLからクエリパラメータを取得し、特定のキーのみを抽出しつつ、値が空のものを除外してオブジェクトに整形する実用的な例です。
// 現在のURLからクエリパラメータを取得
const params = new URLSearchParams(window.location.search);
// 抽出したパラメータを格納するオブジェクト
const queryData = {};
// forEachでパラメータを走査
params.forEach((value, key) => {
// 値が空文字列でない場合のみ取得（バリデーション）
if (value && value.trim() !== '') {
// 既にキーが存在する場合は配列にする（複数値対応）
if (queryData[key]) {
if (Array.isArray(queryData[key])) {
queryData[key].push(value);
} else {
queryData[key] = [queryData[key], value];
}
} else {
// 新規キーの場合はそのまま代入
queryData[key] = value;
}
}
});
console.log('整形後のクエリデータ:', queryData);
応用・注意点
1. 複数値の扱い
forEachで処理する際、同じキーが複数あるとコールバックがその回数分実行されます。単純に変数に代入すると上書きされてしまうため、上記のサンプルコードのように「既にキーがある場合は配列化する」というロジックを共通化しておくと、バグを未然に防げます。
2. エンコーディングの自動処理
URLSearchParamsは、自動的にパーセントエンコーディング（URLエンコード）をデコードしてくれます。自前でdecodeURIComponentを使用する必要がないため、セキュリティ的にもコードの可読性的にもAPIを最大限活用すべきです。
3. 互換性
IE11などの古いブラウザでは動作しませんが、現代のフロントエンド開発（モダンブラウザ環境）であれば安心して使用できます。もし古い環境をサポートする必要がある場合は、polyfillの導入を検討してください。
実務では、URLパラメータを正しく処理できるかどうかがアプリケーションの安定性に直結します。ぜひforEachを使いこなし、クリーンなコードを目指してください。