URL Encode Space (%20) - スペースのURLエンコード完全ガイド

URLにファイル名やユーザー入力をそのまま埋め込んだら、スペースのところでリンクが切れた ――よくあるトラブルです。url encode space(スペースのURLエンコード)は%20 という表記に置き換えるだけですが、クエリ文字列の + との 使い分けや encodeURIComponent と encodeURI の違いなど、 混同しやすいポイントが複数あります。この記事ではその仕組みと正しい実装方法を整理します。

Raw spaces are not valid in a URL, so they must be percent-encoded as %20. This guide covers why, when +is a valid alternative (and when it isn't), the difference between encodeURIComponent and encodeURI, and how to avoid the double-encoding bug that turns %20 into %2520.

TL;DR

• スペースの正式なパーセントエンコードは%20
• + は application/x-www-form-urlencoded だけで使える特殊な表記
• クエリパラメータの値はencodeURIComponentでエンコードする
• URL全体をそのまま保持したい時は encodeURI(構造記号はエンコードしない)
• すでにエンコード済みの文字列を再エンコードすると %2520 になる二重エンコードに注意

1. なぜスペースをそのままURLに書けないのか / Why raw spaces break URLs

URLの仕様(RFC 3986)では、使用できる文字が英数字と一部の記号(- . _ ~ など)に 限定されています。スペースはこの「安全な文字」の集合に含まれないため、そのまま使うと URLの区切りとして誤解釈されたり、ブラウザやサーバーによって挙動が変わったりします。 この問題を解決するのがパーセントエンコードです。

元の文字列: my file.txt
NG: https://example.com/my file.txt   (スペースがそのまま含まれ不正)
OK: https://example.com/my%20file.txt (%20でエンコード済み)

2. %20の仕組み / How %20 works

パーセントエンコードは「% + そのバイトの16進数2桁」という単純なルールです。 スペース(半角空白)のASCII/UTF-8コードは 0x20 なので、%20 になります。

3. %20 と + の使い分け / %20 vs. +

検索結果のURLなどで q=hello+world のように + がスペースとして 表示されているのを見たことがあるはずです。これは application/x-www-form-urlencodedという、HTMLフォーム送信由来の別ルールに基づく慣習で、パーセントエンコードそのものではありません。

迷ったら常に%20を使うのが安全です。%20はどちらの文脈でも正しく スペースとして解釈されますが、+はパス部分では文字通りの「+」記号になってしまいます。

4. encodeURIComponent と encodeURI の違い / encodeURIComponent vs. encodeURI

JavaScriptにはURLエンコード用の関数が複数ありますが、対象範囲が異なります。古いescape() はUTF-8非対応かつ非推奨のため使用を避けてください。

const value = "hello world/foo?bar";

encodeURIComponent(value);
// "hello%20world%2Ffoo%3Fbar"  ← / ? もエンコードされる(部品として扱う)

encodeURI(value);
// "hello%20world/foo?bar"      ← / ? は構造記号として保持される

// クエリパラメータの値を組み立てる時は必ずencodeURIComponentを使う
const url = `https://example.com/search?q=${encodeURIComponent("東京 タワー")}`;
// "https://example.com/search?q=%E6%9D%B1%E4%BA%AC%20%E3%82%BF%E3%83%AF%E3%83%BC"

encodeURIComponent はURLの「一部品(パラメータの値など)」を、encodeURI はURL「全体」を対象にする関数です。クエリパラメータの値には ほぼ常に encodeURIComponent が正解です。

他言語での実装例

# Python
from urllib.parse import quote, quote_plus
quote("hello world")        # 'hello%20world'
quote_plus("hello world")   # 'hello+world' (フォーム送信互換)

// Java
java.net.URLEncoder.encode("hello world", "UTF-8"); // "hello+world" (フォーム互換、+を使う点に注意)

// PHP
urlencode("hello world");   // "hello+world" (フォーム互換)
rawurlencode("hello world"); // "hello%20world" (RFC 3986準拠)

Java の URLEncoder と PHP の urlencode() は、名前に反して スペースを + にする「フォーム送信向け」の関数です。パス部分に使いたい場合は PHPなら rawurlencode() を選ぶ必要があります。

5. よくある間違い / Common mistakes

• 二重エンコード: すでに %20 を含む文字列をもう一度 エンコードすると %2520(% 自体が %25 にエンコードされる) になり、デコードしても元に戻りません。外部から受け取ったURLは、エンコード済みかどうかを 確認してから処理してください。
• +をパス部分で使ってしまう: + はクエリ文字列の慣習であり、 パス部分では文字通りの+として解釈されます。
• encodeURIComponentし忘れて&や=が壊れる: パラメータの値に& や = が含まれる場合、エンコードせずに連結すると クエリ文字列の区切りと誤認識されます。
• escape()の使用: 非ASCII文字を正しく扱えず非推奨。必ずencodeURIComponent を使ってください。

まとめ / Summary

url encode spaceの基本は「スペースは%20に置き換える」という単純な規則ですが、+ との使い分け、encodeURIComponent と encodeURIの対象範囲の違い、二重エンコードの防止という3点を押さえておけば実務でのトラブルは 大きく減らせます。迷ったら%20とencodeURIComponentを選ぶのが最も安全な選択です。

Encode spaces as %20 in URL paths and RFC 3986-style query strings; reserve+ for the legacy application/x-www-form-urlencoded convention. Use encodeURIComponent for individual parameter values andencodeURI only when encoding a full URL you want to keep structurally intact. Always check whether a string is already encoded before encoding it again.

関連ツール / Related tools

• URL Encoder / Decoder — URLのパーセントエンコード・デコード
• HTML Entity Encoder — HTML内の特殊文字エスケープ

関連ガイド / Related guides

• HTMLエスケープとXSS対策の基本
• 文字化けの原因切り分け