こんにちは、みなさん！今日は、コードのセマンティクスを大幅に改善する簡単なヒントを共有します。

フロントエンド開発でもバックエンド開発でも、パラメータを使用して URL を構築する必要があることがよくありますよね?

以前はリクエストの URL を次のように書いていました:

const url = `http://localhost:3000/endpoint/param1=${var1}&param2=${var2}&param3=${var3}`

この URL は読みにくく、管理しにくいことに同意します。どの部分がパラメータで、どの部分が変数で、どの部分が単なる Javascript 構文であるかを常に識別する必要があります。

この意味論的な問題に対処するために、同じタスクをより効率的かつ洗練された方法で実行する URL コンストラクター を発見しました。

これで、同じコードを次のように書き直すことができます:

const url = new URL('http://localhost:3000/endpoint')

url.searchParams.set('param1', var1)
url.searchParams.set('param2', var2)
url.searchParams.set('param3', var3)

コードは、何をしているのかを明確に示しています。最初の行でベース URL を作成し、後続の行で必要な検索パラメータを追加します。

終わり。ここで、変数 url には以前と同じ検索パラメータが含まれていますが、URL クラスを使用しているため、コードがはるかにシンプルで保守しやすくなっています。

あなたはどうですか？以前に URL クラスを使用したことがありますか?もしかしたら別の目的のためでしょうか？あなたの経験をぜひ私と共有してください。