URL エンコード・デコード（encodeURIComponent / 日本語対応）

URLエンコード・デコードをその場で確認。encodeURIComponentとencodeURIの違いを切り替えて比較でき、不正な%シーケンスはエラー表示します。スペースを+にする変換や、URL全体からクエリをkey=valueの表に分解する機能も搭載。

使い方

エンコード方式（encodeURIComponent / encodeURI）を選びます。
「元の文字列」に入力すると「エンコード後」欄に即座に反映され、逆に「エンコード後」を書き換えると「元の文字列」側がデコードされます。
URLをまるごと下の欄に貼り付けると、クエリ文字列を key と値（デコード後）の表に分解して表示します。

仕組み・根拠

encodeURIComponentとencodeURIはECMAScript（ECMA-262）のグローバル関数で、RFC 3986が定めるURIの予約文字（reserved characters）の扱いが異なります。encodeURIComponentはA-Z a-z 0-9 - _ . ! ~ * ' ( )以外の文字をすべて%XX形式にパーセントエンコードするため、クエリの値やパスの1セグメントなど「URLの部品」を安全に組み立てるのに向いています。一方encodeURIは; / ? : @ & = + $ , #のようなURL構造上意味を持つ区切り文字はそのまま残すため、すでに組み立て済みのURL全体をエンコードする用途に向いています。

現場の落とし穴: RFC 3986のパーセントエンコードでは半角スペースは%20ですが、HTMLフォーム送信の標準application/x-www-form-urlencoded（WHATWG URL仕様）ではスペースは+になります。両者を混同すると、クエリ中の+をスペースに戻し忘れたり、逆にファイルパスの+を誤ってスペース変換してしまうバグになります。「スペースを+にする」は、どちらの規格で扱うかを切り替えるためのものです。

よくある質問

Q. デコードで「不正な%エスケープシーケンス」と出ます。

A. %の直後が2桁の16進数になっていない（例: %GGや文字列末尾が%2で終わっている）場合に、decodeURIComponentがURIErrorを投げるための表示です。パーセント記号自体を文字として使いたい場合は%25とエンコードする必要があります。

Q. クエリの表に「（デコード失敗）」と出る項目があります。

A. そのキーまたは値の部分に不正な%エスケープが含まれているため、デコードできなかったことを示しています。元のURLの該当部分を確認してください。

Q. 日本語を含むURLはそのまま貼り付けて大丈夫ですか？

A. はい。URLオブジェクトでの解析に失敗した場合は?以降を単純な文字列として分解するフォールバックを行うため、パーセントエンコード前の日本語入りURLでもクエリの分解自体は可能です。