共有ボタンでもらったURLを開いたら、ページの先頭ではなく、途中の見出しから表示された。よく見ると、URLの最後に #check が付いている。アドレス欄の長い文字列は、全部が同じ仕事をしているわけではありません。
URLの仕組みは、通信方法・ドメイン名・パス・追加情報・ページ内位置という5つの部品で場所を指し、ブラウザがドメイン名をDNSで番号に変え、その番号のサーバーからページを受け取ることです。 最後の #check は5つ目の部品で、ページの中のどこを開くかを決めていました。
URLとはでは、リンク先を確かめるためにURLを4つに分けて読みました。ここではそこに # を足した5つの部品で構造を見て、入力してから画面が出るまでの6段階を追います。物語の第39話「URLはページの住所？」の案内板も、同じ並びです。
マコト
アドレス欄の文字を、通信方法・名前・道順に分けると落ち着いて読めそうだね。
ユイ
URLを入れたあと、どの部分をDNSが見て、どこからページ固有の場所になるのか知りたいです。
URLの構造：5つの部品と役割
冒頭のようなURL https://lab.example.com/articles/video/?ref=home#check を部品に分けると、こうなります。
| 部品 | この例 | 役割 | ここが違うと |
|---|---|---|---|
| 通信方法（スキーム） | https:// | どの決まりで取りに行くか | http:// なら暗号化されない通信になる |
| ドメイン名 | lab.example.com | どのサイトか | 別のサイトへ行く |
| パス | /articles/video/ | サイトの中のどのページか | 「ページが見つかりません」になりやすい |
| 追加情報（クエリ） | ?ref=home | ページに渡す条件 | 検索結果や並び順が変わる |
| ページ内位置（フラグメント） | #check | ページのどこを開くか | ページの先頭から開く |
部品がそろっていないURLもあります。https://example.com/ のように、パスが / だけで、? も # もない形がいちばん短い例です。
ドメイン名の中のピリオド（.）は区切りで、右から読むと大きなまとまりから小さなまとまりへ進みます。lab.example.com なら、com の中の example の中の lab です。パスのスラッシュ（/）は、サイトの中の道順の区切りです。
5つの部品は、読む担当がそれぞれ違います。その担当の順番が、入力してから画面が出るまでの流れです。
URLを入力した後に起きること：DNS→サーバー→表示の6段階
- ブラウザがURLを読み、部品に分ける
- ドメイン名だけを取り出す
- DNSで、ドメイン名に合う番号（IPアドレス）を調べる
- 通信方法（HTTPSなど）の決まりで、その番号のサーバーへ、パスと追加情報を付けて「このページをください」と頼む
- サーバーがページのデータを返す
- ブラウザが画面を組み立て、
#があればその位置まで画面を動かす
# から後ろはサーバーへ送られず、6の段階でブラウザだけが使います。冒頭のページが途中の見出しから開いたのは、この最後の段階でした。3で名前から番号を探す流れはDNSの仕組み、4と5の頼み方と返し方はリクエストとレスポンスで追えます。
URLの構造から見る安全確認：行き先はドメイン名で決まる
構造が分かると、ログインや支払いの前にどこを見ればいいかもはっきりします。行き先のサイトを決めるのは、5つの部品のうちドメイン名だけです。パスや追加情報に有名な会社の名前が入っていても、ドメイン名が違えば別のサイトです。
https://example.com/login/は、example.comのサイトhttps://login.example.net/example.com/は、ドメイン名を右から読むとexample.netのサイト
https:// は通り道を守る印で、相手が本物かどうかは別に確かめます。リンクを開く前に見る順番は、URLとはの「ログイン前の30秒」にまとめてあります。
URLの部品を案内板にたとえると、どこまで合う？
マコトはURLを、ラボの案内板にたとえました。どの入口から入るか（通信方法）、どの建物か（ドメイン名）、建物の中のどの部屋か（パス）、部屋で何を見せてほしいか（追加情報）、部屋のどの棚の前に立つか（ページ内位置）。5つの部品が、案内板の5行にそのまま当てはまります。
たとえが外れるのは、部屋が最初から建物の中にあるとは限らないところです。パスはサーバーの中のフォルダをそのまま表すこともあれば、頼まれてからサイトのプログラムがその場でページを作ることもあります。
URLの構造を読み取るミニワーク
次の架空のURLを、5つの部品に分けてみましょう。
https://shop.example.jp/items/123/?color=red#review
- 通信方法：
- ドメイン名：
- パス：
- 追加情報：
- ページ内位置：
答えは、https、shop.example.jp、/items/123/、color=red、review です。このURLを開くと、shop.example.jp の123番の商品ページが、赤を選んだ状態で、レビューの位置から表示されます。
URLの仕組みでよくある質問
Q1. URLとアドレスは、違うものですか？
アドレス欄に入れる文字列の正式な名前がURLで、「アドレス」はその呼び名です。IPアドレスは数字で書いた通信先で、URLの中のドメイン名がDNSでそこへ結びつきます。
Q2. ドメイン名のピリオドは、何の区切りですか？
まとまりの区切りです。右から読むと大きなまとまりから小さなまとまりへ進み、lab.example.com なら com → example → lab の順です。
Q3. 日本語の入ったURLをコピーすると、「%E3%81…」のような記号の列になるのはなぜ？
URLに使える文字は決まっていて、日本語はそのままでは使えないからです。送るときは、% と英数字の組に置き換えます。ブラウザはアドレス欄で日本語に戻して見せることがあるので、コピーした先で記号の列に変わって見えます。中身は同じURLです。
URLの仕組みを、自分のアドレス欄で確かめる
冒頭のページが途中から開いた理由は、URLの最後の #check でした。サーバーが送ってきたのはページ全体で、どこから見せるかはブラウザが # を読んで決めていました。
5つの部品は、担当がはっきり分かれています。ドメイン名はDNSが番号に変え、パスと追加情報はサーバーが読み、# はブラウザだけが使う。この分担が見えると、長いURLも読む場所が決まります。
このページのアドレス欄をタップして、ドメイン名とパスの境目のスラッシュを見つけてみてください。見出しへのリンクから来たなら、最後に # も付いているはずです。
LAB WHITEBOARD
URLの仕組みを一文で説明してみよう
「URLを通信方法・ドメイン名・パス・追加情報・ページ内位置に区切り、入力後にDNS→サーバー→表示と進む順と、#から後ろがブラウザだけで使われる理由を言える。」を、いまの自分の言葉で一文にしてみてください。途中の説明でも大丈夫です。
