このツールでできること
本ツールは、任意の文字列を %XX 形式のパーセントエンコード（URLエンコード）に変換したり、エンコード済み文字列を元のテキストへ復元したりするためのオンラインユーティリティです。日本語を含むクエリ文字列の組み立て、Webアプリのデバッグ、APIリクエストのパラメータ確認、ログ調査など、フロントエンド／バックエンドエンジニアが日常的に行う作業をブラウザだけで素早く片付けられます。入力した文字列は外部送信されず、すべてブラウザのJavaScriptで処理されるため、社内システムのトークン文字列やテスト用パラメータを貼り付けても安心です。
仕組み：RFC 3986とパーセントエンコード
URLの構文は RFC 3986（Uniform Resource Identifier: Generic Syntax）で規定されています。URLで使える文字は基本的にASCII範囲に限られ、その中でも「予約文字（reserved characters）」「非予約文字（unreserved characters）」「その他の文字」に分類されます。日本語・スペース・改行・絵文字といったASCII外の文字や、URL構文上の特別な意味を持つ記号は、そのままでは送れないためUTF-8でバイト列に変換し、各バイトを % ＋ 16進2桁で表現します。これがパーセントエンコードの正体です。
たとえば「東」はUTF-8で 0xE6 0x9D 0xB1 の3バイトに展開され、%E6%9D%B1 と表記されます。サーバー側でこの文字列を受け取ると、デコードしてバイト列を組み立て直し、UTF-8として「東」に戻します。このやり取りが正しく動くためには、送信側と受信側の文字コードが一致している必要があり、レガシーシステムでShift_JISのままエンコードされていると %93%8C のように違うバイト列になり、現代のUTF-8環境でデコードすると文字化けします。
エンコード対象になる文字一覧
| 分類 | 文字 | エンコード結果 | 備考 |
|---|---|---|---|
| 非予約文字 | A-Z / a-z / 0-9 | 変換しない | 常にそのまま使える |
| 非予約文字 | - _ . ~ | 変換しない | RFC 3986で安全と定義 |
| 予約文字 | : / ? # [ ] @ | %3A %2F %3F %23 %5B %5D %40 | URL構造上の意味あり。値に含めるならエンコード必須 |
| 予約文字 | ! $ & ' ( ) * + , ; = | %21 %24 %26 %27 %28 %29 %2A %2B %2C %3B %3D | クエリ区切り等で使われる |
| 特殊文字 | 半角スペース | %20 | クエリ部分では + でも代用される |
| 特殊文字 | 改行（LF / CRLF） | %0A / %0D%0A | メール本文などで頻出 |
| マルチバイト | 東（U+6771） | %E6%9D%B1 | UTF-8の3バイトをそれぞれ%表記 |
| マルチバイト | 絵文字（例：U+1F600） | %F0%9F%98%80 | サロゲートペアでも4バイトUTF-8で展開 |
encodeURI と encodeURIComponent の使い分け
JavaScriptのURLエンコードでよく混乱するのが、encodeURI と encodeURIComponent の違いです。本ツールは「クエリ値として安全に使えるか」を基準に、後者と同等の挙動でエンコードします。
| 関数 | エンコードしない文字 | 用途 |
|---|---|---|
encodeURI | A-Za-z0-9 - _ . ~ ! * ' ( ) ; , / ? : @ & = + $ # | URL全体の構造を維持してエンコード |
encodeURIComponent | A-Za-z0-9 - _ . ~ ! * ' ( ) | クエリ値・パスセグメントなど「URLの一部品」をエンコード |
例として https://example.com/search?q=東京&cat=A/B をそのまま組み立てたい場合、q の値を encodeURI でエンコードしても & や = がそのまま残るため、値の中にこれらが含まれると壊れます。値に対しては encodeURIComponent を使うのが鉄則です。
// 悪い例：& や = が値に混ざるとパラメータが壊れる
const url = `https://example.com/search?q=${encodeURI("Q&A=参考")}`;
// 良い例：値だけencodeURIComponentで包む
const params = new URLSearchParams({ q: "Q&A=参考", cat: "A/B" });
const url2 = `https://example.com/search?${params.toString()}`;
近年は URL / URLSearchParams オブジェクトを使えば、エンコード処理は自動で正しく行われます。手書きで文字列連結する時のリスクを避けるためにも、組み立てはブラウザ標準APIに任せるのが安全です。
使い方
- エンコード欄に変換したい文字列を貼り付け、出力欄に表示された結果を「コピー」ボタンで取得します。
- デコード欄に
%XX形式の文字列を貼り付けると、元のテキストに復元されます。+をスペースに変換するクエリ仕様には対応せず、純粋なパーセントデコードを行います。 - エンコード対象がURL全体の場合は、ホスト名やパス区切りの
/までエンコードされる点にご注意ください。クエリ値だけ変換したい場合は、値の部分だけを切り出して入力してください。 - 「すべてクリア」を押すと、入出力欄を一括で空にできます。
実務でよくあるトラブルと対処
- 日本語URLが文字化けする：UTF-8でエンコードされたURLを、Shift_JIS前提の古いシステムでデコードすると壊れます。サーバーの文字コード設定（
Content-Type: text/html; charset=UTF-8）と、WebサーバーのAddDefaultCharset設定を合わせて確認してください。 - クエリパラメータの
&が消える：値の中に&が含まれているのに、encodeURIだけで処理して送信しているケース。encodeURIComponentまたはURLSearchParamsを使うと正しく%26に変換されます。 - メール本文の改行が
%0D%0Aとして届く：mailto:リンクで本文を渡す場合、改行は%0A（LF）か%0D%0A（CRLF）にエンコードします。スマホのメーラーによって解釈が異なるので、両方で実機確認するのが安全です。 - 二重エンコードで
%2520のような文字列が出る：すでにエンコード済みの値を、もう一度encodeURIComponentに掛けると%自体が%25に変換されてしまいます。リダイレクト処理やフレームワークのミドルウェアで二重に掛かりやすいので、生値とエンコード済み値の境界をコード内で明示する習慣をつけてください。 - QRコードや短縮URLサービスでスペースが
+になっている：application/x-www-form-urlencoded仕様ではスペースを+で表現しますが、URLパス部分では%20が正です。+をそのままパスに含めると、サーバーによっては「プラス記号」として解釈されデコードされません。
セキュリティと運用上の注意
URLエンコードはあくまで「文字をURLで安全に運ぶ」ための仕組みであり、暗号化や改ざん防止の機能はありません。アクセストークンやセッションIDをURLに含めると、ブラウザ履歴・Refererヘッダ・サーバーログにそのまま残るため、機密情報はクエリではなくHTTPヘッダやリクエストボディに載せるのが基本です。本ツールで変換した文字列を取り扱う際は、コピー先のチャットやチケット管理システムに残る点にもご留意ください。
