【javascript】動的なパラメータを含むURLを生成する

外部データをやり取りする際、データの取得はGETメソッドで行う場面が多いと思います。
GETメソッドの場合、特定の文字や情報を検索したり、データ形式を指定したりするためにパラメータを用いる事があります。

パラメータが少なければ、一つ一つ結合しても問題ありません。
しかし、パラメータが動的で多くなる場合は、単純に結合するのはあまり得策ではありません。
かといって、URLを生成するライブラリを導入してまで効率化する程の事でもありません。

今回は、javascriptの関数だけで、動的なプロパティに対応する方法について記述します。

実装方法

例えば、次のようなURLを作りたいとします。

https://example.com/search?format=json&count=3&title=（検索文字）

URLのパラメーターには次の要素が入ってきます。

パラメータ名	設定値
format	json
count	3
title	（検索したい文字）

方針

理想としては、次のようなオブジェクトを用意して、&(key)=(value)と言う文字を連結させていけば動的に対応できます。
また、運用する際もプロパティの管理が楽になります。

let urlParameter = {
    format: "json",
    count: 3,
    title: "日本語"
};

javascriptの関数だけで対応する場合は次のような手順で処理する方法があります。

Object.entriesで配列に置換
配列に対してmap処理で&(key)=(value)に変える
変えた配列をjoinでを結合する

developer.mozilla.org

ソースコード

例えば、次のようにする事でパラメータを含むURLを生成できます。

cost baseUrl = "https://example.com/search"

// URLに付与するパラメーター
let urlParameter = {
    format: "json",
    count: 3,
    title: "日本語"
};

// パラメータ作成
// 改行はしていますが、全て処理がつながっています。  
let url = baseUrl + "?" +
    Object.entries(urlParameter)
        .map((e) => {
            let key = e[0];
            let value = encodeURI(e[1]);
            return `${key}=${value}`;
        })
        .join("&");
        
console.log(url)

//     https://example.com/search?format=json&count=3&title=%E6%97%A5%E6%9C%AC%E8%AA%9E