検索クエリをエンコードする
元の文字列
hello world & more
エンコード後
hello%20world%20%26%20more
スペースは %20 に、& は %26 になります。& をそのまま残すとクエリパラメータの区切り文字と誤解されてしまうためです。
URL エンコーダ / デコーダ
URL コンポーネントを安全にエンコード / デコード。
最終更新
デコード済みテキストを貼り付けて開始
エンコード済み
パーセントエンコード/デコードされた出力がここに表示されます — Unicode対応。
URL エンコーダーとは？
URL エンコーダー（パーセントエンコーダー、URI エンコーダーとも呼ばれます）は、URL 内で予約されていたり安全でない文字を、% と 2 桁の 16 進数の組み合わせに置き換えるツールです。クエリ文字列の組み立て、パスのエスケープ、空白や非 ASCII 文字を含む URL の共有、リダイレクト周りのデバッグなど、出番は意外と多いはずです。
URL に使える文字は ASCII のごく一部に限られています。空白、アクセント付き文字、絵文字、データとして使う ? # & = のような予約記号は、ブラウザからサーバーまで壊れずに届くようにパーセントエンコードしておく必要があります。
JavaScript には 2 種類のエンコード関数があります。encodeURI は URL の構造（/ ? # & など）を残し、encodeURIComponent は予約文字をすべてエンコードします。クエリ文字列に差し込む *値* には encodeURIComponent、URL 全体をそのまま使いたいときは encodeURI というのが基本の使い分けです。
URL エンコードを通じて学べること
- パーセントエンコーディングは 1 バイトを
%+ 16 進数 2 桁に置き換える仕組み。たとえば半角スペースは%20になります。 - 予約文字（
:/?#&=+）は URL の構造上の意味を持つため、区切り文字ではなくデータとして使うときはエンコードが必須です。 - 非 ASCII 文字（アクセント記号、絵文字、キリル文字、漢字・かな）はまず UTF-8 のバイト列に変換され、その各バイトがパーセントエンコードされます。
URL のエンコード / デコード手順
方向を選ぶ
生の文字列を URL セーフにしたいなら Encode、
%を含むエンコード済みの文字列を元に戻したいなら Decode を選びます。エンコードモードを選ぶ
クエリ文字列の値には
encodeURIComponent（予約文字を全部エンコード）、URL 全体を扱いたいときはencodeURI（構造を保持）を選びます。入力を貼り付ける
生の文字列、もしくはエンコード済みの URL を貼り付けます。複数行をまとめて入力すれば一括デコードも可能です。
結果をコピー
エンコード結果やデコード結果をコピーして使います。変換はすべてブラウザ内で行われるため、URL に含まれる秘密情報が外部に送信されることはありません。
よく使う URL エンコード早見表
実際によく見かけるエンコード結果のまとめ。予約文字の意味は RFC 3986 に基づいています。
| 文字 | エンコード後 | 理由 |
|---|---|---|
| 半角スペース | %20 | URL にスペースは入れられない |
! | %21 | サーバーによっては予約扱い |
# | %23 | フラグメントの開始記号 |
$ | %24 | 予約文字 |
& | %26 | クエリパラメータの区切り |
+ | %2B | フォームエンコードでは半角スペースを表す |
/ | %2F | パスの区切り文字 |
: | %3A | スキームとホストの区切り |
= | %3D | クエリ文字列のキーと値の区切り |
? | %3F | クエリ文字列の開始記号 |
@ | %40 | ユーザー情報とホストの区切り |
| UTF-8 バイト | %C3%A9 | 非 ASCII の各バイトを順にエンコード |
試してみたい URL エンコード例
非 ASCII 文字をエンコードする
元の文字列
café
エンコード後
caf%C3%A9
é は UTF-8 で 0xC3 0xA9 という 2 バイト列になるため、1 文字に対して %XX が *2 つ* 並ぶ形になります。
encodeURI と encodeURIComponent の違い
元の文字列
https://example.com/path?q=hello world
encodeURI
https://example.com/path?q=hello%20world
encodeURIComponent
https%3A%2F%2Fexample.com%2Fpath%3Fq%3Dhello%20world
encodeURI はスラッシュや ?、= といった URL の構造をそのまま残します。一方 encodeURIComponent は予約文字をすべてエンコードするので、クエリ文字列に差し込む値専用と覚えておくと安心です。URL 全体に対して使うのは NG。
URL エンコードでよくある失敗
- クエリ文字列の値に
encodeURIを使ってしまう。&や=がエンコードされず素通りするので、パラメータの解釈が壊れます。 - 二重エンコード。
%20のはずが%2520になっているのは、二重にエンコードしてしまった典型的なサインです。 +の扱い違い。application/x-www-form-urlencodedのボディでは半角スペースを意味しますが、URL のパスやクエリでは普通の+のままです。
URL エンコードに関する FAQ
URL エンコードとは何ですか？
URL エンコード（パーセントエンコーディング）は、URL 内で特別な意味を持つ文字や、そのままでは送信に向かない文字を、
% と 16 進数 2 桁の組み合わせに置き換えて表現する仕組みです。encodeURI と encodeURIComponent の違いは？
encodeURI は URL の構造を担う文字（/ ? # & = +）をエンコードしません。encodeURIComponent はそれらもすべてエンコードするので、クエリパラメータの値、パスセグメント、フラグメントなど URL に埋め込む *個別の値* にはこちらを使います。詳細は MDN の encodeURI と encodeURIComponent を参照してください。なぜ半角スペースは %20 になるのですか？
URL に半角スペースは含められないので、ASCII のスペース文字（16 進で
0x20）をパーセントエンコードした %20 で表現します。どんなときに URL エンコードすべきですか？
ユーザー入力や動的に決まる値を URL に埋め込むときは必ずエンコードします。クエリパラメータの値、パスセグメント、リダイレクト先、OAuth のパラメータなどが代表例です。生の入力が URL セーフだと決して思い込まないこと。
URL エンコードは元に戻せますか？
はい、それが URL デコードです。
decodeURI や decodeURIComponent、各種 URL デコーダーを使えばパーセントエンコードを解除して元の文字列を復元できます。