【JavaScript】URLのクエリパラメーターの作り方と取得や削除する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptでURLのクエリパラメーターの作り方と取得や削除する方法を解説していきます。

1 URLのクエリパラメーターとは？
- 1.1 クエリパラメーターのルールは？
2 URLSearchParams() を使って、クエリパラメーターを作る方法
3 クエリパラメーターの作成と取得と削除(Set・Get・Delete)
4 クエリパラメーターを追加して、Redirectする
5 URLSearchParams.set() と URLSearchParams.append() の違い
6 【追記】クエリパラメーターに関する関連記事
7 Twitterやってます！Follow Me！
8 参考・引用
9 最近の投稿

URLのクエリパラメーターとは？

クエリ文字列（URLパラメーター）とは、サーバーに情報を送るためにURLの末尾につけ足す文字列（変数）のことです。

クエリパラメーターのルールは？

クエリパラメーターの形は、次のようにルールが決まっています。

パラメーターは、パスの後に「 ? 」を付けてから、書き始める。
各パラメーターは、その名前(key)と値(value)を「 = 」で繋げて記述する。
複数のパラメーターをつける場合は、パラメーター同士を「 & 」で区切る。
「 # 」記号で始まるページ内Linkを付ける場合は、すべてのクエリパラメーターよりも後につける。

URLSearchParams() を使って、クエリパラメーターを作る方法

クエリパラメーター(クエリ文字列)を作る際に、一番簡単に作れるのは、

URLSearchParams() & toString() を使用する方法です。

URLSearchParams.toString()

URLSearchParams インターフェイスの toString() メソッドは、URL での使用に適したクエリー文字列を返します。
引用元: MDN: URLSearchParams.toString()

次のように「 key=value 」のクエリパラメーター(クエリ文字列)をObjectの「 key:value 」として作成して、

new URLSearchParams() の引数に渡して、

URLSearchParams の toStringメソッドを呼び出すことで、クエリパラメーターを作成できます。

// [ 1. URLSearchParams() を使って、クエリパラメーターを作る方法 ]

// 1. Parameter-Object
const params = {
    keyword: "robotama",
    tag: "purupuru"
}

// 2. URLSearchParams-Instance
const urlSearchParam = new URLSearchParams(params).toString();

console.log({urlSearchParam});
    // {urlSearchParam: 'keyword=robotama&tag=purupuru'}

クエリパラメーターの作成と取得と削除(Set・Get・Delete)

URLSearchParamsは、クエリパラメーターを取り扱うためのClassであり、その親ClassはURL-Classです。

なので、次のようにURLのインスタンスを作成してから、searchParamsプロパティ(URLSearchParamsと同じ機能)を使って、

クエリパラメーターの作成と取得と削除(Set・Get・Delete)をすることができます。

// [ QueryParameter の Set・Get・Delete  ]

console.log(window.location);

// 1. 現在のURLからURL-Instance を生成する！
let url = new URL(window.location.href);

console.log({url});

console.log(url.href);
    // https://masanyon.com/


// 2. keyを指定して、queryParameterをSetする
url.searchParams.set('paramKey', 'paramVal');

// 同じKeyを指定すると、Valueは上書きされる。
url.searchParams.set('paramKey', 'robotamaVal');

console.log(url.href);
    // https://masanyon.com/?paramKey=paramVal


// 3. keyを指定して、queryParameterを取得する
const addParam = url.searchParams.get('paramKey');
console.log(addParam);


// 4. keyを指定して、queryParameterを削除する
url.searchParams.delete('paramKey');

console.log(url.href);
    // https://masanyon.com/

クエリパラメーターを追加して、Redirectする

次のSampleCodeでは、URLSearchParams の append() で、クエリパラメーターを追加した後に、

location.href を使って、クエリパラメーターを付与した状態のPageにRedirectしています。

// [ QueryParameter を追加して、RedirectするSample ] 

// 1. 現在のURLからURL-Instance を生成する！
let url2 = new URL(window.location.href);

console.log({url2});

if (!url2.searchParams.get('key')) {

    url2.searchParams.append('key', 'value');

    url2.searchParams.append('key', 'robotama-value');

    // 2. QueryParameterをSetした状態で、Redirectする。
    location.href = url2;

    console.log({url2});

    console.log(url2.href);
        // https://masanyon.com/?key=value&key=robotama-value
} else {

    console.log(url2.href);
    console.log(url2.searchParams.get('key'));
}