JavaScript URLエンコード関数比較ガイド

Web開発において、特殊文字やURLの適切な処理はセキュリティと互換性に直結します。JavaScriptには3つのエンコード関数が存在します：`escape()`、`encodeURI()`、`encodeURIComponent()`。それぞれの特性と正しい使用法を徹底解説します。

関数別詳細解説

1. escape() - 非推奨の古き機能

// デモコード
console.log(escape("日本語テスト"));  // "%u65E5%u672C%u8A9E%u30C6%u30B9%u30C8"
console.log(escape("user@domain.com")); // メールアドレスは変換されない

• ECMAScript仕様から削除済み
• Unicode文字は%uXXXX形式でエンコード
• URI構造を破壊する可能性あり

2. encodeURI() - 完全なURL用

// 実装例
const url = "https://example.com/日本語パス?クエリ=値";
console.log(encodeURI(url)); 
// "https://example.com/%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%91%E3%82%B9?%E3%82%AF%E3%82%A8%E3%83%AA=%E5%80%A4"

• URL全体を対象としたエンコード
• URI構造を維持（: / ? # 等）
• ASCII以外の文字のみ変換

3. encodeURIComponent() - コンポーネント単位用

// 使用例
const search = encodeURIComponent("検索語&条件");
console.log(`https://api.example.com?q=${search}`);
// "https://api.example.com?q=%E6%A4%9C%E7%B4%A2%E8%AA%9E%26%E6%9D%A1%E4%BB%B6"

• URLパラメータやパスセグメント向け
• すべての特殊文字をエンコード
• Cookie値やフォームデータにも適応

実践的な使用シナリオ

正しい使用例

// URLビルダ関数
function createURL(base, path, params) {
  const encodedPath = encodeURI(path);
  const query = Object.entries(params)
    .map(([key, val]) => 
      `${encodeURIComponent(key)}=${encodeURIComponent(val)}`
    ).join('&');
  
  return `${base}/${encodedPath}?${query}`;
}

// 実行例
const apiURL = createURL('https://api.example.com', 'search', {
  q: 'JavaScript "エンコード"',
  sort: 'desc'
});

避けるべき誤用

// NGケース
const wrong1 = escape("https://example.com?test= a b");
// "https%3A//example.com%3Ftest%3D%20a%20b" ← プロトコル破壊

const wrong2 = encodeURI("param= a&b ");
// "param=%20a&b%20" ← クエリパラメータ破損

比較ビジュアライゼーションツール

リアルタイムでエンコード結果を比較できるツールを提供します：

ベストプラクティス

• 新規開発ではescape()を絶対に使用しない
• フルURLの場合はencodeURI()
• パラメータ単位ではencodeURIComponent()
• エンコード後のURLはdecodeURI()で復号