JavaScriptでURLのクエリパラメータが存在するかどうかを確認する方法について解説します。`URLSearchParams.has()`メソッドを使用することで、簡単にクエリパラメータの存在確認が可能です。

URLSearchParams.has()の基本的な使い方

// URLからクエリパラメータを取得
const params = new URLSearchParams(window.location.search);

// パラメータの存在確認
const hasParam = params.has('keyword');
console.log(hasParam); // true または false

具体的な使用例

例えば、以下のようなURLがあるとします：

`https://example.com?name=john&age=25`

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

// nameパラメータの存在確認
console.log(params.has('name')); // true

// ageパラメータの存在確認
console.log(params.has('age')); // true

// 存在しないパラメータの確認
console.log(params.has('email')); // false

注意点

1. 大文字小文字は区別されます

console.log(params.has('Name')); // false（'name'とは異なる）

2. 空の値も存在すると判定されます

// https://example.com?empty=
console.log(params.has('empty')); // true

ブラウザ互換性

`URLSearchParams`は以下のブラウザでサポートされています：

  • Chrome 49以降
  • Firefox 44以降
  • Safari 10.1以降
  • Edge 17以降

古いブラウザをサポートする必要がある場合は、以下のような代替方法があります：

function hasQueryParam(name) {
    const params = new RegExp('[?&]' + name + '=([^&#]*)').exec(window.location.href);
    return params !== null;
}

まとめ

`URLSearchParams.has()`は、クエリパラメータの存在確認を簡単に行える便利なメソッドです。モダンブラウザでは広くサポートされており、コードの可読性も高いため、積極的に活用することをお勧めします。

拡張コード例として、複数のパラメータを一度に確認する方法も紹介します：

function checkMultipleParams(params, paramNames) {
    return paramNames.every(name => params.has(name));
}

const params = new URLSearchParams(window.location.search);
const requiredParams = ['name', 'age'];
const hasAllParams = checkMultipleParams(params, requiredParams);

このように、`URLSearchParams.has()`を使用することで、効率的にクエリパラメータの存在確認が可能になります。