サーバから返ってくるのは、じつは画面そのものではなく、画面の設計図（HTML・CSS・JS）。それを受け取って、実際の画面に組み立てて見せてくれるのがブラウザです。
概要 — まず全体をつかむ
詳細 — 1段階ずつ追う
これは何をする係？
設計図を受け取って建物を建てる大工さんを思い浮かべてください。ブラウザは、送られてきた設計図（※1〜3）を解釈し、あなたの見る画面に組み立てます。
- ※1 HTML — 骨組み（見出し・段落・画像などの構造）
- ※2 CSS — 見た目（色・大きさ・配置の装飾）
- ※3 JS — 動き（ボタンの反応・入力チェックなどの振る舞い）
この部分をもっと深く（中級）
ブラウザは複数のエンジンの集合体です。
- レンダリングエンジン — HTML／CSSを解析して画面を描く
- JSエンジン — JavaScriptを実行する（DOMを操作する）
- ネットワーク／ストレージ — 通信、Cookie・キャッシュ・localStorage の管理
- サンドボックス — タブやサイトを隔離し、悪意あるコードの影響を閉じ込める
登場人物メモ:
- ※1 DOM／CSSOM — HTML／CSSから作られる木構造
- ※2 レンダーツリー — 実際に描くべき要素の木（表示されない要素は除く）
仕事の流れ
- アドレスバーにURLを入れる（宛先を伝える）
- サーバから HTML を受け取る
- CSS で装飾を当て、見た目を整える
- JS を動かして、操作できるようにする
- 出来上がった画面を描画（※4 レンダリング）して、あなたに見せる
登場人物メモ:
- ※4 レンダリング — 設計図を、実際のピクセル（見える画面）に変換すること
この部分をもっと深く（中級）
- パース — HTMLから DOM、CSSから CSSOM を作る
- レンダーツリー — 両者を合わせ、描くべきものを決める
- レイアウト — 各要素の位置・大きさを計算する
- ペイント／合成 — ピクセルに変換し、レイヤーを重ねて表示する
- JSが DOM を書き換えると、必要な範囲で リフロー（再計算）／リペイント（再描画） が走る
- JS実行と描画は 単一のメインスレッド を奪い合う（イベントループ）。重いJSが走っている間は描画も入力も止まる＝画面が固まる
アニメーション『イベントループ（単一メインスレッド）』を開く
ブラウザにできること
- タブ・履歴・ブックマーク — ページを切り替え、たどる
- Cookie（※5） — ログイン状態などを覚えておく小さなメモ
- 検索 — ブラウザ自身が探すのではなく、検索エンジンにお願いして結果を表示しているだけ
登場人物メモ:
- ※5 Cookie — サイトごとに保存される小さなデータ。「ログイン中」を覚えるのに使う
この部分をもっと深く（中級）
- 同一オリジンポリシー（SOP） — 別オリジンのデータに勝手に触れないよう制限する基本ルール
- CORS — 正当に跨ぐときの、サーバ側の許可の仕組み
- CSP（Content-Security-Policy） — SOP／CORSと並ぶ境界。読み込んでよいスクリプトの出所を制限し、不正なスクリプト実行を防ぐ
- 保存領域 — Cookie（サーバに自動送信）／localStorage（手元だけ）の使い分け
- 開発者ツール — 描画・通信・パフォーマンスを観察できる
⚠️ うまくいかないとき
- 真っ白 — JSのエラーで組み立てが止まった
- レイアウトが崩れる — CSSやJSが読み込めていない
- 古い表示のまま — 前に受け取ったもの（キャッシュ）が残っている
- 重い・カクつく — JSの処理が多すぎる
この部分をもっと深く（中級）
- リフロー多発で重い — レイアウトを何度も再計算させている（まとめて変更する）
- JSのブロッキング — 重いJSが描画を止める（分割・遅延読み込み）
- CORSエラー — サーバの許可設定が無く、別オリジンAPIが弾かれる
- CLS（表示中のガタつき） — 画像や広告の領域を先に確保していない
理解度チェック
そのまま解けます（成績は保存されません）。無料アカウントを作ると、学習の記録と進捗の山登りが始まります。
問1. ブラウザが受け取った「HTML・CSS・JS」の役割の組み合わせで正しいのは？
問2. アドレスバーに言葉を入れて検索したとき、実際に「探している」のは？
問3. 設計図（HTML・CSS・JS）を、実際に見えるピクセルの画面に変換することを何と呼ぶ？
問4. 「ログイン中」などを覚えておくために、サイトごとに保存される小さなデータは？
問5. ページが「古い表示のまま」更新されないとき、主な原因として近いのはどれ？
問6. 画面が「真っ白」になってしまうとき、主な原因として近いのはどれ？
問7. 画面の「骨組み（構造）」を作る言語を、英字4文字で何と呼ぶ？
問8. 画面の「見た目（色や配置の装飾）」を整える言語を、英字3文字で何と呼ぶ？