URLSearchParamsを積極的に使いたい

きっかけ

fetch関数などURLを扱う際に、パラメータにキーとバリューを設定するケースが多々あると思います。それに関して開発時にChatGPTがご指南してくれたURLSearchParamsはなかなか便利だなと思って、ブログに残したいと思い作成しました。

URLSearchParamsを使わない書き方

URLを自分の思い通りに加工する際、以前はテンプレートリテラルを使って下記の様に記述していました。

example1.js

const country = encodeURI("germany");
const city = encodeURI("berlin");
const sampleURL = `https://example.com?country=${country}&city=${city}`;

特にこの部分

?country=${country}&city=${city}

なんか面倒だよなと思っていました。
また下記の様にパラメータが多くなると正直見やすくないし、記述も手間がかかっていました。
(参考：wikipedia api)

example2.js

const endpoint = `https://ja.wikipedia.org/w/api.php?action=query&format=json&list=random&rnnamespace=0&rnlimit=1&origin=*`

そのようなときにURLSearchParamsは有効です。

URLSearchParamsを使う書き方

URLSearchParamsは検索パラメータをオブジェクトで定義してから使用することができます。
example1.jsは下記の様に書き換えることができます。

example1.js

const endpoint = "https://example.com";
const　obj = {
    country: "germany",
    city: "berlin"
};
const params = new URLSearchParams(obj);
const sampleUrl = `${endpoint}?${params.toString()}`;
console.log(sampleUrl); // https://example.com?country=germany&city=berlin`;

またexample2.jsは下記の様に書き換えることができます。

example2.js

const endpoint = "https://ja.wikipedia.org/w/api.php";
const obj = {
    action: "query",
    format: "json",
    list: "random",
    rnnamespace: 0, 
    rnlimit: 1,
};
const params = new URLSearchParams(obj);
const sampleUrl = `${endpoint}?${params.toString()}`;
console.log(sampleUrl); // https://ja.wikipedia.org/w/api.php?action=query&format=json&list=random&rnnamespace=0&rnlimit=1&origin=*;

パラメータが多くなってもとても読みやすいかつurlの書き損じを防止できるところもメリットだと思います。
今後もこうした方がよりよいコードになるかもという記事が書ければいいなと思います。

引用

https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams