URLのパラメータを複数（2つ以上）つけるときの注意点

URLに複数のパラメータ（クエリストリング）をつける場面がよくあります。

パラメータが1つの場合は、こんな感じですね。

https://example.com/api?param=x

本記事は2つ以上のクエリパラメータが付く場合の繋げ方についてです。

URLのパラメータを複数（2つ以上）つなげる場合

URLのパラメータを複数（2つ以上）つなげる際、? の後に最初のパラメータをつけ、以降のパラメータは & で区切ります。

const baseUrl = "https://example.com/api";
const param1 = "value1";
const param2 = "value2";
const param3 = "value3";

const fullUrl = `${baseUrl}?param1=${param1}&param2=${param2}&param3=${param3}`;
console.log(fullUrl);
// 出力: https://example.com/api?param1=value1&param2=value2&param3=value3

これが、下のようになっているとうまくいきません。

?param1=value1?param2=value2  // NG：?で接続
?param1=value1?&param2=value2 // NG：?&で接続
&param1=value1&param2=value2  // NG：最初のパラメータの頭が&

URLの長さやパラメータの数は注意すべき？

URLにつけるパラメータの数には基本制限はありません。

ただ、Googleのジョン・ミューラー氏によれば、URLは2,000文字以内にしておくことが推奨されています。

とはいえ、これはあくまで「管理しやすいように」といった観点からの推奨であり、ブラウザの仕様等で制限があるわけではありません。また、いくらパラメータをつけても2,000文字以上のURLになることは滅多にないかと思われますので、あまり気にしなくても良いかもしれませんね。