JavaScriptでURLをエンコードする方法とは？encodeURIとencodeURIComponentの違いを解説

Web開発をしていると、URLに日本語や記号を含める必要が出てくることがあります。そんなときに欠かせないのが「URLエンコード」。特にJavaScriptでは、encodeURI()やencodeURIComponent()などの便利な関数が用意されていますが、正しく使い分けないと意図しない動作を引き起こす可能性があります。本記事では、JavaScriptにおけるURLエンコードの基本から、各種関数の違い、使用例、注意点までを丁寧に解説します。

URLエンコードとは？
JavaScriptでURLエンコードする方法
encodeURI()の使い方と特徴
1. 例：
encodeURIComponent()の使い方と特徴
1. 例：
encodeURIとencodeURIComponentの違いを整理
decodeURIとdecodeURIComponentの使い方
1. decodeURI()
2. decodeURIComponent()
URLSearchParamsとの併用方法
1. 例：
escape()は使わないで！
よくある失敗と対策
1. クエリ全体をencodeURIComponentでエンコードしてしまう
2. 二重エンコードに注意
まとめ：使い分けがカギ！

URLエンコードとは？

URLエンコードとは、URL内で使用できない文字（記号や日本語など）を、安全に送信できるように変換する処理です。HTTPでは英数字以外の文字や特定の記号はそのままでは使用できないため、「%」記号と16進数で表す形式に変換します。これを「パーセントエンコーディング」とも呼びます。

たとえば、文字列「こんにちは」は次のようにエンコードされます：

こんにちは → %E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF

このエンコードによって、ブラウザやサーバーが誤解することなくURLを処理できるようになります。

JavaScriptでURLエンコードする方法

JavaScriptでは以下の3つの主な方法でURLエンコードが行えます：

encodeURI()
encodeURIComponent()
escape()（※非推奨）

それぞれ用途やエンコードの範囲が異なるため、目的に応じて使い分けが必要です。

encodeURI()の使い方と特徴

encodeURI()は、URI全体をエンコードするときに使用します。URIとして意味を持つ一部の記号（例：: / ? & = #）はそのままにして、それ以外の特殊文字をエンコードします。

例：

const url = "https://example.com/こんにちは?search=テスト";
const encodedUrl = encodeURI(url);
console.log(encodedUrl);
// https://example.com/%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF?search=%E3%83%86%E3%82%B9%E3%83%88

このように、URLとしての構造（?, =など）はそのままに、日本語部分だけがエンコードされます。

encodeURIComponent()の使い方と特徴

encodeURIComponent()は、URIの構成要素（クエリパラメータの値など）をエンコードするときに使います。encodeURI()よりも広い範囲の文字をエンコードします。

例：

const keyword = "テスト&サンプル";
const encodedKeyword = encodeURIComponent(keyword);
console.log(encodedKeyword);
// %E3%83%86%E3%82%B9%E3%83%88%26%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB

このように、&や=などの記号も含めて完全にエンコードされるため、クエリパラメータの値などに最適です。

encodeURIとencodeURIComponentの違いを整理

関数名	主な用途	エンコードされない文字例
encodeURI()	URI全体	`:`, `/`, `?`, `=`, `&`, `#`
encodeURIComponent()	クエリの値やパスの一部分などに使用	（ほぼすべての記号をエンコード）

この違いを理解していないと、URLの構造が崩れてしまったり、意図しない挙動になる原因となります。

decodeURIとdecodeURIComponentの使い方

エンコードされたURLを元に戻すには、以下の関数を使います。

decodeURI()

const encoded = "https://example.com/%E3%81%82%E3%81%84%E3%81%86";
const decoded = decodeURI(encoded);
console.log(decoded);
// https://example.com/あいう

decodeURIComponent()

const encoded = "%E3%83%86%E3%82%B9%E3%83%88%26%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB";
const decoded = decodeURIComponent(encoded);
console.log(decoded);
// テスト&サンプル

エンコードの方法に対応したdecode関数を使わないと、正しくデコードできません。

URLSearchParamsとの併用方法

近年のJavaScriptでは、クエリパラメータの操作にURLSearchParamsが便利です。自動でエンコード・デコードもしてくれます。

例：

const params = new URLSearchParams();
params.set("keyword", "テスト&サンプル");
console.log(params.toString());
// keyword=%E3%83%86%E3%82%B9%E3%83%88%26%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB

このように、自分でencodeURIComponent()を使わなくても、正しく処理してくれます。

escape()は使わないで！

古いJavaScriptにはescape()という関数もありますが、これは非推奨です。UTF-8対応が不完全なため、国際化対応が必要な現代のWeb開発では使用しないようにしましょう。

よくある失敗と対策

クエリ全体をencodeURIComponentでエンコードしてしまう

const url = "https://example.com/search?" + encodeURIComponent("q=テスト&lang=ja");
// 間違い：クエリ文字列が1つの値として扱われる

正しくは、個々のパラメータの値だけをエンコードします。

const query = `q=${encodeURIComponent("テスト")}&lang=${encodeURIComponent("ja")}`;
const url = `https://example.com/search?${query}`;

二重エンコードに注意

すでにエンコードされた値を再びencodeURIComponentにかけてしまうと、文字が重ねて変換されてしまい、解読不可能になります。

const once = encodeURIComponent("テスト"); // %E3%83%86%E3%82%B9%E3%83%88
const twice = encodeURIComponent(once);    // %25E3%2583%2586%25E3...

まとめ：使い分けがカギ！

JavaScriptでのURLエンコードは、目的に応じて正しい関数を選ぶことが重要です。まとめると以下のようになります。

URL全体 → encodeURI()
クエリ値やパスの一部 → encodeURIComponent()
解析時 → 対応するdecodeURI()やdecodeURIComponent()
現代的な方法 → URLSearchParamsの活用

これらを理解して使い分ければ、URLの処理がスムーズに行えるようになります。