HTML URL エンコード

ウェブブラウザは、URL（Uniform Resource Locator）を使用してウェブサーバーにページをリクエストします。しかし、URLには使用できる文字に厳格な制限があるため、特殊な文字を送る際には「エンコード」という変換作業が必要になります。

1. URL エンコード（パーセントエンコード）とは？

URLは、ASCII 文字セットを使用してインターネット上を送信することしかできません。

URLにASCIIセット以外の文字（日本語など）や、URL内で特別な意味を持つ「予約済み文字」をデータとして含める場合、それらを有効なASCII形式に変換する必要があります。これがURLエンコード（またはパーセントエンコード）です。

仕組みの基本

URLエンコードは、安全でない文字を「%」と、その文字の文字コードに対応する2桁の16進数に置き換えます。

2. なぜエンコードが必要なのか？

URL内には、構文として特別な意味を持つ文字があります。これらを本来の意味（区切り記号など）ではなく、単なる「データ」として送りたい場合にエンコードが必要になります。

• スペース（空白）: URLにスペースを含めることはできません。エンコードされると通常は + または %20 に置き換わります。
• 非ASCII文字: 日本語などの文字は、そのままではURLとして送信できないため、16進数の羅列に変換されます。
• 予約済み文字: ?（クエリの開始）、&（パラメータの区切り）、=（キーと値の結合）などは、データの中に含まれるとURLの構造を壊してしまうため、エンコードが必要です。

3. よく使われる文字のエンコード例

Web開発で頻繁に遭遇する、主要なエンコード結果を以下の表にまとめました。

4. JavaScript での URL エンコード

モダンなフロントエンド開発では、JavaScript を使用して動的にURLパラメータを作成する際、ブラウザ標準の関数を利用します。

// 文字列を安全にエンコードする
const query = "HTML & CSS チュートリアル";
const encoded = encodeURIComponent(query);

console.log(encoded); 
// 出力: HTML%20%26%20CSS%20%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%83%A2%E3%83%AB

encodeURIComponent() 関数は、スペースを %20 に変換し、その他の特殊文字も適切に処理してくれます。

5. まとめ

URLエンコードは、ユーザーが入力したデータや特殊な記号を、ブラウザからサーバーへ「壊さずに」届けるための共通言語です。

普段は何気なく使っているURLの裏側には、こうした確実な通信を支える仕組みが隠されています。リンクを作成する際、特にクエリパラメータに記号が含まれる場合は、このエンコードの存在を思い出してみてくださいね。