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

JavaScriptにおいて、URLに付与されたパラメータ（GETパラメータ）を取得する方法について説明します。

URLパラメータとは

URLパラメータとは、URLの疑問符（?）以降に付与されるキーと値のペアのことを指します。例えば、 というURLの場合、"q"と"page"がキー、"javascript"と"2"が値になります。

取得方法

方法1: URLSearchParamsオブジェクトを利用する

現代的なブラウザで推奨される方法です。

const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get('paramName'); // paramNameの値を取得

• get() メソッドで指定したキーの値を取得します。
• URLSearchParams オブジェクトを作成し、クエリ文字列を渡します。
• window.location.search で現在のURLのクエリ文字列部分を取得します。

方法2: 正規表現を利用する（従来の方法）

古いブラウザとの互換性を考慮する必要がある場合や、シンプルな処理で済む場合は、正規表現を利用することもできます。

function getParameterByName(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, '\\$&');
  const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
  const results = regex.exec(url);
  if (!results) ret   urn null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

co   nst paramValue = getParameterByName('paramName');

• decodeURIComponent でエンコードされた値をデコードします。
• 正規表現を用いてパラメータの値を抽出します。
• 引数 name に取得したいパラメータのキーを指定します。
• getParameterByName 関数が定義されています。

例

// URL: https://example.com/search?q=javascript&page=2

// 方法1
const urlParams = new URLSearchParams(window.location.search);
const query = urlParams.get('q');   // "javascript"
const page = urlParams.get('page'); // "2"

// 方法2
const query = getParameterByName('q');   // "javascript"
const page = getParameterByName('page'); // "2"

注意事項

• セキュリティ上の観点から、ユーザーが入力した値を直接URLパラメータとして使用することは避けるべきです。入力値を適切にサニタイズする必要があります。
• URLパラメータは文字列として扱われます。数値として扱う場合は、適切な型変換が必要です。

JavaScriptでURLパラメータを取得するコード例の詳細解説

const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get('paramName'); // paramNameの値を取得

• urlParams.get('paramName')
  
  • get() メソッドで、指定したキー（paramName）に対応する値を取得します。
• new URLSearchParams(window.location.search)
  
  • URLSearchParams: クエリ文字列を解析し、キーと値のペアを扱うためのオブジェクトです。

例

// URL: https://example.com/search?q=javascript&page=2

const urlParams = new URLSearchParams(window.location.search);
const query = urlParams.get('q');   // "javascript"
const page = urlParams.get('page'); // "2"

このコードでは、URLからqとpageという2つのパラメータを取得し、それぞれqueryとpageという変数に代入しています。

コード例2：正規表現を利用する

function getParameterByName(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, '\\$&');
  const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
  const results = regex.exec(url);
  if (!results) ret   urn null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

co   nst paramValue = getParameterByName('paramName');

• 正規表現
  
  • [?&]: ? または & のいずれかで始まる文字列にマッチします。
  • name: 指定したパラメータ名にマッチします。
  • (=([^&#]*)|&|#|$): = の後に任意の文字列（パラメータの値）が続くパターン、または &、#、もしくは文字列の終わりにマッチします。
• getParameterByName 関数
  
  • 引数として、取得したいパラメータのキーと、対象となるURLを受け取ります。
  • 正規表現を用いて、URLから指定したパラメータの値を抽出します。

正規表現は少し複雑ですが、URLのパラメータ部分を細かく解析する際に強力なツールとなります。

• 正規表現
  より柔軟な処理が可能ですが、複雑な場合があります。
• URLSearchParamsオブジェクト
  現代的な方法で、簡潔にURLパラメータを取得できます。

どちらの方法を選ぶかは、プロジェクトの要件や、利用するブラウザのバージョンなどによって異なります。

• セキュリティ
  ユーザーが入力した値を直接URLパラメータとして使用する場合には、XSSなどのセキュリティリスクに注意が必要です。適切なサニタイズ処理を行いましょう。
• 複数の値
  同じパラメータ名が複数ある場合、URLSearchParams.getAll() を使用して配列として取得できます。

さらに詳しく知りたい方へ

• JavaScriptの書籍
  より実践的な内容や、応用的な使い方について学ぶことができます。
• MDN Web Docs
  URLSearchParamsインターフェースの詳細な解説

自作関数による解析

• 柔軟性
  独自のロジックを組み込むことができます。
• シンプルな実装
  正規表現よりも簡潔なコードで実装できます。

function getQueryParams(qs) {
  qs = qs.split('+').join(' ');
  const params = {};
  const pairs = qs.split('&');
  for (let i = 0; i < pairs.length; i++) {
    const pair = pairs[i].split('=');
    const key = decodeURIComponent(pair[0]);
    const value = decodeURIComponent(pair[1] || '');
       params[key] = value;
  }
  return params;
}

const queryString = window.location.search.substring(1);
const params = getQueryParams(queryString);

このコードでは、クエリ文字列を&で分割し、さらに=でキーと値に分けることで、パラメータをオブジェクトとして取得しています。

ライブラリの利用

• Lodash
  _.get() や _.set() などの関数で、オブジェクト内の値を簡単に取得・設定できます。
• jQuery
  $.param() や $.ajax() など、URLパラメータを扱うための便利なメソッドを提供しています。

ES6以降の機能を利用したモダンな書き方

• reduce
  配列の要素を一つずつ処理し、最終的な結果を返すことができます。
• スプレッド構文
  配列を展開して、より簡潔な記述が可能になります。

const queryString = window.location.search.substring(1);
const params = queryString.split('&')
  .reduce((prev, curr) => {
    const [key, value] = curr.split('=');
    prev[decodeURIComponent(key)] = decodeURIComponent(value);
    return prev;
  }, {});

• サーバーサイド
  サーバーサイドでURLパラメータを取得し、クライアントサイドに渡すこともできます。
• ブラウザの機能
  一部のブラウザでは、URLパラメータを直接操作できる機能が提供されている場合があります。

どの方法を選ぶべきか

• 保守性
  コードの可読性や、他の開発者との連携性を考慮する必要があります。
• パフォーマンス
  大量のデータを扱う場合、パフォーマンスを考慮する必要があります。
• 柔軟性
  正規表現やライブラリがおすすめです。
• シンプルさ
  自作関数やURLSearchParamsオブジェクトがおすすめです。

状況に応じて最適な方法を選択してください。

注意点

• ブラウザの互換性
  古いブラウザでは、一部の機能がサポートされていない場合があります。
• エンコーディング
  URLエンコード/デコードを適切に行う必要があります。

URLパラメータを取得する方法には、様々な選択肢があります。それぞれの方法にはメリットとデメリットがあり、状況に応じて最適な方法を選ぶことが重要です。

• ライブラリ
  
  • 大規模なプロジェクトで、複数の開発者が関わる場合。
  • 既存のライブラリとの連携を強化したい場合。
• 正規表現
  
  • 複雑なパターンでパラメータを抽出したい場合。
  • 高度なカスタマイズが必要な場合。
• URLSearchParamsオブジェクト
  
  • モダンなブラウザで、簡潔にURLパラメータを取得したい場合。
  • 複数のパラメータを扱う場合。
• 自作関数
  
  • 小規模なプロジェクトで、シンプルな処理で済む場合。
  • 特定の要件に合わせたカスタマイズを行いたい場合。