URL を打ってから画面が出るまで

読了目安約4分

ブラウザに URL を入力してから画面が表示されるまでの流れを一本の物語として追い、Part 2 全体の地図を描く。

この章の目次

次の Part では、ブラウザに応答する側のプログラム（サーバー）を Go で書きます。書く前に、自分のプログラムが「誰から何を受け取り、何を返せばいいのか」を知っておく必要があります。それを確かめるために、アドレス欄に https://example.com/hello と打ってから画面が出るまでを一本の流れで追います。

URL は部品に分解できる

URL（Uniform Resource Locator）は、「どこにある何が欲しいか」を 1 行で表す文字列です。 https://example.com/hello?lang=ja は、次の 4 つの部品からできています。

スキーム：https の部分。どういう方式で通信するかを表します。
ホスト名：example.com の部分。どのコンピュータに話しかけるかを表します。
パス：/hello の部分。そのコンピュータの中のどの資源が欲しいかを表します。Part 3 のルーティング（/server/02-routing/）で主役になります。
クエリ文字列：?lang=ja の部分。? 以降に付ける追加の指定です。リクエストの受け取り方（/server/03-request/）で主役になります。

スキームが https のときは、同じ会話を暗号化して送ります（http は素のまま送ります）。

名前を住所に変える

ネットワーク上のコンピュータは、IP アドレスという数値の住所（192.0.2.1 のような形式）で識別されています。 DNS（Domain Name System）は、ホスト名から IP アドレスを引く、インターネット全体で共有された電話帳のような仕組みです。

接続する

通信を頼む側をクライアント、頼まれて応じる側をサーバーと呼びます。

通信の相手は、そのコンピュータで動いている 1 つのプログラムです。実行中のプログラムをプロセスと呼びます。 1 台の上では多数のプロセスが動くので、どのプロセス宛てかはポートという番号で区別します。

https の通信はポート 443 に届き、そこで待ち受けているプロセスが応対します（http はポート 80 です）。この待ち受けるプログラムは、Part 3 で Go で書きます（/server/01-hello-server/）。

会話する

ブラウザとサーバーの会話の決まりが HTTP（HyperText Transfer Protocol）です。クライアントが送る依頼をリクエスト、サーバーが返す答えをレスポンスと呼びます。どちらも中身は、人間が読めるただのテキストです。この往復がこの教室の主役です。Part 3 で書くサーバーの仕事はレスポンスを返すことだけですし、ISUCON のスコアも「時間内にいくつの往復を捌けたか」で決まります。

メソッド：リクエストの種類です。取得は GET、送信は POST を使います。
ステータスコード：レスポンスの先頭に付く 3 桁の結果通知です。200 は成功、404 は「頼まれたものが見つからない」、500 はサーバー側の失敗です。
ヘッダー：リクエストとレスポンスに付く補足情報です。たとえば Content-Type というヘッダーは、「本体は HTML です」のように中身の形式を伝えます。

表示する

レスポンスの本体には多くの場合、HTML という形式の文書が入っていて、ブラウザはそれを解釈して画面に描画します。 HTML の中に画像などの指定があれば追加のリクエストが飛ぶため、1 ページの裏で何十回もの往復が起きるのが普通です。 HTML と JSON は次章（/web/02-html-json/）で読みます。

全体の流れ

テキスト

ブラウザ（クライアント）                        サーバー
    |
    | 1. URL を分解する
    |    https://example.com/hello
    |    スキーム / ホスト名 / パス
    |
    | 2. DNS でホスト名から IP アドレスを引く
    |    example.com -> 192.0.2.1
    |
    | 3. IP アドレスのポート 443 に接続する    +------------------+
    |------------------------------------------>| ポート 443 で    |
    |                                           | 待ち受けている   |
    | 4. リクエストを送る                       | プログラム       |
    |    「/hello をください」                  |                  |
    |------------------------------------------>| 処理する         |
    |                                           |                  |
    | 5. レスポンスが返る                       |                  |
    |<------------------------------------------| HTML を返す      |
    |                                           +------------------+
    | 6. HTML を描画して画面に表示する
    v
   画面

4 と 5 の生のテキストを curl というツールで読む方法は、付録（/appendix/01-http/）にあります。