URLクエリパラメータのエンコード

URLクエリ文字列はURL内の?の後にキーバリュー形式のパラメータデータを運びます。クエリパラメータの適切なエンコードは不可欠です。キーと値の両方が、クエリ文字列自体の構文と衝突する文字を含む可能性があるためです（=がキーと値を分離し、&がペアを分離する）。

クエリ文字列の構造:

https://example.com/search?query=hello+world&category=tech&page=1
                           |--- key=value ---|--- key=value ---|------|

クエリパラメータのエンコードルール:

1. 各キーをencodeURIComponent()でエンコードする
2. 各値をencodeURIComponent()でエンコードする
3. キーバリューペアを=で結合する
4. ペアを&で結合する

JavaScriptでの実装:

// 手動アプローチ（複雑な値には非推奨）
const key = encodeURIComponent("search query");
const value = encodeURIComponent("Tom & Jerry");
const qs = `${key}=${value}`; // "search%20query=Tom%20%26%20Jerry"

// 推奨: URLSearchParams を使用
const params = new URLSearchParams({
  "search query": "Tom & Jerry",
  category: "movies & tv",
  page: "1"
});
params.toString();
// "search+query=Tom+%26+Jerry&category=movies+%26+tv&page=1"

URLSearchParams と encodeURIComponent の違い:

• URLSearchParamsはスペースを+としてエンコード（フォームエンコード慣例）
• encodeURIComponent()はスペースを%20としてエンコード（RFC 3986）
• どちらもクエリ文字列で有効。サーバーは通常どちらも受け入れる

クエリパラメータでの配列の処理:

// キーの繰り返し（最も普遍的）
const params = new URLSearchParams();
["js", "ts", "py"].forEach(v => params.append("lang", v));
params.toString(); // "lang=js&lang=ts&lang=py"

// 括弧記法（PHP/Railsの慣例）
// URLSearchParams はこれをサポートしないため手動で行う
const bracket = ["js", "ts", "py"]
  .map(v => `lang[]=${encodeURIComponent(v)}`)
  .join("&");
// "lang[]=js&lang[]=ts&lang[]=py"

URLの最大長: HTTP仕様に正式な制限はありませんが、実用上の制限があります：Internet Explorerは2,083文字をサポート、ほとんどの現代ブラウザは32,000文字以上を処理しますが、多くのサーバーは8,192文字で上限を設けています。大きなデータペイロードにはPOSTの使用を検討し、クエリ文字列を適度に短く保ちましょう。

落とし穴: エンコードせずに文字列連結でクエリ文字列を構築してはいけません。ユーザー名や検索語のような一見安全な値でも、&、=、#、その他の予約文字を含む可能性があり、URL構造を暗黙的に破壊します。