URL に日本語や記号を含めると、%E6%97%A5%E6%9C%AC%E8%AA%9E のような形式に変換されることがあります。これが URL エンコード（パーセントエンコーディング）です。

この記事では、URL エンコードが必要な理由・仕組み・変換方法と、よく混同される encodeURIComponent と encodeURI の違いを解説します。

URL エンコードとは

URL エンコードとは、URL の中で使えない文字（日本語・スペース・特殊記号など）を %XX の形式に変換する処理です。XX は文字の UTF-8 バイト値を16進数で表したものです。

例えば「日本語」は UTF-8 で以下のバイト列になります。

文字UTF-8 バイトURL エンコード
日E7 94 B0%E7%94%B0
本E6 9C AC%E6%9C%AC
語E8 AA 9E%E8%AA%9E

3文字合わせると %E6%97%A5%E6%9C%AC%E8%AA%9E（「日本語」の UTF-8 バイト列）になります。

なぜ URL エンコードが必要なのか

URL は ASCII 文字のみで構成することが仕様上の基本です。日本語や半角スペース、& = ? などの文字はクエリパラメータの区切り文字として特別な意味を持つため、そのまま使うと URL が壊れてしまいます。

// 問題のあるURL（スペースや日本語がそのまま）
https://example.com/search?q=東京 観光

// 正しくエンコードしたURL
https://example.com/search?q=%E6%9D%B1%E4%BA%AC%20%E8%A6%B3%E5%85%89

encodeURIComponent と encodeURI の違い

JavaScript には URL エンコードの関数が2種類あります。使い分けを間違えるとバグの原因になります。

関数エンコードしない文字主な用途
encodeURIComponentA-Z a-z 0-9 - _ . ! ~ * ' ( )クエリパラメータの値
encodeURI上記 + ; , / ? : @ & = + $ #URL 全体

通常のユースケースでは encodeURIComponent を使います。 & や = などのパラメータ区切り文字もエンコードするため、値として安全に扱えます。

// クエリパラメータの値に使う
const keyword = '東京 観光&グルメ';
const url = 'https://example.com/search?q=' + encodeURIComponent(keyword);
// → https://example.com/search?q=%E6%9D%B1%E4%BA%AC%20%E8%A6%B3%E5%85%89%26%E3%82%B0%E3%83%AB%E3%83%A1

// URL 全体を渡すときは encodeURI
const fullUrl = encodeURI('https://example.com/path with spaces');
// → https://example.com/path%20with%20spaces

デコードの方法

エンコードされた URL を元の文字列に戻すには decodeURIComponent または decodeURI を使います。

decodeURIComponent('%E6%97%A5%E6%9C%AC%E8%AA%9E'); // → '日本語'
decodeURIComponent('%2B');  // → '+'
decodeURIComponent('+');    // → '+' （スペースには変換されない）

なお、+（プラス記号）をスペースとして解釈する処理（application/x-www-form-urlencoded 形式）は decodeURIComponent ではなく別途処理が必要です。

よくある使いどころ

URL エンコード / デコード ツール 貼り付けるだけでリアルタイム変換。コンポーネント / フルURL の2モード対応。
ツールを使う →

まとめ

関連記事