URLの構造を徹底解説!
URLとは、Web上の住所です。1つのURLは1つのWebページと結びつきます。
このURLの構造と、合わせてドメインの構造も理解して、リンクの貼り方をマスターしましょう!
エンジニアはすべての内容を、それ以外 (Webデザイナーなど) はURLの構造とパスの種類の2つを把握すると良いです。
URLの構造
URLは、大まかに3つに別れます
プロコトル名
プロコトルとは、通信の方式のことです。Web上のページや画像などは、殆どがhttpsという方式になります。
httpは暗号化されていないので、古いサイトを訪れると、たまに警告が出てきますね。
他にも、リモートでサーバに接続し、文字だけで操作するssh、リモートでファイルをやり取りするためのsftp、メールを送信等するためのsmtpなど、様々あります。
https://までを含めた、URLの構造などを示す要素をスキームと呼びます。
ドメイン
ドメインとは、インターネット上の住所を人間用に分かりやすくしたもののことです。その分かりやすくした名前がドメイン名です。
本来、インターネット上の住所はIPアドレスという数値の羅列です。しかし、それでは人間にとってあまりに分かりづらいため、ドメイン名で判断しています。
ドメインの構造と取得方法については、下の記事を参考にしてください。
ファイルパス
ドメイン名(Web上の住所)の後には、更にその詳細な場所が書かれます。その住所の家の中のどこの棚のどの紙、といった具合に、実際にモノがある場所になります。
ページによっては.htmlのようにそのままファイルパスだったり、全く別の名前を受け取ってサーバで解釈し直して適切なファイルを選んだりしています。
パスの種類
パスには、URLそのものと、相対パス、絶対パスがあります。それらを指定したときの挙動を見てみます。
| 種類 | 書き方 | 閲覧中のページ | 飛び先 |
|---|---|---|---|
| 相対パス | href="hoge/fuga" | https://example.com/aaa/bbb | https://example.com/aaa/hoge/fuga |
href="hoge/fuga" | https://example.com | https://example.com/hoge/fuga | |
href="yyy" | https://example.com/xxx | https://example.com/yyy | |
href="../zzz" | https://example.com/aaa/xxx/yyy | https://example.com/aaa/zzz | |
href="../../zzz" | https://example.com/aaa/xxx/yyy | https://example.com/zzz | |
| 絶対パス | href="/hoge/fuga | https://example.com内すべてで同じ | https://example.com/hoge/fuga |
| 完全URL | href="https://example.com" | どこからでも同じ | https://example.com |
一覧にすると多く見えますが、それは相対パスの例を増やしているだけのためです。つまり、そのサイトのドメイン直下が基準か、今見ているページが基準か、URLかの3つということです。
Webサイトのサイト内リンクの場合、絶対パスがおすすめです。そうすることで、ドメインの変更に影響されず、かつリンクを載せているページのパスを移動しても変更する必要がないためです。
..は、ディレクトリを遡るものです。例えば/xxx/yyy/zzzにいるときに..というパスに移動すると、/xxx/yyyになります。
URLではなく完全URLと書いているのは、上で書いた絶対パスは完全URLのドメインを省略した (つまり暗黙のドメインとした) だけのものであるためです。
また、//example.comというようにhttps:も暗黙のプロトコルにできます。
クエリストリング
URLの後に、例えばhttps://example.com/hoge?foo=bar&hige=hageといった、?以降に続く文字列がある場合があります。これをクエリストリング (クエリパラメータ、クエリ文字列とも) といいます。
これらは、サーバ側に伝えたい値です。例えば、https://example.com/search?keyword=abcがあるとすると、searchというパスに、keywordの値はabcだ、と伝えていることになります。
クエリストリングは、各keyとvalueのペアが&区切りで記述されます。.../search?keyword=abc&genre=it&created=20220205といった具合です。
Punycode (ピュニコード)
Punicodeは、文字符号化方式の一つです。いわゆる多バイト文字 (日本語、キリル文字、ギリシャ文字など) が含まれるURLである場合に、xn--を頭につけ、残りを英数字記号のみで表現できるように符号化するものです。
例えば、ドメイン名例.jpはxn--eckwd4c7cu47r2wf.jpになります。
Punycodeが生まれた理由の一つは、DNSはASCII文字以外を想定していないという技術的問題があります。
もう一つ副産物と言えるものが、フィッシング詐欺の防止です。例えば、
example.comеxample.com
この2つの区別がつくでしょうか。実は、2つ目のеxample.comのеは、英字(ラテン文字)ではなくキリル文字です。Punicodeだとxn--xample-2of.comになります。
Punicodeに変換されると、このような詐欺を未然に防ぐことができます。
URIやURNとの違い
URL、URN、URIは似ていますが、全く異なります。
URLは、Web上の住所です。
URNは、ファイルなどの名前のような識別子です。
URIは、その両方をひっくるめたもので、Web上のファイルなどを識別するためのものです。
とすると、WebサイトのURLはURIと言わなければならない、という意見もありますが、実際のところどっちでも良いです。MDNのURLとは何かによると、WebページのURLはURLという呼び方のままで良い、ということになります。
まとめ
URLの構造は、大まかに3つに別れ、ドメインは5つに別れます。Webデザイナーなどなら前者とパスの挙動を、Webエンジニアならすべて理解しておくべきです。
