URLSearchParamsが便利

URLSearchParams使ってみた

URLSearchParamsを使ってみました。
その結果、URLのパラメータを追加する際に非常に便利だと感じたので、その使い方を共有したいと思います。

以前、パラメータを追加する際は次のように記述していました。

const name = encodeURI("taro");
const age = encodeURI("12");
const sampleURL = `https://example.com?name=${name}&age=${age}`;

しかし、この方法はパラメータが少ない場合には問題ありませんが、動的なOGPなどでパラメータが多くなると、コードが読みにくく、さらにはencodeURIを個別に実行する手間もかかります。

URLSearchParamsを使用すると、次のように記述できます。

const sampleParams = new URLSearchParams();
sampleParams.set("name", "taro");
sampleParams.set("age", "12");
const sampleUrl = `https://example.com?${sampleParams.toString()}`;

console.log(sampleUrl); //https://example.com?name=taro&age=12

また、検索パラメーターはオブジェクトにすることも出来ます。

const sampleParamsObj = { name: "taro", age: "12" };
const sampleParams = new URLSearchParams(sampleParamsObj);
const sampleUrl = `https://example.com?${sampleParams.toString()}`;

console.log(sampleUrl); //https://example.com?name=taro&age=12

URLSearchParamsを使うことで、パラメータを簡潔に管理でき、toStringメソッドを使用してパラメータを適切な形式で取得できます。

どんなメソッドがあるか

URLSearchParamsにどんなメソッドがあるか、使うときに迷いそうなもののみ簡単にまとめてみます。

追加する系

append()メソッド

パラーメータのkeyの重複が可能で、検索パラメーターとして追加する。

set() メソッド

パラーメータのkeyの重複は不可で被った場合は後から設定されてものが値となり、検索パラメーターとして追加する。

イテレータ取得系

keys() メソッド,values() メソッドentries() メソッド

それぞれ、キー、バリュー、キー/値のペアを反復処理できるイテレーターを返す。
キー、バリュー、キー/値のペアはすべて文字列。

value取得系

get() メソッド

指定された検索パラメーターに関連付けられた最初の値を返します。

getAll() メソッド

指定された検索パラメーターに関連付けられたすべての値を配列として返します。

感想

今までパラメータのアレコレは手動で頑張っていたので、すごく便利だなと思いました。
今後の開発で役立てていきたいと思います。

参考文献

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