URL エンコード/デコード
URL の予約文字や非 ASCII 文字を %xx 形式に変換、または逆変換します。encodeURIComponent と encodeURI の挙動を切替可能。日本語などマルチバイト文字も UTF-8 ベースで正しく扱います。
よく使う組み合わせ
直近の入力
履歴はあなたのブラウザにのみ保存されます。サーバーに送信されません。 設定
こんなときに使う
クエリパラメータに日本語を入れる
?q=こんにちは のような日本語を含む URL を生成します。コンポーネントモードで encodeURIComponent 相当のエスケープになります。
https://example.com/search?q=%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF URL を含む URL(埋め込みリダイレクト)を作る
OAuth / SAML の RelayState や redirect_uri に別の URL を埋め込むケース。コンポーネントモードで二重エンコードしないように注意します。
?redirect=https%3A%2F%2Fexample.com%2Fcallback ログに記録された URL を人間可読に戻す
Web サーバーログには percent-encoded のまま記録されることが多く、デコードして読むと検索キーワードや遷移経路が分かりやすくなります。
%E6%97%A5%E6%9C%AC%E8%AA%9E → 日本語 メール / Slack に貼る前に URL を整える
% を含む URL は一部のクライアントで自動デコードされ、リンクが壊れる場合があります。事前に確認します。
API の x-www-form-urlencoded ボディを組み立てる
Content-Type: application/x-www-form-urlencoded のリクエストボディに値を入れるとき、各値を URL エンコードします。
key1=value1&key2=%E5%80%A4%E4%BA%8C コンポーネントと URL 全体のエンコードの違いを確認する
URL 全体エンコード(encodeURI)はスキーマや : / ? & などを残し、コンポーネントエンコード(encodeURIComponent)はそれらもエスケープします。役割の違いをこのツールで実演できます。
よくあるエラーと対処
URIError: URI malformed - 原因
- % の後ろが 16 進 2 文字でない、もしくは無効なシーケンスがあります。例: %ZZ や末尾だけの %。
- 対処
- % を含めたい場合は %25 にエスケープしてください。デコード前に文字列を確認しましょう。
+ がスペースに変換される/されない - 原因
- x-www-form-urlencoded では + がスペース、percent-encoding(RFC 3986)では + はそのままです。混同するとデコード結果が変わります。
- 対処
- 用途を確認し、フォーム形式なら + → %20 に置換してから decodeURIComponent にかけるなど対処します。
二重エンコードされてしまった - 原因
- 既にエンコードされた文字列を再度エンコードすると %25... のように % 自体がエスケープされます。
- 対処
- エンコード前の生文字列を渡すように、データの取り回しを見直してください。
日本語が文字化けする - 原因
- UTF-8 以外の文字コード(Shift_JIS 等)でエンコードされた値を UTF-8 として decodeURIComponent しています。
- 対処
- 元の文字コードを確認し、必要なら文字コード変換ツールを併用してください。
CLI / 他言語でやる方法
node -e "console.log(encodeURIComponent('日本語'))" decodeURIComponent でデコード。
python -c "import urllib.parse; print(urllib.parse.quote('日本語'))" デコードは urllib.parse.unquote。
echo '日本語' | jq -sRr @uri @uri フィルタで encodeURIComponent 相当。
よくある質問
▶ 「コンポーネント」と「URL 全体」の違いは?
▶ RFC 3986 と HTML フォーム(application/x-www-form-urlencoded)は同じ?
▶ 日本語はどう扱われますか?
▶ ASCII 範囲なのにエスケープされる文字は?
▶ % を文字としてそのまま入れるには?
▶ エンコードしないと困るケースは?
▶ ブラウザのアドレスバーは自動でデコードして表示しますが、コピーすると?
▶ URL-safe Base64 とは違うのですか?
もっと深く知る
公式ドキュメント / 仕様
※ Amazon へのリンクはアフィリエイトリンク(Amazon アソシエイト)を含みます。