WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： K.K.
カテゴリー： プログラム >JavaScript

Webサイトによってはどこのページから遷移されたかによって、表示する内容や処理を分岐することがあります。
今回はJavaScriptにてURLパラメータの値を判定する方法をご紹介します。

URLパラメータとは？

URLパラメータ（またはクエリパラメータ）は、Webアドレス（URL）に付加される情報です。主にURLの後に「?」が付き、その後ろの値のペアで構成されます。複数のパラメータがある場合は、&で別の要素を区切ることも可能です。

実装方法

window.location.search

最も基本的な方法は、window.location.searchを使用することです。これは、URLのクエリ部分（?以降）を取得します。

const queryString = window.location.search; // URLのクエリ文字列を取得
console.log(queryString); // 取得したクエリ文字列をコンソールに出力

例として、URLが http://example.com/?name=John&age=30 の場合、queryString の値は “?name=John&age=30” となります。

パラメータを細かく解析する方法

取得したクエリ文字列をより細かく解析するには、次のようにします。

const urlParams = new URLSearchParams(window.location.search); // URLSearchParamsオブジェクトを作成し、クエリ文字列を解析
const name = urlParams.get('name'); // 'name'パラメータの値を取得
const age = urlParams.get('age'); // 'age'パラメータの値を取得

console.log(name); // 'name'の値をコンソールに出力
console.log(age); // 'age'の値をコンソールに出力

URLSearchParams オブジェクトは、クエリ文字列を操作するための便利なメソッドです。

すべてのパラメータを取得する方法

すべてのパラメータを一度に取得する場合、for…of ループを使用して URLSearchParams オブジェクトを反復処理できます。

const urlParams = new URLSearchParams(window.location.search); // URLSearchParamsオブジェクトを作成し、クエリ文字列を解析
for (const [key, value] of urlParams) { // URLSearchParamsオブジェクトをループで反復処理
  console.log(`${key}: ${value}`); // 各パラメータのキーと値をコンソールに出力
}

これにより、URL内のすべてのパラメータとその値がコンソールに出力されます。

まとめ

JavaScriptを使用してURLパラメータを取得する方法は比較的スムーズで、URLSearchParams を使用することで実現できます。URLパラメータによって表示を切り替えたりすることも可能なので、効果的に利用しましょう。