リンクを貼ったら本来は文字のはずの場所に %E3%81%82 が現れたり、クエリパラメータが謎に壊れたりした経験はありませんか?それが URL エンコードの働きです。理解すれば、あの謎の文字列を筋道立てて扱えるようになります。
なぜ URL にエンコードが必要か
URL には限られた ASCII 文字しか入れられません。それ以外 —— 空白、日本語、あるいは ?・&・#・/ のように特別な意味を持つ文字 —— はすべてパーセントエンコードが必要です。% にそのバイトの 2 桁の 16 進数を続けた形に置き換えます。例えば空白は %20、あ(UTF-8)は %E3%81%82 になります。
URL エンコードツールで任意の文字列を即座にエンコード・デコードできます。
予約文字 vs 非予約文字
- 非予約文字(
A–Z a–z 0–9 - _ . ~)はエンコード不要です。 - 予約文字(
: / ? # [ ] @ ! $ & ' ( ) * + , ; =)は URL 内で構造的な意味を持ちます。エンコードするかは文脈次第 —— 値の中では必須、構造としては不可です。
これが encodeURIComponent と encodeURI の違いの核心です。
encodeURIComponent vs encodeURI
encodeURIComponentは予約文字もエンコードします。単一の値(1 つのクエリパラメータ、1 つのパスセグメント)に使います。encodeURIは構造文字(/ ? & =)を保持します。分割したくないURL 全体に使います。
encodeURIComponent("a b&c=d") // "a%20b%26c%3Dd" ✅ 値として安全
encodeURI("https://x.com/a b") // "https://x.com/a%20b" ✅ URL 全体選び間違いはよくあるバグの原因です。値に encodeURI を使うと中の & がエスケープされず、クエリ文字列が壊れます。
%20 vs +
どちらも空白を表せますが、文脈が異なります。URL パスや現代のクエリ文字列では標準は %20。空白を + にするのは、HTML フォーム送信で使われる古い application/x-www-form-urlencoded 形式に由来します。迷ったら %20 が安全で普遍的な選択 —— 当ツールもこれを出力します。
典型的な二重エンコードのバグ
文字列を 2 回エンコードすると、%20 は %2520 になります(% 自身が %25 にエンコードされるため)。症状:ブラウザに文字どおりの %20 が出る、空白が %2520 になる、など。解決策はちょうど 1 回だけエンコードすること —— 入力の状態が不明ならまずデコードします。デコードツールで今何を持っているか簡単に確認できます。
クイックリファレンス
- パラメータ値をエンコード?→
encodeURIComponent。 - URL 全体をエンコード?→
encodeURI。 - 見慣れない
%XX?→ デコードして原文を読む。
無料の URL エンコード / デコードツールで URL とクエリパラメータを即座にエンコード・デコードできます —— すべてブラウザ内で動作します。