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"
よくある質問（FAQ）
Q. JavaScriptでURLのクエリパラメータを取得するには？
A. new URLSearchParams(window.location.search)でパラメータオブジェクトが作れます。params.get(“key”)で特定キーの値を取得できます。
Q. 複数の同名パラメータを取得するには？
A. URLSearchParams.getAll(“key”)で同名パラメータの値を配列で取得できます。例：?color=red&color=blueの場合、getAll(“color”)は[“red”,”blue”]を返します。
Q. URLにパラメータを動的に追加・変更するには？
A. URLSearchParamsでパラメータを操作し、history.pushState()でURLを更新します。ページリロードなしにURLを変えることで、シェアや戻るボタンに対応したSPAルーティングが実現できます。
まとめ
以上、JavaScriptを使用してURLのクエリパラメータを取得する方法を紹介しました。URLSearchParamsを使用する方法はシンプルで直感的なため、特におすすめです。是非、自身のプロジェクトで活用してみてください。
