導入
Web開発において、URLのクエリパラメータ（?key=value&id=123のような部分）を扱う機会は非常に多いです。従来は文字列操作で分解していましたが、現在はブラウザ標準の URLSearchParams APIを使うのが一般的です。その中でも keys() メソッドは、「どんなパラメータが含まれているか」を把握し、動的に処理を行う際に非常に重要な役割を果たします。これを使うことで、不要なキーの削除やフィルタリングを安全かつ簡潔に行えるようになります。
基礎知識
URLSearchParams は、URLのクエリ文字列を操作するための組み込みインターフェースです。
その中の keys() メソッドは、URL内に存在するすべてのキー（パラメータ名）を順次取得するための「イテレータ」を返します。
イテレータであるため、for…of ループで簡単に回すことができます。値を直接取得するのではなく、まずは「キーの一覧」を取得して、それに基づいて条件分岐を行いたい場合に非常に便利です。
実装/解決策
実装の流れはシンプルです。まず、現在のURLからURLSearchParamsインスタンスを作成し、そこから .keys() を呼び出します。
例えば、「特定の条件以外のパラメータをすべて削除したい」や「すべてのパラメータ名を取得してロギングしたい」といったケースで威力を発揮します。
サンプルプログラム
以下のコードは、現在のURLからすべてのキーを取得し、コンソールに表示する実用的な例です。
// 現在のURLからパラメータ情報を取得
const params = new URLSearchParams(window.location.search);
// keys() を使って全パラメータをループ処理
// イテレータを返しているため、for...ofで回せます
console.log("--- 現在のパラメータ一覧 ---");
for (const key of params.keys()) {
// パラメータ名と、それに対応する値を取得して表示
const value = params.get(key);
console.log(`キー: ${key}, 値: ${value}`);
}
// 応用例：特定の名前（例: 'token'）以外のパラメータをすべて削除する
for (const key of params.keys()) {
if (key !== 'token') {
params.delete(key);
console.log(`削除しました: ${key}`);
}
}
応用・注意点
現場で活用する際に注意すべき点がいくつかあります。
1. イテレータの破壊に注意: ループ中に直接 params.delete(key) を行うと、イテレータの挙動が不安定になる場合があります。キーのリストを一度配列に変換してから削除操作を行うと安全です。
（例: const keys = Array.from(params.keys());）
2. 空のパラメータの扱い: keys() はキーが存在すれば、値が空のパラメータ（?foo=&bar=1 など）も正しく取得します。値が空かどうかの判定が必要な場合は、別途 params.get(key) の結果を確認してください。
3. ブラウザ対応: 主要なモダンブラウザすべてでサポートされていますが、IE（Internet Explorer）はサポート外です。もしIE対応が必要なプロジェクトであれば、ポリフィル（core-jsなど）の導入を検討してください。
このAPIを活用して、より堅牢で読みやすいクエリ操作コードを目指しましょう！