🔩 ねじき教室 Go と Web の教室

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

読了目安 約4分

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

30秒でつかむ Webは、リクエストとレスポンスの往復
Webは、リクエストとレスポンスの往復ブラウザが名前から届け先を調べ、HTTPリクエストを送り、HTMLを受け取って画面を描きます。1URLとDNS届け先を決める2HTTP依頼を送る3HTML画面を作る
  1. URLとDNS 届け先を決める
  2. HTTP 依頼を送る
  3. HTML 画面を作る
この章の目次

次の 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 のルーティングとハンドラで主役になります。
  • クエリ文字列?lang=ja の部分。? 以降に付ける追加の指定です。リクエストを受け取るで主役になります。

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

名前を住所に変える

ネットワーク上では、IP アドレスという数値の住所を使って、データの届け先を指定します。 たとえば 192.0.2.1 のような形です。

DNS(Domain Name System)は、ホスト名から IP アドレスを引く、インターネット全体で共有された電話帳のような仕組みです。

家の中と外では住所が違う

PC やスマートフォンには、家のネットワーク内だけで通じるプライベート IP アドレスが付きます。 「ローカル IP」とも呼ばれます。

一方、ルーターはインターネット側で通じるグローバル IP アドレスを持ちます。 IPv4 では、家の複数の機器がルーターのグローバル IP を共有するのが一般的です。

PC とスマートフォンが、ルーターを通して一つのグローバル IP アドレスを共有する図

ルーターは送信元をプライベート IP からグローバル IP に書き換え、どの機器から出た通信かを記録します。 返事が来たら、その記録を見て元の機器へ戻します。 この変換が NAT(Network Address Translation)です。

ポートはアプリの窓口

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

IP アドレスだけでわかるのは、どのコンピュータへ届けるかまでです。 その中では Web サーバーなど複数のアプリが通信を待っています。

ポートは、どのアプリに渡すかを示す窓口番号です。

IP アドレスでコンピュータに着き、ポート 443 で Web サーバーに届く図

https の通信はポート 443 に届き、そこで待つ Web サーバーが応対します。 http の窓口はポート 80 です。 この待ち受けるプログラムは、Part 3 の最小の Web サーバーで Go で書きます。

動いているアプリを正確にはプロセスと呼びます。まずは「ポート番号でアプリを選ぶ」と読めれば十分です。

会話する

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

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

表示する

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

全体の流れ

URL の入力、DNS、ポートへの接続、HTTP の往復、画面表示までの流れ

4 と 5 の生のテキストを curl というツールで読む方法は、付録のHTTP を生で読むにあります。