1. 導入：なぜURLSearchParams.getAll()が必要なのか
Web開発において、URLのクエリパラメータを操作する機会は非常に多いです。しかし、同じキーで複数の値を持つクエリ（例: ?tags=javascript&tags=frontend）を扱う際、単純な get() メソッドを使うと「最初の値」しか取得できず、データが欠落してしまうという課題があります。この記事では、この課題を解決し、すべての値を正確に取得するための URLSearchParams.getAll() について解説します。
2. 基礎知識：URLSearchParamsとは
URLSearchParams は、URLのクエリ文字列を扱いやすくするための組み込みAPIです。
通常、クエリパラメータを取得するには、以下のような違いがあります。
・get(key): そのキーに紐づく「最初に見つかった値」を返します。
・getAll(key): そのキーに紐づく「すべての値」を配列として返します。
これにより、チェックボックスの複数選択や、フィルタリング条件をURLで共有する場合などに、正確なデータの復元が可能になります。
3. 実装・解決策
実装は非常にシンプルです。URLSearchParams オブジェクトを作成し、取得したいキーを引数に指定して getAll() を呼び出すだけです。返り値は常に配列となるため、map() や forEach() といった配列メソッドでそのまま処理を継続できるのが大きなメリットです。
4. サンプルプログラム
以下のコードは、実際にURLから複数の値を取り出し、コンソールに出力する実用的な例です。
// 現在のURLが "?category=tech&tag=js&tag=react&tag=web" であると仮定します
const urlParams = new URLSearchParams(window.location.search);
// 1つの値しかない場合は「get」を使用
const category = urlParams.get('category');
console.log('カテゴリー:', category); // 出力: tech
// 複数の値がある場合は「getAll」を使用
// これにより、すべてのタグを配列として取得できます
const tags = urlParams.getAll('tag');
// 配列として取得できるため、そのまま反復処理が可能
tags.forEach((tag, index) => {
console.log(`タグ ${index + 1}: ${tag}`);
});
// もちろん配列メソッドも利用可能です
const upperTags = tags.map(t => t.toUpperCase());
console.log('大文字変換後のタグ:', upperTags); // 出力: ["JS", "REACT", "WEB"]
5. 応用・注意点
現場で役立つ補足と注意点をいくつか挙げます。
・存在しないキーの扱い：getAll() は、指定したキーがURL内に存在しない場合、エラーを吐くのではなく「空の配列 []」を返します。これにより、if文で存在チェックをしなくても安全にループ処理が書けるため、コードが非常に堅牢になります。
・型変換：URLSearchParams から取得される値は、すべて「文字列」です。数値や真偽値として扱いたい場合は、取得後に Number() や Boolean() で明示的に型変換を行うことを忘れないようにしましょう。
・ブラウザ互換性：主要なモダンブラウザおよび IE11 以降でサポートされていますが、もし非常に古い環境を考慮する必要がある場合は、Polyfill の導入を検討してください。
このように、getAll() を活用することで、クエリパラメータの解析処理をより安全かつ簡潔に書くことができます。ぜひ次回のプロジェクトで活用してみてください。