URLエンコード・デコード

こんな場面で

• チャットに貼られた「%」だらけのURLを読む — どこのページなのか、日本語部分を元に戻して確かめる。デコードを1回押すだけです。
• 計測パラメータ付きURLの中身を確認する — utm_source などの値に日本語が入っていると読めなくなるため、デコードして意図した値が入っているか見ます。
• 検索結果のURLから検索語を取り出す — q= の後ろをデコードすれば、何で検索された結果なのかが分かります。
• クエリの値を手で組み立てる — 日本語や記号を含む値を安全な形にしてから、URLに埋め込む。

%E3%81%82 は何を表しているのか

URLにそのまま書けるのは、英数字と一部の記号だけです。それ以外の文字は、いったんUTF-8のバイト列に直し、1バイトを「%」＋16進2桁で表します。ひらがなの「あ」はUTF-8で E3 81 82 の3バイトなので、%E3%81%82 という3つの組になります。

ひらがな・カタカナ・ふだん使う漢字はどれも3バイトなので、日本語1文字につき「%XX」が3つ並ぶのが目安です。「検索」なら %E6%A4%9C%E7%B4%A2 と6つ。日本語を含むURLが極端に長くなるのはこのためです。ただし絵文字や一部の拡張漢字は4バイトなので、1文字で4つになります（🍣 は %F0%9F%8D%A3）。

逆に、英数字と - _ . ~ は変換されずそのまま残ります。これはURLの仕様（RFC 3986）が「予約されない文字」として定めている範囲です。

2種類のエンコードの違い

• 文字列全体（encodeURIComponent）: : / ? & = なども含めてすべて変換します。クエリの「値」部分を作るとき向き。
• URL構造は保持（encodeURI）: http:// や区切り記号はそのままに、日本語やスペースだけを変換します。URL全体を安全にするとき向き。
• デコード: %エンコードされた文字列を元に戻します。不正な形式の場合はメッセージを表示します。
• 処理はブラウザ内で完結し、入力は送信されません。

初期表示のURLで比べてみてください。「URL構造は保持」を押すと、パスの「検索」が %E6%A4%9C%E7%B4%A2 に、値の「無料」が %E7%84%A1%E6%96%99 に変わる一方、https:// や ? & = は形を保ちます。「文字列全体」を押すと、その区切り記号まで %3A%2F%2F のように変換され、URLとしては機能しない文字列になります。URL全体を扱うなら前者、クエリの値ひとつだけを作るなら後者と覚えてください。

つまずきやすい点

• 二重エンコードに気づく目印は「%25」です — すでにエンコード済みの文字列をもう一度エンコードすると、「%」自体が %25 に変換されます。「あ」は %E3%81%82 ですが、二重になると %25E3%2581%2582 です。%25 が見えたらデコードを2回押してください。
• デコードすると「+」が半角スペースになります — フォーム送信の形式ではスペースを + で表す決まりがあり、このツールのデコードもその慣習に合わせています。そのため、本当にプラス記号を含む文字列をデコードするとスペースに変わってしまいます。プラス記号として残したいときは、あらかじめ %2B に置き換えてから貼ってください。
• エンコード側では「+」の扱いが2つで違います — 「文字列全体」では + は %2B になりますが、「URL構造は保持」では区切り記号の一種とみなされ + のまま残ります。
• デコードできないと言われる場合 — UTF-8として解釈できないバイト列が含まれています。古いシステムが出力したShift_JIS由来の %8C%EA のような並びが代表例で、このツールでは元に戻せません。また、% の後ろが16進2桁になっていない壊れた文字列でも同じメッセージが出ます。

よくある質問

関連ツール

クエリに載せる文字数を数えるなら 文字数カウント、%の後ろの16進を10進で確かめるなら 進数変換 へ。