# URLを打ってから表示されるまで

> レベル: 初級 ／ 対象: 大人
> 出典: Kotowary — https://kotowary.com/learn/units/url-to-page?level=beginner&audience=adult
「example.com」と打ってEnterを押してから、ページが目の前に現れるまで——その一瞬に、世界を巻き込んだリレーが起きています。旅は、**かならずこの順番**で進みます:

1. **住所を調べる** — 名前しか知らない相手の、届け先を知る
2. **道をつなぐ** — 相手と3回の挨拶をして、確かな通り道を作る
3. **注文する** — 「このページください」と頼み、材料を受け取る
4. **組み立てる** — 届いた材料で、目の前でページを組み立てる

この物語は「あなたの端末から1台のサーバまでの**通信経路の旅**」です。同じお願いが、サービス全体の何台もの機械でどう処理されるかは [1リクエストの流れ](/learn/units/web-request-flow) で見られます。

登場人物と流れは、アニメーション『**パケットの旅**』で通して見られます（配役は図の下のリストへ）。以降の①〜④では「旅のどのコマの話か」を毎回示します:

::diagram{name="url-journey"}

同じ「調べてから送る」流れを、あなたの世代の身近な例（手紙・電話・LINE）に置き換えたのがこちら:

::diagram{name="dns-metaphors"}

:::details 文でも読みたい人はこちら
LINE や Instagram で言えばこうです。連絡先を知らない相手に、いきなり DM は送れませんよね。そういうとき頼るのが、**その地域のあらゆる連絡先を知っている「人脈最強の友達」**。「あの人の LINE（インスタ）教えて」と聞けば、連絡先リストから探して教えてくれる。本編に出てくる住所案内所（DNSサーバ）は、インターネット全体にとってのこの「人脈最強の友達」です。しかも本人が知らなければ、別の地域の人脈最強友達に聞いて回ってでも、必ず答えを持って帰ってきてくれます。
:::

## ① 住所を聞く

> 🎬 アニメーション『パケットの旅』の **②〜⑤** のところです！

まず、ブラウザは「example.com」が**どこにあるのか知りません**。名前は知っていても住所を知らない状態です。

そこで最初にやるのが、住所案内所——**DNS**への問い合わせです。「example.com というお店の住所を教えてください」。案内所は台帳をめくり、「その店の住所は 93.184.216.34 です」と数字の住所（**IPアドレス**）を教えてくれます。

大事なのは順番です。**住所がわからないと、郵便局から手紙を送ろうにも送れない**。だからこの旅は必ず「住所調べ」から始まります。たとえでつかみ直したいときは、概要のアニメーション『身近な例で解説』へ。

## ② 電話をつなぐ

> 🎬 アニメーション『パケットの旅』の **⑥〜⑧**（緑の枠のところ）です！

住所がわかったら、いきなり用件を叫ぶのではなく、まず**電話をつなぎます**。挨拶は必ず3回、この順番です:

1. こちらから「**もしもし、話せますか？**」
2. 相手から「**つなげてもらっていいですよ**」
3. こちらから「**じゃあつなげますね**」

この3回で、お互いに「ちゃんと聞こえる相手だ」と確認し合ってから会話が始まります。この確認のおかげで、途中で言葉が抜け落ちても気づいてやり直せる、信頼できる通話になります。

## ③ 注文する

> 🎬 アニメーション『パケットの旅』の **⑨〜⑪** のところです！

電話がつながったら、ようやく注文です。「**このページをください**」。

お店（Webサーバ）は注文を受けて、ページの**設計図（HTML）**を送り返してきます。ここで面白いのは、最初に届くのは完成品ではなく設計図だということ。設計図を読んだブラウザは「この写真も要る」「この飾り付け（CSS）も要る」「この動く仕掛け（JavaScript）も要る」と気づいて、**追加の注文を何度も繰り返します**。

## ④ 組み立てる

> 🎬 アニメーション『パケットの旅』の **⑫**（最後のコマ）のところです！

材料が揃ったら、ブラウザが目の前で組み立てます。組み立てにも順番があります:

1. **骨組みを立てる** — 設計図（HTML）どおりに、見出しや文章の構造を組む
2. **飾り付ける** — 色・配置・大きさ（CSS）で見た目を整える
3. **動きをつける** — ボタンや切り替えなどの仕掛け（JavaScript）を動かす

こうして、ようやくページが表示されます。

ここまでの所要時間、だいたい**1秒未満**。あなたがまばたきする間に、住所案内・3回の挨拶・注文・配達・組み立てが全部終わっています。次にページがなかなか開かないとき、思い出してください。どこかの配達が渋滞しているだけで、仕組みはいつもこの順番で動いています。