URLクエリ文字列ビルダー
キーと値のペアからクエリパラメーター付きURLを作成します。フォームエンコード（スペースは+）とRFC 3986（%20）に対応し、既存URLのパラメーターを取り込むこともできます。
https://example.com/search?q=coffee+%26+tea&page=2
既存の URL からパラメーターを取り込む
URLクエリビルダーとは？
クエリビルダーは、ベースURLとキーと値のペアのリストを、正しくエンコードされたURLに変換します。HTMLフォームエンコーディング（URLSearchParamsのようにスペースを+にする）と、厳密なRFC 3986のパーセントエンコーディング（スペースを%20にする）を選べ、既存URLのパラメーターを取り込んで編集することもできます。
URLクエリビルダーの使い方
https://example.com/searchのようなベースURLを入力します。- キーと値の行を入力します。Add parameterで行を追加し、×で削除します。
- エンコード方式を選びます。
- 生成されたURLをコピーします。既存のリンクを編集するには「Import parameters from an existing URL」を開きます。
例
https://example.com/search, q = coffee & tea, page = 2
https://example.com/search?q=coffee+%26+tea&page=2
RFC 3986エンコードでは https://example.com/search?q=coffee%20%26%20tea&page=2 となります。
URLクエリビルダーを使うべき場面
&、=、スペースなどの特殊文字を手でエンコードせずに、API呼び出し、トラッキングリンク、テスト用URLを組み立てるときに使います。既存URLのパラメーターを読み取るだけなら、URLパーサーのほうが手早く済みます。
URLクエリビルダーの仕組み
キーが空の行はスキップされ、値はちょうど1回だけエンコードされます。フォームエンコードは URLSearchParams.toString() を使い、RFC 3986モードは encodeURIComponent を使って、さらに ! ' ( ) * もエスケープします。ベースURLにすでにあるクエリ文字列は置き換えられ、#フラグメントは末尾に保持されます。取り込みでは、URLを ? と # で分割し、URLSearchParamsでペアをデコードします。
一般的な使用例
- 値に&や=を含む検索URLを作る。
- UTMタグ付きのキャンペーンリンクを作る。
- APIテスト用にエンコード済みのGETリクエストを準備する。
- 長いURLの1つのパラメーターだけを、ほかを壊さずに編集する。
よくある質問
スペースは+と%20のどちらにすべきですか。
クエリ文字列では、ほとんどのサーバーがどちらも理解します。+はHTMLフォームエンコーディング由来で、%20は汎用のURIエンコーディングです。受信側が一般的なWebフレームワークでない場合は、%20のほうが安全です。
同じキーを繰り返せますか。
はい。tag=a と tag=b のように、同じキーの行を複数追加でき、順序は保持されます。
ASCII以外の文字に対応していますか。
はい。UTF-8のパーセントエスケープとしてエンコードされます（例: ế は %E1%BA%BF になります）。