URLエンコードとデコード——開発者向け解説
URLにスペースを入力したり、キリル文字の単語を入れたり、アドレス自体ではなくデータの一部として使いたいアンパサンドを含めたりすると、何かが折り合わなくなります。ウェブが安全な転送を保証するのは、小さくて予測可能なASCII文字セットだけです。それ以外はすべて、ルーター・サーバー・ブラウザが共通で理解できる形式でラップする必要があります。その形式がパーセントエンコーディング——一般にURLエンコーディングと呼ばれるもの——であり、このページではブラウザ内で直接テキストを双方向に変換できます。
パーセントエンコーディングとは何か
ルールは機械的でわかりやすいものです。リテラルとして使えない文字はすべて、%記号とその文字のバイト値を表す2桁の16進数に置き換えられます。スペースは%20になります。プラス記号は%2Bに。番号記号は%23になります。UTF-8の下でほとんどの非ASCII文字がそうであるように、文字が複数バイトにマッピングされる場合は、複数のトリプレットが連続します。ユーロ記号は%E2%82%ACになります。デコードはこの逆の処理で、各トリプレットを元のバイトに読み戻します。
この規則はURIの仕様（RFC 3986）で定義されており、意図的に退屈なものになっています。退屈であることがポイントです。地球上のすべての行儀の良いHTTPクライアントとサーバーが同じルールを実装しているため、ある場所で正しくエンコードされたリンクは他のすべての場所でも完全な状態で届きます。
なぜ必要なのか
URLには2種類の文字が含まれており、それぞれまったく異なる役割を果たします。予約文字——/・?・#・&・=・:など——は構造的な役割を持ちます。パーサーにパスがどこで終わりクエリ文字列が始まるか、またはあるパラメーターが終わり次が始まるかを伝えます。実際のデータにこれらの記号が含まれている場合は、パーサーが句読点と混同しないようにエンコードする必要があります。A&B/2024のような注文番号をそのままクエリ文字列に入れると、2つのパラメーターとパスセグメントとして誤読されます。
次に安全でない文字や非ASCII文字があります。スペース・引用符・山括弧・アクセント付き文字・絵文字・その他の通常のASCII範囲外のあらゆるもの。これらは文字通りURLに現れるべきではありません。転送中に壊れるか、定義された表現がないかのどちらかです。これらをエンコードすることで、リンクが結果を運任せにするのではなく、クリーンで予測可能な状態を保ちます。
実際の作業で登場する場面
クエリ文字列が典型的なケースです。?key=...に追加するすべての値は、ユーザー入力が構造を壊さないようにエンコードする必要があります。同様に、application/x-www-form-urlencodedとして送信されるHTMLフォームの送信にも当てはまります——ブラウザはフィールド値を自動的にエンコードし、歴史的な慣習としてスペースを%20ではなく+に変換します。非ラテン文字のタイトルを持つページへのリンクを構築するとき、APIリクエストを手動で組み立てるとき、リダイレクト先をパラメーターとして渡すとき、アドレスバーでは正常に見えるリクエストがサーバーで文字化けして届く原因をデバッグするときにも出会います。
encodeURI と encodeURIComponent の違い
JavaScriptには2つのエンコーダーが用意されており、間違ったほうを選ぶことがよくあるバグの原因です。違いはスコープにあります。encodeURIComponentは1つのデータ片——たとえばクエリの値1つ——に使います。予約文字の/・?・:・@・&・=・+・#を含むほぼすべてをエンコードします。データがそれらの記号を通常のテキストとして含む可能性がある場合に、まさに必要な動作です。
encodeURIはそのまま機能させたいアドレス全体に使います。構造的な文字はそのままにするため、URLをまとめているスラッシュ・コロン・疑問符は生き残ります。完全なURLがあり、スペースや非ASCII文字だけを整理したい場合に使います。より大きなURLに値を挿入するときは常にencodeURIComponentを使いましょう。シンプルな経験則：リンク全体はencodeURIで、埋め込む部分はencodeURIComponentでエンコードします。
すべてはあなたのマシン上で処理される
このツールはブラウザ内で完全に動作します。貼り付けたテキストは標準的なルーティンでローカルにエンコードまたはデコードされ、サーバーには転送されません。そのため、トークン・署名付きパラメーター・その他ネットワーク越しに送りたくないものも安全に使えます。他のテキスト変換が必要な場合は、Base64コンバーターがすぐ隣にあり、日常的なヘルパーとしてデベロッパーツールの全セットも利用できます。
よくある質問
URLの%20は何を意味しますか？
エンコードされたスペースです。スペース文字はURLにそのまま使えないため、パーセント記号とスペースのバイト値である16進数の20に置き換えられます。
%20の代わりにプラス記号が表示されるのはなぜですか？
application/x-www-form-urlencodedタイプのHTMLフォームデータは歴史的な慣習としてスペースをプラス記号でエンコードします。通常のパスやクエリではスペースは%20としてエンコードされます。どちらも適切なコンテキストではスペースにデコードされます。
encodeURIの代わりにencodeURIComponentを使うべき場面はいつですか？
クエリパラメーターなど、URLに挿入する単一の値には予約文字もエンコードするencodeURIComponentを使います。スラッシュ・コロン・疑問符を保持したい完全なアドレスにはencodeURIを使います。
URLエンコーディングはデータの意味を変えますか？
いいえ。エンコーディングは完全に可逆です。結果をデコードすると、両端で同じ文字セットが使われている限り、元のテキストがバイト単位で正確に戻ります。
アクセント付き文字や絵文字などの非ASCII文字はどう処理されますか？
まずUTF-8バイトに変換され、各バイトがそれぞれ独自のパーセントトリプレットになります。そのため、1つのアクセント付き文字や絵文字がエンコード出力で複数のトリプレットに展開されることがあります。
このツールを使うとテキストがサーバーに送信されますか？
いいえ。エンコードとデコードはすべてブラウザ内で行われます。貼り付けたものはアップロードされないため、プライベートまたは機密性の高い文字列にも安全に使えます。