URL をエンコード・デコードする方法

URL の中でスペースがあるべき場所に %20 が見えたり、アクセント付き文字があるべき場所に %C3%A9 が見えたりしたことがあれば、それが URL エンコーディングです。Web の基本的な仕組みのひとつで、これを理解しているとリンク切れ、API の問題、フォーム送信のデバッグに役立ちます。

URL エンコーディングが行うこと

URL に含めることができるのは、限られた安全な文字だけです:アルファベット(A〜Z、a〜z)、数字(0〜9)、いくつかの特殊文字(-、_、.、~)。それ以外 — スペース、アクセント文字、絵文字、&、=、#、? のような記号 — は安全な形式に変換する必要があります。

URL エンコーディング(パーセントエンコーディングとも)は、安全でない文字を % とそのバイトの 16 進数値に置き換えます:

URL エンコーディングが必要なとき

• 特殊文字を含むクエリパラメータ — price > 100 & category = shoes のようなクエリは URL で機能させるためにエンコードが必要です
• URL 内の非ラテン文字 — 他言語の名前、都市名、コンテンツはエンコードする必要があります
• API リクエスト — 手動で API 呼び出しを組み立てるとき、パラメータの値はたいていエンコードが必要です
• デバッグ — URL がうまく動かないときに、デコードすると本当の値が見えてきます

エンコード・デコードの方法

1. エンコードかデコードを選ぶ — 方向を選択します。クエリパラメータには encodeURIComponent、URL 全体には encodeURI を使ってください。
2. 入力を貼り付ける — テキストや URL を入力します。結果はその場で更新されます。
3. 結果をコピー — コード、API リクエスト、ブラウザで使用してください。

ヒント

• URL 全体ではなく値をエンコードする — URL 全体をエンコードすると、URL を構成するスラッシュやコロンもエンコードされてしまい、URL が壊れます。クエリパラメータ内の値だけをエンコードしましょう。
• 二重エンコードに注意 — すでにエンコード済みの文字列をエンコードすると %2520 のようなものが生成されます(% が %25 になる)。URL がおかしく見えるときは、二重にエンコードされていないか確認してください。
• デバッグにはデコード — API リクエストが失敗したり URL が読みにくく見えたりするときは、デコードして実際の値を確認してください。たいてい問題がすぐに見えてきます。
• 言語の組み込み関数を使う — 本番コードでは、手動エンコードではなく encodeURIComponent()(JavaScript)、urllib.parse.quote()(Python)、URLEncoder.encode()(Java)などを必ず使ってください。