# ブラウザの仕組み — 設計図を受け取って画面を組み立てる

> レベル: 初級 ／ 対象: 大人
> 出典: Kotowary — https://kotowary.com/learn/units/browser?level=beginner&audience=adult
サーバから返ってくるのは、じつは**画面そのものではなく、画面の設計図**（HTML・CSS・JS）。それを受け取って、実際の画面に組み立てて見せてくれるのが**ブラウザ**です。

## これは何をする係？

設計図を受け取って建物を建てる**大工さん**を思い浮かべてください。ブラウザは、送られてきた設計図（※1〜3）を解釈し、あなたの見る画面に組み立てます。

- **※1 HTML** — 骨組み（見出し・段落・画像などの構造）
- **※2 CSS** — 見た目（色・大きさ・配置の装飾）
- **※3 JS** — 動き（ボタンの反応・入力チェックなどの振る舞い）

## 仕事の流れ

1. アドレスバーにURLを入れる（宛先を伝える）
2. サーバから **HTML** を受け取る
3. **CSS** で装飾を当て、見た目を整える
4. **JS** を動かして、操作できるようにする
5. 出来上がった画面を描画（※4 レンダリング）して、あなたに見せる

**登場人物メモ**:

- **※4 レンダリング** — 設計図を、実際のピクセル（見える画面）に変換すること

## ブラウザにできること

- **タブ・履歴・ブックマーク** — ページを切り替え、たどる
- **Cookie（※5）** — ログイン状態などを覚えておく小さなメモ
- **検索** — ブラウザ自身が探すのではなく、**検索エンジンにお願いして結果を表示している**だけ

**登場人物メモ**:

- **※5 Cookie** — サイトごとに保存される小さなデータ。「ログイン中」を覚えるのに使う

## ⚠️ うまくいかないとき

- **真っ白** — JSのエラーで組み立てが止まった
- **レイアウトが崩れる** — CSSやJSが読み込めていない
- **古い表示のまま** — 前に受け取ったもの（キャッシュ）が残っている
- **重い・カクつく** — JSの処理が多すぎる