URLのクエリパラメータを取得する際に、同じキーの複数の値を取得したい場合があります。JavaScriptでは`URLSearchParams.getAll()`メソッドを使用することで、簡単に全てのクエリパラメータを取得できます。

URLSearchParams.getAll()の基本的な使い方

`URLSearchParams.getAll()`メソッドは、指定したキーに対する全ての値を配列として返します。以下の例で具体的な使い方を見ていきましょう。

// URLが http://example.com?color=red&color=blue&color=green の場合

const urlParams = new URLSearchParams(window.location.search);
const colors = urlParams.getAll('color');

console.log(colors); // ['red', 'blue', 'green']

実践的な使用例

実際のWebアプリケーションでの使用例を見てみましょう。

// フォームで複数選択された値を処理する例
const url = 'http://example.com?category=food&category=drink&category=snack';
const params = new URLSearchParams(new URL(url).search);
const categories = params.getAll('category');

categories.forEach(category => {
    console.log(`Selected category: ${category}`);
});

エラー処理とバリデーション

存在しないパラメータに対して`getAll()`を使用した場合、空の配列が返されます。これを利用してバリデーションを実装できます。

const params = new URLSearchParams('?name=John');
const hobbies = params.getAll('hobby');

if (hobbies.length === 0) {
    console.log('趣味が指定されていません');
} else {
    hobbies.forEach(hobby => {
        console.log(`趣味: ${hobby}`);
    });
}

ブラウザ互換性

`URLSearchParams`は主要なモダンブラウザで広くサポートされています。ただし、Internet Explorer 11以前では使用できないため、必要に応じてポリフィルを使用することをお勧めします。

まとめ

  • `URLSearchParams.getAll()`は、URLから同じキーを持つ全てのクエリパラメータを取得できる
  • 返り値は配列形式で、値が存在しない場合は空配列が返される
  • モダンブラウザでは広くサポートされている
  • フォームの複数選択やフィルタリングの実装に特に有用

このメソッドを使用することで、複数のクエリパラメータを効率的に処理できます。特にフォームデータの処理やAPI通信において、その真価を発揮するでしょう。