ここまでの記事で作ったWebページは、自分のパソコンの中にあるファイルでした。ダブルクリックすれば開きますが、それを友人に見せようと思ってもURLを送ることはできません。

では、遠くにいる相手のブラウザーにページが表示されるまで、何が起きているのでしょうか。前回引いた「フロント／サーバー」の地図の上に、この流れを重ねていきます。

1. URLを入れてから画面が出るまで

ブラウザーにURLを入れてから画面が出るまでを、一本の線で追ってみます。

  1. ドメイン … example.com のような住所を打ちます。
  2. DNS … その住所を、サーバーの実際の番号（IPアドレス）に変換します。
  3. リクエスト … その番号の相手に「このページをください」とお願いします。
  4. レスポンス … サーバーがHTMLを返してくれます。
  5. 組み立て … 返ってきたHTMLをブラウザーが読み、CSSで見た目を作り、JavaScriptで動かします。

体感では一瞬ですが、この5段階は毎回きちんと踏まれています。以下、順に見ていきます。

2. ドメインとDNS ― 名前を番号に変える電話帳

shigenoki.com のような文字列をドメインと呼びます。これは人間が覚えるための名前で、コンピュータ同士は実際には次のようなIPアドレスという番号でやりとりしています。

shigenoki.com  →  104.21.32.1

名前から番号を調べる仕組みが DNS（Domain Name System） です。役割としては電話帳とまったく同じで、「名前は知っているが番号は知らない」という状態を埋めてくれます。

ブラウザーはURLを受け取ると、まずDNSに問い合わせて番号を手に入れます。ドメインを新しく取得したときにすぐ繋がらないことがあるのは、この電話帳に情報が行き渡るまで時間がかかるためです。

3. リクエストとレスポンス ― 「ください」「どうぞ」

番号が分かったら、ブラウザーはその相手にリクエストを送ります。中身はおおよそ「このパスのものをください」という短いお願いです。

GET /articles/how-your-page-reaches-users
Host: shigenoki.com

サーバーはそれを受け取り、レスポンスとしてHTMLを返します。

200 OK
Content-Type: text/html

<!DOCTYPE html>
<html lang="ja">
...

先頭の 200 は「うまくいった」という合図です。有名な 404 は「そんなページはない」、500 は「サーバー側で問題が起きた」を意味します。ページが真っ白になったとき、この番号を見るとフロントの問題かサーバーの問題かの見当がつきます。

4. ブラウザーが組み立てる

HTMLが返ってきた時点では、まだ文字が並んだテキストにすぎません。ここからはブラウザーの仕事です。

  • HTMLを読んで、どこが見出しでどこが段落かという構造を組み立てます。
  • <link> や <img> を見つけるたびに、CSSや画像を追加で取りに行きます。
  • CSSを当てて見た目を決め、JavaScriptを実行して動きを与えます。

最初のHTML1枚で終わりではなく、必要なファイルを何度も取りに行っている、というのがポイントです。読み込みが遅いページというのは、たいていこの往復が多すぎるページです。

5. ローカルのファイルとの違い

自分のパソコンのindex.htmlと、インターネット上のページの違いは、実はこれだけです。

ローカルのファイル インターネット上のページ
開き方 ダブルクリック URLを入力
アドレス file:///Users/... から始まる https:// から始まる
見られる人 自分だけ 住所を知っている人なら誰でも
置き場所 自分のパソコン サーバー

file:// と https:// の違いは、単に「どこから持ってきたファイルか」を表しています。この「サーバーに置く」という一手間が、のちの「実際にデプロイしてみる」の主題です。

6. 地図に対応づける

前回の「フロント／バック」の地図に、この一本道を重ねるとこうなります。

  • DNSで住所を引き、サーバーに届き、HTMLが返るまで … インターネットの仕組みとサーバー（バック）側
  • 返ってきたHTML・CSS・JavaScriptが動く … 利用者のブラウザー（フロント）側

「どこまでがサーバーの仕事で、どこからが自分のブラウザーの仕事か」を、この線の上で指させるようになれば十分です。表示が崩れているならブラウザー側、そもそもページが出てこないならサーバー側、と当たりを付けられるようになります。

まとめ

  • URL → DNS → リクエスト → HTMLが返る → ブラウザーが組み立てる、という一本道。
  • DNSは名前を番号に変える電話帳。200 / 404 / 500 は結果の合図。
  • ローカルのファイルとの違いは「サーバーに置いてあるかどうか」だけ。