Zenn
📝

【Web基礎講座】URLの読み方と構造について分かりやすく解説します【保存版】

2020/03/17に公開
基礎
idea

以前、以下の記事でインターネットとWebの仕組みについてまとめました。

【Web基礎講座】今さら聞けない？インターネットの仕組みを分かりやすく解説します！【保存版】
https://zenn.dev/ttskch/articles/7e9101660f5d2d

上記の記事の中の WebページのURL という章で、WebページのURLの構造について軽く触れたのですが、今回はここをもう少し掘り下げて細かいところまで分かりやすく説明してみたいと思います。

ぜひ最後までお付き合いください。

WebページのURL

世の中のすべてのWebページは、必ず「どこかのWebサーバー」上に存在しています。

私たちは、ブラウザに 「このWebサーバー上の、このフォルダにある、このページを見せて」 と命令することで、Webページを閲覧しているのです。

無数に存在するWebページの中から、 「このWebサーバー上の、このフォルダにある、このページ」 というのを一意に指定するための規約が URL です。

基本構造

http://example.com/hoge/fuga/index.html

例えばこんなURLがあったとします。これは、意味の単位で分解すると

http:// example.com /hoge/fuga/ index.html

こうなっています。

意味
http:// URLが指し示すものが「Webページ」であることを宣言
（WebページのURLの場合、ここは http:// または https:// の2択）
example.com サーバーコンピュータを指定
/hoge/fuga/ サーバーコンピュータ内のフォルダパスを指定
index.html フォルダ内のファイル名を指定

ちなみに、多くのWebサーバーでは、フォルダパスまでしか指定されなかった場合は自動で index.html を返すように設定されているため、

  • http://example.com/hoge/fuga/index.html
  • http://example.com/hoge/fuga/
  • http://example.com/hoge/fuga

これらのURLは全て同じページを指すことが多いです。（実は例外も多々あるのですが、ここでは詳細は割愛します）

アンカー

URLには アンカー （ハッシュ、フラグメントなどとも呼ぶ）という機構があります。

  • http://example.com/hoge/fuga/index.html
  • http://example.com/hoge/fuga/index.html#anchor

この2つのURLは、どちらも同じページを指しますが、後者は特に、そのページの中の ある箇所 （ anchor という名前が付けられている箇所）を指しています。

これを使うと、ブラウザでページを開いたときに、 初めからその箇所までスクロールした状態で開く ことができます。

アンカーは英語の anchor で（船の）イカリという意味です。ページ内の「名前が付けられている箇所」のことを「アンカーポイント」などと呼びます。

あるページ内にそのページ自体へのリンクが設置されていた場合、通常そのリンクをクリックするとページが再読み込みされます。しかし、ページ内のアンカーポイントへのリンクの場合は、クリックしてもページは再読み込みされず、スクロール位置だけが変化します。このような動作を「ページ内リンク」などと呼びます。

URL書式

URLの末尾 に # {アンカーポイント名} という書式で指定します。

存在しないアンカーポイントを指定した場合

アンカーポイントは、Webページの制作者によってあらかじめページ内に仕込まれているものです。

Webページ内に存在しないアンカーポイント名を適当に指定しても、特に何も起こらず普通にページが開きます。（つまり、無意味なアンカーは無視される）

実例

パラメータ

URLには パラメータ （URLパラメータ、クエリパラメータなどとも呼ぶ）という機構があります。

  • http://example.com/hoge/fuga/index.html
  • http://example.com/hoge/fuga/index.html?param=1

この2つのURLは、（多くの場合）どちらも同じページを指しますが、後者では、 ページを開くと同時に param=1 という付加的な情報をページに渡す ことができます。

param=1 の部分は、「 param というパラメータの値は 1 」という意味です。

param1=aaa&param2=bbb&param3=ccc などのように、複数のパラメータを & で繋げることも可能です。（いくつでも可）

Webページの制作者は、「この名前のパラメータが来たらこう処理する」といった処理内容をページ内に仕込んでおくことができます。これによって、1つのWebページに色々な振る舞いを持たせることが可能になります。

Webページそのものが処理する場合もあれば、Webページに外部サービスの「タグ」を設置しておくことでパラメータに対する処理を外部サービスに任せる場合もあります。

例えば、Webページに「Google Analyticsタグ」が設置されていると、Google Analyticsが持っているパラメータ処理が仕込まれた状態になる。

「タグ」については こちらの記事 で詳しく説明しているので、よろしければご参照ください。

URL書式

URL末尾（ただしアンカーと併用する場合はアンカーの前） に ? {パラメータ名}={値} & {パラメータ名}={値} ... という書式で指定します。

無意味なパラメータを付加した場合

Webページ側で想定されていないパラメータ（対応する処理が仕込まれていないパラメータ）をURLに付加しても、特に何も起こりません。（つまり、無意味なパラメータは無視される）

実例

アンカーと併用する例

アンカーとパラメータを併用する場合の順番 は間違いやすいポイントなのでしっかり覚えておきましょう。

正解は、 パラメータが先、アンカーが後 です。

  • ⭕️ http://example.com/hoge/fuga/index.html ?param=1 #anchor
  • ❌ http://example.com/hoge/fuga/index.html #anchor ?param=1
    • これは anchor?param=1 というアンカーポイント名を指定したことになってしまう

この順番を間違えるとアンカーもパラメータも効かない ので、Webサイトを運営している方はよくよく気をつけましょう！

無意味なパラメータが無視される例

以下のように無意味なパラメータを付加してアクセスしても、特に何も起こらないことが確認できます。

WebページのURLの構造まとめ

http:// example.com /hoge/fuga/ index.html ?param1=aaa&param2=bbb #anchor

  • index.html は多くの場合省略可能
  • アンカーの指定はURLの末尾に # {アンカーポイント名} と記述
  • パラメータの指定はURLの末尾に ? {パラメータ名}={値} & {パラメータ名}={値} ... と記述（いくつでも可）
    • ただしアンカーとパラメータを併用する場合は パラメータが先、アンカーが後

Webページ以外のURL

ところで、URLの説明として

無数に存在するWebページの中から、 「このWebサーバー上の、このフォルダにある、このページ」 というのを一意に指定するための規約が URL です。

と書きましたが、実は、 URLという規約はWebページ専用のものではありません。

これについても簡単に説明します。

URLスキーム

WebページのURLは常に http:// または https:// から始まりますが、 : より前の http や https の部分は URLスキーム と言って、 「指し示すものが何であるか」 を表しています。

http と https は「指し示すものがWebページである」場合に使うURLスキームというわけです。

http は通常の通信経路を使う場合の、 https はSSLという技術によって暗号化された通信経路を使う場合のURLスキームです。

https によるアクセスは、対象のWebページがSSLに対応している場合にしか使えません。

URLスキームは http https の他にも 大量に規定されています。（ほとんど知らなくていいです✋）

細かい話ですが、: の直後が // で始まるかどうかはURLスキーム次第で異なります。

というのも、URLスキームは「指し示すものが何であるか」を表しますが、 : より後の部分で 「どうやって指し示すか」 については、URLスキームごとに個別に決められているからです。

telとmailto

http https 以外のURLスキームとしては、Webの世界では tel や mailto が馴染み深いです。

URLスキーム 指し示す対象 URLの例
tel 電話番号 tel:0526845841
mailto メールアドレス mailto:xxx@example.com

tel:0526845841 や mailto:xxx@example.com はURLなので、以下のようにWebページ内に リンクとして設置することができます。

ちなみに、書いてあるHTMLは以下のようなものです。HTMLの詳細については こちらの記事 をご参照ください。

今すぐ <a href="tel:123456789">123-456-789</a> までお電話ください
今すぐ <a href="mailto:xxx@example.com">xxx@example.com</a> までご連絡ください

上記のリンクをパソコンでクリックすると、電話番号のほうは「対応するアプリケーションがない」的なエラーになるか、SkypeやFaceTimeなどの電話ができるアプリケーションが開くはずです。

メールアドレスのほうは、標準のメールソフトやGmail（あらかじめ設定されていれば）などが開くはずです。

スマートフォンなどでクリックした場合は、電話アプリが開いたり標準のメールソフトが開いたりします。

このように、電話番号やメールアドレスを URLという形で明確に指し示す ことによって、Webページ上のリンクから直接「電話をかけさせる」「メールを送らせる」といったアクションをとらせることができます。

URLという規約に則っているからこそ、ブラウザがそのURLへリンクしたときにパソコンやスマートフォンといったプラットフォーム全体としてどんな動作をすればいいかが明確に決められるということですね。

まとめ

  • WebページのURLは、無数に存在するWebページの中から、 「このWebサーバー上の、このフォルダにある、このページ」 というのを一意に指定するためのもの
  • WebページのURLにおいてアンカーとパラメータの順番は間違いやすいので要注意（ パラメータが先、アンカーが後 ）
  • Webページ以外にも色々なものをURLによって指し示すことができ、「指し示すものが何であるか」はURLスキームによって表す
  • WebページのURLスキーム（ http https ）以外としては、Webの世界では mailto や tel が馴染み深い
  • mailto や tel を活用すると、Webページ上のリンクから直接「電話をかけさせる」「メールを送らせる」といったアクションをとらせることができる
GitHubで編集を提案

Discussion