URLエンコーディング、別名パーセントエンコーディングは、URL内でデータを安全に送信するために不可欠です。このプロセスは、標準的なURLでは許可されていない文字（スペース、特殊文字、アクセント文字など）を、Webサーバーが理解できる形式に変換します。JavaScriptは、この処理を効果的に行うために、encodeURI()とencodeURIComponent()という2つの強力な関数を提供しています。それらの違いを理解することは、堅牢で安全なWebアプリケーションを構築するための鍵となります。
目次
- URIとURLの違いとは？
- JavaScriptの
encodeURI()メソッドを使用したURLのエンコード - JavaScriptの
encodeURIComponent()メソッドを使用したURLのエンコード - 適切なエンコード方法の選択
URIとURLの違いとは？
しばしば同じように使われますが、URI（Uniform Resource Identifier）とURL（Uniform Resource Locator）は異なります。URIはリソースを識別する一般的な用語であるのに対し、URLはアクセス機構（例：HTTP）を指定することでリソースの位置を特定する特定の種類のURIです。URIを住所、URLをその住所への道案内と考えてください。JavaScriptのエンコーディングにおいては、実際的な違いは最小限です。どちらも特殊文字を処理するために適切なエンコーディングが必要です。
JavaScriptのencodeURI()メソッドを使用したURLのエンコード
encodeURI()メソッドは、完全なURIまたはURLをエンコードします。これは、URLパス、クエリパラメータ、またはフラグメント識別子では許可されていない特殊文字を対象としており、一般的に安全と見なされる文字（スラッシュ/、疑問符?、アンパサンド&など）はそのまま残します。
let url = "https://www.example.com/search?q=hello world";
let encodedUrl = encodeURI(url);
console.log(encodedUrl); // 出力: https://www.example.com/search?q=hello%20world
encodeURI()は、スペースを%20（スペースのパーセントエンコードされた表現）に置き換えます。これは、完全なURLをエンコードするのに適していますが、予約済み文字を含む可能性のある個々のコンポーネントをエンコードするには適していません。
JavaScriptのencodeURIComponent()メソッドを使用したURLのエンコード
encodeURIComponent()はより積極的で、URL内で一般的に安全と見なされる文字も含め、すべての特殊文字をエンコードします。これは、個々のURLコンポーネント（クエリパラメータまたはフラグメント識別子）をエンコードするのに最適です。このメソッドでURL全体をエンコードすると、不正なURLになります。
let urlBase = "https://www.example.com/search?q=";
let query = "hello world & special characters";
let encodedQuery = encodeURIComponent(query);
let completeUrl = urlBase + encodedQuery;
console.log(completeUrl); // 出力: https://www.example.com/search?q=hello%20world%26%20special%20characters
encodeURIComponent()がすべてのスペースとアンパサンドをエンコードしていることに注意してください。これにより、URLを動的に構築する際の予期せぬ動作やセキュリティの脆弱性が防止されます。
適切なエンコード方法の選択
完全なURLにはencodeURI()を、個々のコンポーネント（クエリパラメータ、フラグメント識別子）にはencodeURIComponent()を使用します。これらの関数の誤用は、壊れたURLやサーバー側のエラーにつながる可能性があります。元のデータを取得するには、常にサーバー側でURLをデコードしてください。