URL Encode Decode｜パーセントエンコードの変換と使い分け（encodeURI vs encodeURIComponent）

URL Encode HTTP
結論：30秒で URL エンコードを使い分ける
  • クエリの『値』: encodeURIComponent(value)（推奨・安全）
  • URL 『全体』: encodeURI(url)（: / ? を壊さない）
  • デコード: decodeURIComponent(encodedString)

1. オンライン URL エンコード / デコード

ブラウザ内でリアルタイムに相互変換を行います。入力データはサーバーに送信されません。

🔗 この場でURLエンコードを試す

2. JavaScript での使い分け・コード例

① クエリパラメータの値を安全にする (encodeURIComponent)

const param = "検索 キーワード & 特殊文字";
const url = `https://example.com/search?q=${encodeURIComponent(param)}`;
console.log(url);
// "https://example.com/search?q=%E6%A4%9C%E7%B4%A2%20%E3%82%AD%E3%83%BC%E3%83%AF%E3%83%BC%E3%83%89%20%26%20%E7%89%B9%E6%AE%8A%E6%96%87%E5%AD%97"

② URL 全体をエンコードする (encodeURI)

const rawUrl = "https://example.com/カテゴリ/商品?id=123";
const safeUrl = encodeURI(rawUrl);
console.log(safeUrl);
// "https://example.com/%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA/%E5%95%86%E5%93%81?id=123"

3. 関連ツール・記事