【JavaScript】URLパラメータを取得して処理を分岐する方法

ウェブページで動的な表示やフィルター処理を行いたいとき、URLパラメータを活用することでJavaScriptから簡単に制御できます。本記事では、URLSearchParams を使ってパラメータを取得し、値に応じた処理を行う実装方法を紹介します。

URLパラメータとは？

URLパラメータとは、URLの末尾に ?key=value という形式で付与される追加情報のことです。複数ある場合は & で繋げます。

https://example.com/page.html?category=news&id=123

この例では category パラメータと id パラメータが存在します。

URLパラメータの取得方法（基本）

JavaScriptでは URLSearchParams オブジェクトを使うことで、簡単にパラメータの値を取得できます。

const params = new URLSearchParams(window.location.search);

const category = params.get('category'); // "news"
const id = params.get('id');             // "123"

get() メソッドは、指定したキーの最初の値を返します。該当するキーが存在しない場合は null を返します。

取得したパラメータで処理を分岐する

取得した値に応じて、ページの表示や動作を変えることができます。以下は、category の値によって表示エリアの内容を変更する例です。

<div id="message">デフォルト表示です</div>

const params = new URLSearchParams(window.location.search);
const category = params.get('category');

if (category === 'news') {
  document.getElementById('message').textContent = 'ニュースカテゴリが選択されました';
} else if (category === 'blog') {
  document.getElementById('message').textContent = 'ブログカテゴリが選択されました';
} else {
  document.getElementById('message').textContent = 'その他のカテゴリです';
}

パラメータが存在するかどうかの判定

存在チェックは has() メソッドを使うと簡単です。

if (params.has('category')) {
  console.log('categoryパラメータがあります');
} else {
  console.log('categoryパラメータがありません');
}

複数の同名パラメータを取得する方法

同じキーが複数回出現する場合（例：?tag=js&tag=css）は getAll() で取得します。

const tags = params.getAll('tag'); // ['js', 'css']

応用：パラメータが指定されていない場合にリダイレクトする

if (!params.has('id')) {
  window.location.href = '/error.html';
}

まとめ

URLSearchParams を使えば、URLからのパラメータ取得と条件分岐が非常にスムーズに行えます。検索フィルター、ダイナミック表示、ABテスト、トラッキング用途など、さまざまな場面で活用できます。