パーセントエンコードされたURLの解析とデコード
URLパーセントエンコーディング（URLエンコーディング）を理解し、URLで特殊文字がどのようにエスケープされるか、encodeURIとencodeURIComponentの使い分け、エンコードされたURLを正しくデコードする方法を学びます。
Query Parameters
詳細な説明
URLパーセントエンコーディング
パーセントエンコーディング（URLエンコーディングとも呼ばれる）は、安全でない文字を%の後に文字のバイト値を表す2桁の16進数で置き換えます。これによりURLが有効なASCII文字のみを含むことが保証されます。
仕組み
元の値: https://example.com/search?q=hello world&lang=日本語
エンコード: https://example.com/search?q=hello%20world&lang=%E6%97%A5%E6%9C%AC%E8%AA%9E
予約文字と非予約文字
非予約文字（エンコード不要）：
A-Z a-z 0-9 - _ . ~
予約文字（URLで特別な意味を持つ）：
: / ? # [ ] @ ! $ & ' ( ) * + , ; =
JavaScriptエンコーディング関数
| 関数 | エンコードする | エンコードしない |
|---|---|---|
encodeURI() |
スペース、非ASCII | : / ? # [ ] @ ! $ & ' ( ) * + , ; = |
encodeURIComponent() |
ほぼすべて | A-Z a-z 0-9 - _ . ~ ! ' ( ) * |
いつどちらを使うか
encodeURI()— 完全なURLをエンコードする場合（URL構造を保持）encodeURIComponent()— 単一のパラメータ値をエンコードする場合URLSearchParams— クエリパラメータのエンコーディングを自動処理
よくあるエンコーディングの落とし穴
- 二重エンコード — すでにエンコードされたURLをエンコードすると
%20の代わりに%2520が生成される - +と%20 — クエリ文字列では
+はスペースを意味。パスではリテラルなプラスを意味 - UTF-8マルチバイト — 非ASCII文字は複数の
%XXシーケンスを生成 - デコードの不一致 — コンポーネントエンコードされた文字列に
decodeURI()を使用すると失敗する場合がある
ユースケース
URLエンコーディングはAPIリクエストの構築、リダイレクトURLの構成、URLでのユーザー生成コンテンツの処理、国際化ドメイン名の操作において重要です。エンコーディングの誤処理はバグの一般的な原因であり、壊れたリンク、失敗したAPI呼び出し、さらにはオープンリダイレクトなどのセキュリティ脆弱性が不正なURLエンコーディングから生じる可能性があります。