URL エンコーダー（パーセントエンコーディング）

文字列を URL エンコードする方法

1. テキストまたは URL にテキストを入力するか貼り付けます。出力は入力に合わせて更新されます。
2. エンコード の下でモードを選びます。
   • コンポーネント（encodeURIComponent）：クエリの値 1 つ、フォームのフィールド、パスのセグメント 1 つに。
   • URL 全体（encodeURI）：スペースや非 ASCII 文字を含む完全な URL に。
   • フォームデータ（空白を + に）：application/x-www-form-urlencoded のボディや、HTML フォームと同じ方式で作るクエリ文字列に。
   • すべての文字：英字も含めすべてのバイトをパーセントエンコードします。デコーダーのテスト用です。
3. 受け取る側のシステムがレガシーなエンコードを想定していない限り、文字コード は UTF-8 のままにしてください。
4. 値のリストをまとめてエンコードするには 1 行ずつ処理 にチェックを入れ、出力をコピー します。入れ替え を押すと結果がデコーダーに送られ、往復変換を確認できます。

完全な URL を入力すると、スキーム、ホスト、パス、各クエリパラメータ、フラグメントにも分解され、入出力欄の下の表に表示されます。

encodeURIComponent、encodeURI、フォームエンコードの違い

同じ入力 a b&c=d/é?#+ を、よく使われる 3 つの方式で比べます。

コンポーネント でエスケープされないのは A–Z a–z 0–9 - _ . ! ~ * ' ( ) だけです。URL 全体 はさらに ; / ? : @ & = + $ , # も残します。これらは URL の構造を作る文字なので、それを含む値は保護できません。フォームデータ が残すのは英字、数字、- _ . * だけで、スペースは + と書きます。

典型的なバグは、URL 全体 のエンコードで URL を組み立てることです。?q=C++ & Go では + と & が残り、サーバーは q=C と余計なパラメータを受け取ります。値は コンポーネント でエンコードしてください：?q=C%2B%2B%20%26%20Go。

スペース、プラス記号、その他の問題児

URL に入れる Base64 は、+、/、= の問題がよく起こるケースです。コンポーネントとしてパーセントエンコードするか、これらの文字を使わない Base64URL に切り替えてください。

UTF-8 以外の文字コード

パーセントエンコーディングはバイト単位で働くので、結果は文字コードで決まります。é は UTF-8 なら %C3%A9、Windows-1252 や ISO-8859-1 なら %E9 です。最近のブラウザや API は UTF-8 を使いますが、古い PHP アプリケーション、一部の決済ゲートウェイ、レガシーな社内システムは今も Latin-1 や Windows-1252 を想定しており、日本のサイトでは Shift_JIS のこともあります。文字コード で相手に合わせてください。選んだ文字コードに存在しない文字は表現できないので、出力にそうした文字がないか確認してください。

コードでの URL エンコード

encodeURIComponent("a b&c")              // "a%20b%26c"
new URLSearchParams({ q: "C++ & Go" }).toString()   // "q=C%2B%2B+%26+Go"

from urllib.parse import quote, quote_plus, urlencode
quote("/files/a b.txt")            # '/files/a%20b.txt'  (keeps / by default)
quote("/files/a b.txt", safe="")   # '%2Ffiles%2Fa%20b.txt'
quote_plus("a b&c")                # 'a+b%26c'
urlencode({"q": "C++ & Go"})       # 'q=C%2B%2B+%26+Go'

Python の quote は、safe="" を渡さない限り / を残します。値をエンコードするときによく驚かされる点です。ほかの言語では、PHP の rawurlencode は %20、urlencode は + を使います。Java の URLEncoder.encode は + を使うフォームエンコードです。Go には url.PathEscape（%20）と url.QueryEscape（+）があります。encodeURIComponent は ! ' ( ) * をそのまま残すので、RFC 3986 に厳密に従った出力が必要なら、後から置き換えてください。

const strict = s => encodeURIComponent(s).replace(/[!'()*]/g,
  c => "%" + c.charCodeAt(0).toString(16).toUpperCase());

JavaScript 側については JavaScript の Base64 のページ で詳しく解説しています。逆変換には URL デコーダー を使ってください。

よくある質問