1. 導入：なぜこの技術が重要なのか
Webサイトを制作していると、「現在表示しているページのURLから、検索キーワードやフィルター設定を取得したい」という場面によく遭遇します。例えば、検索結果画面で「どのような条件で検索されたか」をJavaScriptで把握する必要がある場合です。これまで、文字列操作（splitやindexOfなど）でURLを解析していた方も多いかもしれませんが、実はもっと簡単で安全な方法があります。それがURLSearchParams APIです。特に今回紹介するvalues()メソッドを使えば、URLに含まれるすべての値を簡単に取り出すことができ、コードを劇的にスッキリさせることができます。
2. 基礎知識：URLSearchParamsとは？
URLの末尾にある「?key1=value1&key2=value2」のような部分を「クエリパラメータ」と呼びます。URLSearchParamsは、この複雑な文字列を、JavaScriptで扱いやすいオブジェクト形式に変換してくれる便利な仕組みです。
values()メソッドは、その名の通り「キーと値のペア」のうち、「値（value）」だけを順番に取り出してくれる反復子（イテレータ）を返します。特定のキーを指定せず、とりあえずURLに渡されたすべての値を確認したい場合に非常に重宝します。
3. 実装/解決策：具体的な手順
実装の流れは非常にシンプルです。
1. 現在のURLからパラメータ部分を取り出す。
2. URLSearchParamsオブジェクトを作成する。
3. values()メソッドを呼び出し、ループ（for…ofなど）で値を取り出す。
これだけで、面倒な文字列分割の処理から解放されます。
4. サンプルプログラム
以下のコードをブラウザのコンソールに貼り付けて試してみてください。例えば、「?category=electronics&sort=price&order=desc」というURLを想定したコードです。
// 1. URLのクエリ部分をシミュレーション（本来は location.search を使います）
const queryString = "?category=electronics&sort=price&order=desc";
// 2. URLSearchParamsオブジェクトを作成
const params = new URLSearchParams(queryString);
// 3. values()メソッドで値だけを順番に取り出す
// 実行すると「electronics」「price」「desc」が順番に表示されます
console.log("--- クエリパラメータの値一覧 ---");
for (const value of params.values()) {
// valueには各パラメータの値が代入されます
console.log("取得した値:", value);
}
5. 応用・注意点：現場での活用と罠
注意点：
values()は値だけを抽出するため、「どのキーに対応する値か」までは分かりません。もし「どのキーに対する値か」も一緒に扱いたい場合は、entries()メソッドを使うのがベストです。
現場での活用：
現場では、フォームの入力内容をリセットしたり、特定の条件（例：filterなどの特定のキー）を除外したURLを再生成したりする際によく使われます。また、URLに日本語が含まれている場合も、URLSearchParamsは自動的にエンコード・デコード処理を行ってくれるため、手動で処理するよりもバグが少なく、非常に堅牢です。
まずは簡単なプロジェクトで、URLパラメータを扱う際にURLSearchParamsを使ってみてください。一度慣れると、もう元の文字列操作には戻れなくなりますよ！