【JavaScript】URLのパラメータを取得する方法

Webアプリケーションやサイト開発において、URLのクエリパラメータを解析して利用することはよくあります。この記事では、JavaScriptを使用してURLのパラメータを取得する方法について紹介します。

URLSearchParamsを使用する方法

URLSearchParamsオブジェクトを使用すると、URLのクエリパラメータを簡単に解析し、取得することができます。以下に具体的な例を示します。

まず、現在のURLを取得し、それをURLSearchParamsオブジェクトに渡します。その後、getメソッドを使用して特定のパラメータの値を取得します。

// URLを取得
const url = new URL(window.location.href);

// URLSearchParamsオブジェクトを作成
const params = new URLSearchParams(url.search);

// パラメータの値を取得
const page = params.get('page');
const sort = params.get('sort');

console.log(page); // "2"
console.log(sort); // "desc"

クエリパラメータをオブジェクトとして取得する方法

次に、URLSearchParamsを使用して全てのクエリパラメータをオブジェクト形式で取得する方法を紹介します。

// URLを取得
const url = new URL(window.location.href);

// URLSearchParamsオブジェクトを作成
const params = new URLSearchParams(url.search);

// クエリパラメータをオブジェクトとして取得
const queryParams = {};
params.forEach((value, key) => {
  queryParams[key] = value;
});

console.log(queryParams); // { page: "2", sort: "desc" }

window.location.searchを使用する方法

window.location.searchを直接解析してクエリパラメータを取得する方法もあります。この方法はやや手動での処理が必要ですが、簡単に実装できます。

// クエリパラメータを取得
const queryString = window.location.search;

// クエリパラメータを解析
const urlParams = new URLSearchParams(queryString);

// パラメータの値を取得
const page = urlParams.get('page');
const sort = urlParams.get('sort');

console.log(page); // "2"
console.log(sort); // "desc"

まとめ

以上、JavaScriptを使用してURLのクエリパラメータを取得する方法を紹介しました。URLSearchParamsを使用する方法はシンプルで直感的なため、特におすすめです。是非、自身のプロジェクトで活用してみてください。