URL変換

パーセントエンコードのしくみ

URL に使える文字は、英数字といくつかの記号に限られています。それ以外の文字（日本語や空白、意味を持つ記号）を入れるときは、文字を UTF-8 のバイト列にして、1 バイトずつ % と 16 進数 2 桁で書きます。これがパーセントエンコード（URL エンコード）です。

あ     → %E3%81%82   （UTF-8 で 3 バイト）
空白   → %20
&      → %26

日本語 1 文字はたいてい 3 バイトなので、エンコードすると 9 文字になります。日本語を含む URL が長くなるのはこのためです。

「パラメータ用」と「URL全体用」の違い

JavaScript には2つの関数があり、このツールの選択肢もそれに対応しています。違いは / ? & = # のような URL の区切り記号を変換するかどうかです。

入力: a b&c=d/e?f#g+h

パラメータ用 (encodeURIComponent)
  → a%20b%26c%3Dd%2Fe%3Ff%23g%2Bh

URL全体用 (encodeURI)
  https://ex.com/a b?q=あ&x=1#h
  → https://ex.com/a%20b?q=%E3%81%82&x=1#h

クエリの値に & や = を含む文字列を入れるときに「URL全体用」を使うと、値の途中でパラメータが区切られてしまいます。値を1つずつ包むときは「パラメータ用」、すでに組み立てた URL の日本語や空白だけを直したいときは「URL全体用」と覚えておくと迷いません。

どちらでも変換されない記号もあります。「パラメータ用」でも ! ' ( ) * - . _ ~ はそのまま残ります。

空白は %20 か + か

空白の書き方は2通りあります。URL の規格どおりなら %20 ですが、HTML のフォームが送るクエリ（application/x-www-form-urlencoded）では空白を + で表します。JavaScript の URLSearchParams もこちらに従います。

new URLSearchParams({ q: 'a b' }).toString()   → q=a+b
decodeURIComponent('a+b')                      → a+b（+ のまま）
new URLSearchParams('q=a+b').get('q')          → a b

このツールのデコードは decodeURIComponent と同じく + を空白に戻しません。フォームから来たクエリの + が残ったら、それは元は空白です。逆に、値として本当に + を送りたいときは %2B にしないと、受け取る側で空白に化けることがあります。

二重エンコードを見分ける

エンコード済みの文字列をもう一度エンコードすると、% 自体が %25 に変わります。%25E3%2581%2582 のように %25 が並んでいたら、二重にエンコードされています。

あ → %E3%81%82 → %25E3%2581%2582

リダイレクトを何度か経由した URL やログに残った値では、二重・三重のエンコードがよく起きます。「戻らなくなるまでデコード」を使うと、途中の段階も含めて元の文字まで戻せます。

デコードできないときは

「不正なパーセントエンコードが含まれています」と出るときは、次のどちらかが考えられます。

• % のあとが 16 進 2 桁になっていない: 「100%達成」のような文字列や、途中で切れた URL です。% を %25 にしてから戻してください。
• UTF-8 以外でエンコードされている: 古いサイトの URL には、Shift_JIS でエンコードされたものがあります。「あ」なら UTF-8 の %E3%81%82 ではなく %82%A0 になり、UTF-8 として読めないためデコードできません。