encodeURI と encodeURIComponent の違い

JavaScriptにはURLエンコード用の組み込み関数が2つあります：encodeURI()とencodeURIComponent()。それぞれ異なる目的を持ち、異なる文字セットをエンコードします。間違った関数を使用することはバグの一般的な原因です。

encodeURI() は完全なURIのエンコードに設計されています。URL内で構造的な意味を持つ文字を保持します：

• エンコードしない文字：A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
• エンコードする文字：スペース、非ASCII文字、その他の安全でない文字

encodeURIComponent() は単一のURIコンポーネント（クエリパラメータ値など）のエンコードに設計されています。未予約文字以外のすべてをエンコードします：

• エンコードしない文字：A-Z a-z 0-9 - _ . ! ~ * ' ( )
• エンコードする文字：; , / ? : @ & = + $ #およびencodeURI()がエンコードするすべて

並列比較:

const url = "https://example.com/path?q=hello world&lang=en";

encodeURI(url)
// "https://example.com/path?q=hello%20world&lang=en"
// 構造が保持され、スペースのみエンコード

encodeURIComponent(url)
// "https%3A%2F%2Fexample.com%2Fpath%3Fq%3Dhello%20world%26lang%3Den"
// すべてエンコード — URLは単一の不透明な値に

使い分け:

encodeURI()は、スペースやUnicode文字を含む完全なURLがあり、構造（スキーム、ホスト、パス、クエリ区切り）がすでに正しい場合に使用します。実際にはまれなケースです。

encodeURIComponent()は、URLに配置される個別の値をエンコードする場合に使用します：パラメータ値、パスセグメント、フラグメント識別子など。95%の場合はこちらの関数が必要です。

ベストプラクティス：クエリ文字列にはURLSearchParamsを使用する:

const params = new URLSearchParams({
  q: "hello world",
  url: "https://other.com/page?id=5",
  tags: "a&b"
});
const fullUrl = `https://api.example.com/search?${params}`;
// すべてのエンコードを自動的かつ正しく処理

落とし穴: パラメータ値にencodeURI()を使用すると、&、=、?、#などの重要な文字がエンコードされず、URL構造が壊れます。逆に、URL全体にencodeURIComponent()を使用すると、://や/文字がエンコードされ、URLが使用不能になります。常にユースケースに合った関数を選択してください。