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攻撃を防ぐ重要な関数
- サニタイズの第一歩
- 信頼できないユーザー入力のエンコードに不可欠
注意点
[編集]- 完全なセキュリティ対策ではない
- バックエンドでも追加のバリデーションが必要
- パフォーマンスへの影響は最小限
関連メソッド
[編集]ブラウザ互換性
[編集]- すべてのモダンブラウザで完全サポート
- Internet Explorer 5.5以降
- ECMAScript 3以降で標準化
仕様
[編集]- ECMAScript 仕様
- WHATWG URL 仕様
- RFC 3986 (URI規格)