【JS応用｜初心者向け】URLから特定のパラメータを簡単にチェック！URLSearchParams.hasの活用術

2026.08.13

導入：なぜURLSearchParams.hasが必要なのか？

Web開発をしていると、「URLのクエリパラメータに特定のキーが含まれているか」を確認したい場面がよくあります。例えば、「特定のキャンペーンIDがある場合だけ専用のバナーを表示したい」といったケースです。従来は文字列を分割して検索していましたが、URLSearchParams.hasを使えば、もっとスマートに、そして確実にチェックできるようになります。

基礎知識：URLSearchParamsとは？

URLSearchParamsは、Webブラウザに標準で備わっている「クエリ文字列を扱いやすくするための便利な道具箱」のようなAPIです。URLの末尾にある `?id=123&type=premium` といった文字列を解析し、プログラムから操作しやすくしてくれます。その中でも has()メソッド は、「指定したキーが存在するかどうか」を真偽値（true または false）で返してくれる、非常にシンプルな判定ツールです。

実装：URLSearchParams.hasの使い方

使い方は非常に簡単です。以下の3ステップで完了します。
1. 現在のURL、または解析したい文字列から URLSearchParams オブジェクトを作成する。
2. hasメソッドに調べたいキー名を渡す。
3. 戻り値（true/false）を使って条件分岐を行う。

サンプルプログラム：クエリの有無を判定するコード

以下のコードをコピーして、ブラウザのコンソールやJavaScriptファイルで試してみてください。

// 1. サンプルURL（本来は location.search などを使います）
const urlString = "https://example.com/?ref=twitter&ad_id=999";
const params = new URLSearchParams(urlString.split('?')[1]);

// 2. hasを使って「ref」というパラメータがあるか確認
if (params.has('ref')) {
    console.log("SNS経由でのアクセスです！");
} else {
    console.log("SNS経由ではありません。");
}

// 3. 存在しないパラメータ「user」を確認
if (params.has('user')) {
    console.log("ユーザーIDが見つかりました。");
} else {
    console.log("ユーザーIDは設定されていません。");
}

応用・注意点：現場で役立つポイント

注意点1：大文字と小文字は区別される
URLSearchParamsは厳密です。`ID`と`id`は別物として扱われます。URL設計と照らし合わせる際は注意してください。

注意点2：値が空でもtrueになる
`?key=` のように値が空の状態でも、キー自体が存在していれば has()は true を返します。「値が存在するか」ではなく「キーが存在するか」を確認するメソッドであることを覚えておきましょう。

現場でのヒント：
もし現在のページURLを扱いたい場合は、わざわざ文字列を分割する必要はありません。`const params = new URLSearchParams(window.location.search);` と書くだけで、現在のページのパラメータを即座にチェックできます。ぜひ活用してみてください。

スポンサーリンク
タイトルとURLをコピーしました