Curious TechieDev Toolbox
すべてのガイド/Web標準8 min read

URLエンコード(パーセントエンコーディング)の仕組み

RFC 3986規格、予約文字の役割、UTF-8バイト列の16進数エスケープ、およびクエリ文字列の安全性。

重要ポイント (要約)
  • パーセントエンコーディングは、URIで使用できない文字を %HH 形式の16進数バイト列に変換します(RFC 3986)。
  • ?& などの予約文字はURIの構造を示すため、パラメータ値の中ではエスケープが必要です。
  • JavaScriptでは、パラメータ値には encodeURIComponent()、URI全体には encodeURI() を使い分けます。
  • 空白文字は標準では %20、フォーム送信では + に変換されることがあります。

URI(Uniform Resource Identifier)は、歴史的にUS-ASCII文字セットの限られたサブセットのみを直接扱えるよう設計されています。日本語などの多言語文字列、絵文字、特殊な記号をWeb上で安全に伝送するために使われるのがパーセントエンコーディング(URLエンコード)です。

1. なぜURLにはパーセントエンコーディングが必要なのか

RFC 3986で規格化されたパーセントエンコーディングは、URL構文上で許可されていない文字や曖昧なバイト値を、パーセント記号(%)とそれに続く2桁の16進数バイト値に置換します(例:半角スペース = %20)。

2. 予約文字と非予約文字の定義

  • 非予約文字 (Unreserved): A-Za-z0-9-_.~(エンコード不要でそのまま使用可能)。
  • 予約文字(区切り記号): :/?#[]@!$&'()*+,;=

3. encodeURI と encodeURIComponent の使い分け

URL全体の文字列を対象とし、プロトコル(https://)やパスのスラッシュ(/)をそのまま維持したい場合は encodeURI を使用します。一方、クエリパラメータの値(&= を含む検索語など)を安全に渡す場合は encodeURIComponent を使用します。

4. 空白文字の %20 と プラス(+)の違い

RFC 3986仕様では、URI内のスペースはすべて %20 と規定されています。スペースを + と表現する記法はHTMLフォーム送信の古い規格(application/x-www-form-urlencoded)に由来し、クエリ文字列内でのみ慣例的に解釈されます。