URLエンコード完全ガイド：パーセントエンコードの原理と実践

URL構造のおさらい

https://user:pass@www.example.com:8080/path/to/page?name=张三&age=25#section
└──┬──┘ └────┬────┘ └──────┬──────┘└─┬─┘└────┬─────┘└──────┬──────┘└──┬──┘
  scheme   userinfo     host      port    path        query     fragment

エンコードが必要なのは path、query、fragment のみです。scheme と host にはそれぞれのルールがあります。

---

なぜ URL エンコードが必要か

URL に含められるのは ASCII の印字可能文字だけです。次の文字はエンコードが必須です。

文字	エンコード	理由
スペース	%20 または +	生のスペースは不可
中国語「张三」	%E5%BC%A0%E4%B8%89	非 ASCII
&	%26	query の区切り
=	%3D	key=value の区切り
#	%23	fragment の目印
?	%3F	query の開始
/	%2F	path の区切り

---

ToolsKu の URL エンコード／デコードツール

手順

1. URL エンコード／デコードツール を開く
2. URL またはテキストを入力
3. encode または decode を選択
4. 結果を確認

encodeURI と encodeURIComponent

関数	エンコードしない	用途
encodeURI()	: / ? # [ ] @ ! $ & ' ( ) * + , ; =	URL 全体
encodeURIComponent()	A-Z a-z 0-9 - _ . ! ~ * ' ( )	URL パラメータの値

const base = 'https://example.com/search';

// ✅ パラメータ値をエンコード
const url = `${base}?q=${encodeURIComponent('hello world')}`;
// → https://example.com/search?q=hello%20world

// ❌ URL 全体をエンコード
const wrong = encodeURIComponent('https://example.com/search?q=test');
// → https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dtest

---

実践シナリオ

中国語の query パラメータ

元: https://search.com/q=前端开发
後: https://search.com/q=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91

URL パラメータの解析

URL 解析ツール で URL を分解し、query パラメータを表で表示：

入力: https://api.com/users?name=张三&role=admin&page=1
出力:
  name  = 张三
  role  = admin
  page  = 1

国際化ドメイン (IDN)

中国語ドメイン「工具库.com」の Punycode：

工具库.com → xn--6qq986b3xl.com

Punycode ツール で相互変換。

Base64 で URL パラメータをエンコード

JSON オブジェクトを URL パラメータにする場合：

{"user":"admin","role":"editor"}
  → Base64 → eyJ1c2VyIjoiYWRtaW4iLCJyb2xlIjoiZWRpdG9yIn0=
  → URL encode → eyJ1c2VyIjoiYWRtaW4iLCJyb2xlIjoiZWRpdG9yIn0%3D

---

よくあるミス

二重エンコード

元: hello world
1回: hello%20world  ✅
2回: hello%2520world  ❌ (1回デコード → hello%20world)

URL 全体をエンコード

encodeURIComponent はパラメータ値にだけ使い、URL 全体には使わない。

スペースは + か %20 か

• query パラメータ：+ と %20 は同等
• path：%20 のみ
• 推奨：常に %20

---

まとめ

URL エンコードは Web 開発の基本です。encodeURI と encodeURIComponent の違い、中国語パラメータの UTF-8、国際化ドメインの Punycode を理解すれば、デバッグ時間を大幅に減らせます。ToolsKu には URL エンコード／デコード、URL 解析、Punycode があります。