Webブラウザのアドレスバーで日本語を検索すると、こんなURLになることがあります。

https://example.com/search?q=%E6%97%A5%E6%9C%AC%E8%AA%9E

この %E6%97%A5... という部分が、URLエンコードされた「日本語」という文字列です。一見すると暗号のように見えますが、決まったルールで変換されているだけです。この記事では、URLエンコードの仕組みと、開発での正しい使い方を解説します。

URLエンコードとは？

URLエンコード（パーセントエンコーディング）とは、URLの中で使えない文字や特殊な意味を持つ文字を、安全に扱える形式に変換する仕組みです。

URLで使える文字はASCII文字の一部（英数字と一部の記号）に限られています。日本語・中国語・スペース・&・=・?などの文字はURLの中でそのまま使うと問題が起きるため、変換が必要です。

変換のルールはシンプルです。対象の文字をUTF-8でバイト列に変換し、各バイトを %XX（XXは16進数）の形式で表現します。

URLエンコードの変換ルール

具体的な変換例

  • 「日本語」→ %E6%97%A5%E6%9C%AC%E8%AA%9E（UTF-8の3バイトをそれぞれ%XX表記）
  • スペース → %20（フォームのPOSTでは + になることも）
  • & → %26
  • = → %3D
  • ? → %3F
  • / → %2F

変換が不要な文字

英数字（A-Z / a-z / 0-9）と一部の記号（- _ . ~）はエンコードしなくてもURLで安全に使えます。これを「非予約文字」と呼びます。

実際の使い方

検索クエリをURLに含める

JavaScriptで検索クエリをURLパラメータに含める場合は encodeURIComponent() を使います。

const keyword = '日本語 検索';
const url = `https://example.com/search?q=${encodeURIComponent(keyword)}`;
// → https://example.com/search?q=%E6%97%A5%E6%9C%AC%E8%AA%9E%20%E6%A4%9C%E7%B4%A2

fetchでパラメータを渡す

複数のパラメータを扱う場合は URLSearchParams を使うと自動でエンコードしてくれます。

const params = new URLSearchParams({
  q: '日本語',
  lang: 'ja',
  page: '1'
});
const res = await fetch(`/api/search?${params}`);

フォームのPOST送信

HTMLフォームを method="post" で送信すると、入力値は自動でURLエンコードされてリクエストボディに含まれます（Content-Type: application/x-www-form-urlencoded）。この場合、スペースは + に変換されます。

よくある質問（FAQ）

encodeURIとencodeURIComponentの違いは何ですか？
encodeURI() はURL全体を対象にエンコードするため、/・?・&・#などのURLの構造を担う文字はエンコードしません。一方、encodeURIComponent() はパラメータの値などURLの一部をエンコードする用途で、これらの文字もすべてエンコードします。クエリパラメータの値を扱う場合は encodeURIComponent() を使うのが正解です。
スペースは %20 になりますか？ + になりますか？
場合によって異なります。URLのパス部分では %20、HTMLフォームのPOST（application/x-www-form-urlencoded）では + が使われます。URLSearchParams を使うと自動的に適切な形式で処理されます。サーバー側では両方の形式を正しくデコードできるように実装するのが一般的です。
URLエンコードを元に戻す（デコード）にはどうしますか？
JavaScriptでは decodeURIComponent('%E6%97%A5%E6%9C%AC%E8%AA%9E') で「日本語」に戻せます。ブラウザ上でパパッと確認したい場合はこのサイトのURLデコーダーが便利です。

まとめ

  • URLエンコードはURLで使えない文字を %XX 形式に変換する仕組み
  • 日本語などのUTF-8文字はバイト単位で16進数変換される
  • JavaScriptでパラメータを扱うときは encodeURIComponent() または URLSearchParams を使う
  • スペースは文脈によって %20 または + になる

URLエンコード・デコードをすぐに試したい場合は以下のツールをどうぞ。