HTML - URLエンコーディング

こんにちは、未来のウェブ開発者たち！今日は、URLエンコーディングの興味深い世界に飛び込みます。初めての場合でも心配しないでください；基本から始めて、段階的に進めていきます。このチュートリアルの終わりには、プロのようにURLエンコーディングができるようになるでしょう！

URLエンコーディングとは？

例に飛び込む前に、URLエンコーディングとは何か、そしてなぜそれが重要かを理解しましょう。

URLエンコーディングは、文字をインターネット上で伝送できる形式に変換する方法です。まるでテキストに特別なパスポートを発行し、ウェブを安全に旅するようにするものです！

こう考えるとわかりやすいかもしれません：凝った住所を含む手紙を送ろうとしているとします。郵便局は混乱するかもしれません！URLエンコーディングは、その住所を誰もが理解できる形に書き換えるようなものです。

例

簡単な例から始めましょう：

https://www.example.com/my file.html

このURLにはスペースがありますが、問題を引き起こす可能性があります。エンコードすると、以下のようになります：

https://www.example.com/my%20file.html

%20を見てください。これはスペースのURLエンコードされたバージョンです。すごいでしょう？

ASCIIコントロール文字のエンコーディング

次に、ASCIIコントロール文字について話しましょう。これらはテキストの処理方法を制御する特殊な文字です。URLエンコーディングでは、これらに特に注意が必要です。

以下是一些常见的ASCIIコントロール文字とそのエンコードされたバージョンの表です：

文字	エンコード
NUL	%00
SOH	%01
STX	%02
ETX	%03

例えば、URLにNUL文字を含める必要があれば（これは稀ですが）、%00を使用します。

非ASCIIコントロール文字のエンコーディング

非ASCII文字は、標準的なASCIIセット以外の文字、例えばアキュート文字や他のアルファベットの記号などです。これらも特別な処理が必要です。

例を見てみましょう：

https://www.example.com/café

エンコードすると、以下のようになります：

https://www.example.com/caf%C3%A9

éは%C3%A9に置き換えられました。これにより、世界中のサーバーがこの文字を正しく解釈できるようになります。

保留文字のエンコーディング

一部の文字はURL内で特別な意味を持っています。これらを保留文字と呼び、通常の文字として使用したい場合にはエンコードする必要があります。

以下は保留文字とそのエンコードされたバージョンの表です：

文字	エンコード
!	%21
#	%23
$	%24
&	%26
'	%27
(	%28
)	%29
*	%2A
+	%2B
,	%2C

例を見てみましょう：

https://www.example.com/search?q=fish&chips

このURLは&をパラメータのセパレータとして使用しています。もしこれを「fish & chips」と検索したい場合、以下のようにエンコードします：

https://www.example.com/search?q=fish%26chips

これにより、サーバーは「fish & chips」として検索するかを理解します！

不安全な文字のエンコーディング

最後に、不安全な文字について話しましょう。これらはさまざまなシステムによって誤解される可能性があるため、常にエンコードする必要があります。

以下はいくつかの不安全な文字の表です：

文字	エンコード
スペース	%20
"	%22
<	%3C
>	%3E
#	%23
%	%25
{	%7B
}	%7D
|	%7C
\	%5C
^	%5E
~	%7E

例を使用して見てみましょう：

https://www.example.com/search?q=C++ Programming

適切にエンコードすると、以下のようになります：

https://www.example.com/search?q=C%2B%2B%20Programming

+記号とスペースをエンコードして、正しく解釈されるようにしました。

すべてを合わせて

これらのエンコーディングの種類をカバーしたので、もっと複雑な例を試してみましょう：

https://www.example.com/search?q=Where's the café? (It's urgent!)

完全にエンコードすると、以下のようになります：

https://www.example.com/search?q=Where%27s%20the%20caf%C3%A9%3F%20%28It%27s%20urgent%21%29

これは見た目が変わりましたね！しかし、これによりインターネット上で誤解されるリスクなしに安全に伝送できます。

結論

そして、みなさん！URLエンコーディングの世界への初めてのステップを踏みました。覚えておいてください、初めは複雑に見えるかもしれませんが、URLがどこにいっても正しく解釈されるようにするためのものです。

URLエンコーディングをインターネットのユニバーサル翻訳者のように考えてください。これにより、URLが特殊な文字やスペースを含んでも、世界中のサーバーと明確に通信できるようになります。

ウェブ開発の旅を続ける中で、URLエンコーディングを理解することが非常に役立ちます。強固なリンクを作成し、ユーザー入力を安全に処理し、URL関連の問題をデバッグするのに役立ちます。

続けて練習し、すぐにURLエンコーディングが自然になるでしょう。ハッピーコーディング、そしてすべてのURLが安全にウェブを旅するようになることを祈っています！

Credits: Image by storyset