ここまでの1往復を、1本の流れにつなぐ
ここまでのカテゴリDでは、要求と応答を1往復ずつ見てきました。クライアントとサーバーの役割、URLの構造、HTTPのリクエストとレスポンス、そして前回のHTTPSまでです。今回は、それらをばらばらの部品としてではなく、URLを入力してから画面が出るまでの一本の流れとしてつなぎ直します。カテゴリDの総仕上げの一歩手前にあたる回です。
このスライドのポイント
- ここまでのカテゴリD: クライアントとサーバー、URLの構造、HTTPのリクエストとレスポンス、HTTPSを1往復ずつ見てきた
- 今回はそれらを、URLを入力してから画面が出るまでの一本の流れとしてつなぎ直す
- カテゴリDの総仕上げの一歩手前にあたる回
表示までの7段階
表示までは、大きく7段階に分かれます。①DNSでホスト名から接続先を調べます。DNSとは、名前から接続先の住所を引く電話帳のような仕組みで、詳しくはカテゴリC、インターネット・ネットワークで扱います。②サーバーへ接続します。HTTPSならここでTLSが働きます。これはD-08で見たとおりです。③HTTPで要求と応答をやり取りします。これはD-03とD-04で見た形です。④受け取ったHTMLを解析し、⑤CSSを適用し、⑥JavaScriptを実行し、⑦画面に描画します。この描画をレンダリングとも呼びます。CSSや画像、JavaScriptのファイルも、それぞれ③の要求と応答で追加取得されます。
このスライドのポイント
- ①DNSでホスト名から接続先を調べる（DNS＝名前から接続先の住所を引く電話帳のような仕組み。詳しくはカテゴリC、インターネット・ネットワークで扱う）
- ②サーバーへ接続（HTTPSならここでTLS。D-08で見たとおり）
- ③HTTPで要求・応答（D-03・D-04で見た形）
- ④HTMLを解析 → ⑤CSSを適用 → ⑥JavaScriptを実行 → ⑦画面に描画（描画＝レンダリング）
- CSS・画像・JavaScriptファイルも、それぞれ③の要求・応答で追加取得される
なぜ7段階で見るのか
この流れを知らないと、白い画面や遅いといった症状を、ひとくくりに報告してしまいます。ですが、どの段階で止まったかによって、原因も相談すべき相手もまったく違います。名前が引けないのか、応答が4xxや5xxで返っているのか、JavaScriptがエラーで止まっているのか。段階で切り分けられると、同じ「表示されない」でも対処の方向が定まります。
このスライドのポイント
- 知らないと「白い画面」「遅い」をひとくくりに報告してしまう
- どの段階で止まったかで、原因も相談先もまったく違う
- 名前が引けない／4xx・5xxが返る／JavaScriptがエラーで止まる、は別の問題
前半はネットワーク、後半はブラウザの中
全体像を見ます。7段階は、前半の①から③がネットワーク側、後半の④から⑦がブラウザの中、という2つのまとまりに分けられます。そして各段階には、代表的な失敗があります。①でつまずけばそもそも届かず、③でつまずけばD-06で見た4xxや5xxが返り、⑥でつまずけば表示後の動きが壊れます。どこで失敗したかが、症状の見え方に表れます。
このスライドのポイント
- 前半（①〜③）＝ネットワーク側、後半（④〜⑦）＝ブラウザの中、の2つのまとまり
- 各段階に代表的な失敗がある
- ①失敗＝そもそも届かない／③失敗＝D-06の4xx・5xx／⑥失敗＝表示後の動きが壊れる
ページ1枚＝リクエスト1回、ではない
具体例です。通販ページを1枚開くとき、実は通信は1回では終わりません。HTMLを1件受け取ったあと、そのHTMLが指し示すCSSやJavaScript、画像などが、それぞれ追加の要求として飛んでいます。ページを1枚開くことと、リクエスト1回は、同じではありません。1つの画面が、複数の要求と応答の積み重ねで組み立てられている、という感覚を持ってください。
このスライドのポイント
- 通販ページを1枚開くと、通信は1回では終わらない
- HTML1件＋CSS・JavaScript・画像など複数の要求が飛ぶ
- 1つの画面は、複数の要求・応答の積み重ねで組み立てられている
技術サンプル: 7段階と失敗の対応
サンプルを見ます。種別はdiagram、目的は、7段階と各段階で起きやすい失敗を対応づけて読むことです。図は、①のDNSから⑦の描画までを縦に並べ、各段階の失敗の見え方を右に添えています。読み方は2つあります。①から③はネットワーク、④から⑦はブラウザの中であること。そして、失敗の見え方が段階ごとに違うことです。AIへの質問例は、画面が真っ白ですが、どの段階で止まっているかを確認する手順を、この7段階に沿って教えてください、です。
このスライドのポイント
- 種別: diagram
- 目的: 表示までの7段階と、各段階で起きやすい失敗を対応づけて読む
- サンプル本体:
「読み込みが遅い」と「表示・動作が遅い」は別
混同しやすいのは、読み込みが遅いと、表示や動作が遅いの違いです。読み込みが遅いのは①から③のネットワーク段階、表示や動作が遅いのは④から⑦のブラウザ段階の問題です。前者なら通信とサーバーを、後者なら画面側のコードを疑います。同じ「遅い」でも、疑う場所が正反対になります。
このスライドのポイント
- 読み込みが遅い＝①〜③のネットワーク段階の問題
- 表示・動作が遅い＝④〜⑦のブラウザ段階の問題
- 前者は通信とサーバーを、後者は画面側のコードを疑う
バイブコーディングでの確認点
バイブコーディングでの確認点です。表示の不具合をAIへ相談するときは、どの段階まで進んでいるかを添えます。たとえば、他のページは開けるなら①と②は生きている、ボタンだけ効かないなら⑥が怪しい、というようにです。切り分けの言葉を一緒に渡すと、AIの回答が一気に的確になります。質問例は、この7段階のうち、いま止まっているのはどこかを一緒に絞り込んでください、です。
このスライドのポイント
- 表示の不具合をAIへ相談するときは「どの段階まで進んでいるか」を添える
- 例: 他のページは開ける＝①②は生きている／ボタンだけ効かない＝⑥が怪しい
- 切り分けの言葉を渡すと、AIの回答が一気に的確になる
まとめと次回への橋渡し
一問一答です。HTMLを受け取ったあと、描画までにブラウザがする3つの仕事は何でしょうか。（間）答えは、HTMLの解析、CSSの適用、JavaScriptの実行です。30秒まとめとして、表示までは7段階、前半はネットワーク、後半はブラウザの中、そして失敗の見え方は段階ごとに違う、と押さえてください。次回はカテゴリD最終回、ブラウザが別の出所への通信を止める理由、CORSへ進みます。関連資料は、Webアプリ構成図入門、エラー文の読み方、Webアプリ構築 完全ワークフローです。
このスライドのポイント
- 一問一答: HTMLを受け取ったあと、描画までにブラウザがする3つの仕事は？ → HTMLの解析・CSSの適用・JavaScriptの実行
- 30秒まとめ: 表示までは7段階／前半はネットワーク・後半はブラウザの中／失敗の見え方は段階ごとに違う
- 次回: カテゴリD最終回、ブラウザが「別の出所」への通信を止める理由＝CORSへ
- 関連資料: 「Webアプリ構成図入門」「エラー文の読み方」「Webアプリ構築 完全ワークフロー」
