URLにおける特殊文字の処理
URLのパス、クエリ文字列、フラグメントでスペース、Unicode、絵文字、予約文字を正しく処理してURLを壊さない方法を学びます。
Advanced
詳細な説明
URLの特殊文字
URLは限られたASCII文字セットを使用するように定義されています。このセット外の文字（スペース、国際文字、絵文字を含む）はエンコードする必要があります。
URLを壊す文字
| 文字 | 問題 | 解決策 |
|---|---|---|
| スペース | URLを分割 | %20（パス）または+（クエリ） |
# |
フラグメント開始 | %23 |
? |
クエリ文字列開始 | %3F |
& |
クエリパラメータ区切り | %26 |
= |
キーバリュー区切り | %3D |
% |
エンコーディングプレフィックス | %25 |
Unicode文字
非ASCII文字はUTF-8バイトとしてエンコードされ、各バイトがパーセントエンコードされます：
"日本" → UTF-8バイト: E6 97 A5 E6 9C AC → %E6%97%A5%E6%9C%AC
安全なURL構築の実践
// 間違い：文字列結合
const url = "https://api.com/search?q=" + userInput;
// 正しい：URLSearchParams
const url = new URL("https://api.com/search");
url.searchParams.set("q", userInput);
// 正しい：パスセグメントにencodeURIComponent
const url = `https://api.com/users/${encodeURIComponent(username)}/profile`;
よくある間違い
- ユーザー入力をエンコードしない — インジェクションリスクと壊れたURL
- パラメータに
encodeURI()を使用 —&、=、#をエンコードしない - URL全体をエンコード — 構造を壊す（
://が%3A%2F%2Fになる） - 二重エンコード — すでにエンコードされた値をエンコード
ユースケース
特殊文字の適切な処理は、検索エンジン、ユーザー生成コンテンツプラットフォーム、国際化アプリケーション、動的データからURLを構築するあらゆるシステムにとって重要です。不正なエンコーディングは本番システムでの壊れたリンク、XSS脆弱性、失敗したAPIリクエストの頻繁な原因です。