JavaScriptでURLパラメータを取得する方法

URLパラメータ（クエリ文字列とも呼ばれる）は、Web開発において重要な要素であり、ページ間でのデータ受け渡しやクライアントからサーバーへのデータ送信を可能にします。検索機能の構築、フォーム送信の処理、ユーザー設定の追跡など、これらのパラメータを抽出・活用する方法を知ることは必須です。

この記事では、JavaScriptを使用してURLパラメータを取得する最も効果的な方法を、最新のアプローチから従来のソリューションまで紹介します。

URLパラメータの理解

URLパラメータは、URL内のクエスチョンマーク（?）の後に現れ、キー・値のペアとして形式化されています：

https://example.com/page?name=john&id=123

この例では、nameがjohnの値を持ち、idが123の値を持つ2つのパラメータがあります。

最新のアプローチ：URLSearchParams

最新のブラウザでURLパラメータを処理する最もシンプルで信頼性の高い方法は、URLSearchParamsインターフェースを使用することです。

基本的な使用方法

// URL例: https://example.com/page?product=shirt&color=blue&size=m

// クエリ文字列を取得
const queryString = window.location.search;

// クエリ文字列をパース
const urlParams = new URLSearchParams(queryString);

// 特定のパラメータ値を取得
const product = urlParams.get('product'); // "shirt"
const color = urlParams.get('color');     // "blue"

パラメータの存在確認

// パラメータが存在するかチェック
if (urlParams.has('product')) {
  // パラメータが存在する
  console.log('productパラメータが存在します');
}

複数値の処理

パラメータがURL内で複数回現れる場合、すべての値を取得できます：

// URL: https://example.com/page?tag=javascript&tag=frontend

// パラメータのすべての値を取得
const tags = urlParams.getAll('tag'); // ["javascript", "frontend"]

パラメータの反復処理

URLSearchParamsは、すべてのパラメータを操作するためのイテレーターメソッドを提供します：

// すべてのパラメータキーを反復処理
for (const key of urlParams.keys()) {
  console.log(key);
}

// すべてのパラメータ値を反復処理
for (const value of urlParams.values()) {
  console.log(value);
}

// すべてのパラメータエントリ（キー・値のペア）を反復処理
for (const [key, value] of urlParams.entries()) {
  console.log(`${key}: ${value}`);
}

従来のアプローチ：カスタム関数

URLSearchParamsをサポートしていない古いブラウザでは、カスタム関数を作成できます：

function getUrlParam(param) {
  const queryString = window.location.search.substring(1);
  const urlParams = queryString.split('&');
  
  for (let i = 0; i < urlParams.length; i++) {
    const paramPair = urlParams[i].split('=');
    if (paramPair[0] === param) {
      return decodeURIComponent(paramPair[1] || "");
    }
  }
  return null;
}

// 使用方法
const productValue = getUrlParam('product');

一般的なエッジケースの処理

エンコードされた文字

URLパラメータには、しばしばエンコードされた文字が含まれます。例えば、スペースは%20としてエンコードされます：

// URL: https://example.com/search?query=web%20development

const query = urlParams.get('query');
console.log(query); // "web development" (自動的にデコードされる)

カスタム関数を使用する場合は、これらのエンコードされた文字を正しく処理するためにdecodeURIComponent()を使用することを確認してください。

存在しないパラメータ

パラメータを使用する前に、常に存在するかチェックしてください：

const size = urlParams.has('size') ? urlParams.get('size') : 'default';

空のパラメータ

パラメータは値なしで存在する場合があります：

// URL: https://example.com/page?newsletter=&theme=dark

const newsletter = urlParams.get('newsletter'); // "" (空文字列)
const hasNewsletter = urlParams.has('newsletter'); // true

完全な例：すべてのURLパラメータを取得

すべてのURLパラメータをオブジェクトとして取得する包括的な関数は以下の通りです：

function getAllUrlParams() {
  const params = {};
  const queryString = window.location.search.substring(1);
  
  if (queryString) {
    const pairs = queryString.split('&');
    
    for (const pair of pairs) {
      const [key, value] = pair.split('=');
      
      // パラメータに値がない場合、trueに設定
      if (typeof value === 'undefined') {
        params[key] = true;
      } else {
        // すでにこのパラメータがある場合、配列に変換
        if (params[key]) {
          if (!Array.isArray(params[key])) {
            params[key] = [params[key]];
          }
          params[key].push(decodeURIComponent(value));
        } else {
          params[key] = decodeURIComponent(value);
        }
      }
    }
  }
  
  return params;
}

ブラウザ互換性

URLSearchParamsは、以下を含むすべての最新ブラウザでサポートされています：

• Chrome 49+
• Firefox 44+
• Safari 10.1+
• Edge 17+

Internet Explorerなどの古いブラウザでは、ポリフィルまたはカスタム関数アプローチを使用する必要があります。

パフォーマンスの考慮事項

ほとんどのアプリケーションでは、メソッド間のパフォーマンスの違いは無視できます。ただし：

1. URLSearchParamsは最適化されており、ブラウザベンダーによって維持されています
2. カスタム関数は特定のニーズに合わせて調整できます
3. 単一のパラメータのみを取得する場合、シンプルな正規表現の方が高速な場合があります

セキュリティに関する注意

URLパラメータはブラウザのアドレスバーに表示され、機密情報には安全ではないことを覚えておいてください。アプリケーションで使用する前に、常にパラメータ値を検証・サニタイズしてください。

まとめ

URLSearchParamsインターフェースは、JavaScriptでURLパラメータを操作するためのクリーンで標準化された方法を提供します。ほとんどの最新のWebアプリケーションでは、これが推奨されるアプローチです。レガシーブラウザサポートが必要な場合は、カスタム関数を使用して、少し多くのコードで同じ機能を提供できます。

URLパラメータを効果的に抽出・活用する方法を理解することで、より動的でインタラクティブなWebアプリケーションを構築できます。

よくある質問