JavaScript/encodeURIComponent

encodeURIComponent() は、URIのコンポーネント（特にクエリパラメータ）をより厳密にエンコードするグローバル関数です。特殊文字を安全にエンコードし、URIの各部分を正確にエンコードすることができます。

構文

encodeURIComponent(uriComponent)

パラメータ

uriComponent

エンコードするURIのコンポーネント（文字列）

戻り値

エンコードされたURIコンポーネント文字列

例外

URIError

非常に稀ですが、不正な入力時にスローされる可能性があります

基本的な使用例

// クエリパラメータのエンコード
const searchTerm = "こんにちは 世界!";
const encodedParam = encodeURIComponent(searchTerm);
console.log(encodedParam);
// "%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%20%E4%B8%96%E7%95%8C!"

const url = `https://example.com/search?q=${encodedParam}`;
console.log(url);
// "https://example.com/search?q=%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%20%E4%B8%96%E7%95%8C!"

エンコード対象の文字

encodeURIComponent() は以下の文字を含むほぼすべての文字をエンコードします：

• 予約文字 ; , / ? : @ & = + $ #
• スペース文字
• 非ASCII文字
• コントロール文字
• URLで特別な意味を持つ文字

エンコードの比較

メソッド	エンコード範囲	主な用途
encodeURI()	限定的	完全なURL
encodeURIComponent()	包括的	クエリパラメータ、パス要素
escape() (非推奨)	制限あり	古いブラウザ対応

重要な特徴

• クエリパラメータの安全なエンコード
• クロスサイトスクリプティング (XSS) 対策に有効
• RESTful APIリクエストで広く使用

高度な使用例

// 動的なクエリ文字列の生成
function createAPIUrl(params) {
    const encodedParams = Object.keys(params)
        .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
        .join('&');
    
    return `https://api.example.com/data?${encodedParams}`;
}

const apiParams = {
    search: "JavaScript 教程",
    category: "プログラミング",
    page: 1
};

const apiUrl = createAPIUrl(apiParams);
console.log(apiUrl);
// "https://api.example.com/data?search=JavaScript%20%E6%95%99%E7%A8%8B&category=%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0&page=1"

セキュリティ考慮事項

• XSS攻撃を防ぐ重要な関数
• サニタイズの第一歩
• 信頼できないユーザー入力のエンコードに不可欠

注意点

• 完全なセキュリティ対策ではない
• バックエンドでも追加のバリデーションが必要
• パフォーマンスへの影響は最小限

関連メソッド

• decodeURIComponent()
• encodeURI()
• decodeURI()

ブラウザ互換性

• すべてのモダンブラウザで完全サポート
• Internet Explorer 5.5以降
• ECMAScript 3以降で標準化

仕様

• ECMAScript 仕様
• WHATWG URL 仕様
• RFC 3986 (URI規格)