Published on

クエリパラメーターの作成にはURLSearchParamsを使おう

Authors

クエリパラメーター付きのURLパスを作成する時はどのように実装していますか？ まさか、文字列結合で作成しているということはありませんよね？

以前このような実装に出会したことがありますが、クエリパラメーターの数も多く非常に読みにくかった思い出があります。

sample1.js
const param1 = value1 !== undefined ? `param1=${value1}` : ''
const param2 = value2 !== undefined ? `param2=${value2}` : ''
const param3 = value3 !== undefined ? `param3=${value3}` : ''

const params = [
  param1,
  param2,
  param3
].filter((param: string) => param != '').join('&')

const pathWithParams = `/search?${params}`

さらに、予期せぬ値がパラメーターのバリューに入る可能性もあり、脆弱なコードにもなっているため推奨できる実装ではありません。例えば、value1がnullであるとき、param1=nullになる可能性があります。

そのため、クエリパラメーター付きのURLを作成するときは、URLSearchParamsインタフェースを使って実装することをおすすめします。

sample1.jsのコードを使って表現すると、このようになります。

const params = {}
if (value1) params[param1] = value1
if (value2) params[param2] = value2
if (value3) params[param3] = value3

const urlSearchParams = new URLSearchParams(params).toString()
const pathWithParams = `/search?${urlSearchParams}`

三項演算子でなくif文に変更したことと、filterとjoinを取り除きURLSearchParamsを採用したことで読みやすくなったのではないでしょうか。 param1=nullとなることもなくなったので、元のコードより安全になりました。