URLエンコード（パーセントエンコーディング）の使い方と encodeURIComponent の違い

URL（URI）に日本語や記号・スペースを含める際のパーセントエンコーディング（Percent-Encoding）の解説と実装コードです。

1. URLエンコード / デコード ツール

テキストのURLエンコードおよび復元（デコード）がブラウザ上で即座に行えます。

---

2. JavaScriptでの使い分け：encodeURIComponent vs encodeURI

関数	対象	予約語 (: / ? # & =) の扱い	主な用途
encodeURIComponent()	パラメータの値	すべてエンコード	クエリ文字列の値 (例: ?q=検索語)
encodeURI()	URL全体	保留 (エンコードしない)	フルURL全体の日本語部分を変換

① encodeURIComponent() のコード例（推奨）

パラメータの値として & や = が含まれている場合、構造が崩れないようにエスケープします。

const keyword = "React & Vue";
const param = encodeURIComponent(keyword);
console.log(param); // "React%20%26%20Vue"

const fullUrl = `https://example.com/search?q=${param}`;
console.log(fullUrl); 
// "https://example.com/search?q=React%20%26%20Vue"

② encodeURI() のコード例

URL構造そのものを維持しつつ、パスに含まれる日本語のみをエンコードします。

const url = "https://example.com/カテゴリ/Web開発";
console.log(encodeURI(url));
// "https://example.com/%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA/Web%E9%96%8B%E7%99%BA"

---

3. モダンJavaScriptでのベストプラクティス：URLSearchParams

手動で文字列結合を行うよりも、URLSearchParams クラスを使用すると自動的に適切なエンコードが適用されるため、バグを予防できます。

const params = new URLSearchParams({
  q: "React & Vue",
  page: 1,
  sort: "newest"
});

console.log(params.toString());
// "q=React+%26+Vue&page=1&sort=newest"

const finalUrl = `https://example.com/api?${params}`;