Chapter 2: UIのレンダリング
React を学ぶ前に，ブラウザがどのようにして HTML を読み取り，画面を描画しているのかを押さえておきましょう。仕組みを理解しておくと，React が何を助けてくれるのかが見えやすくなります。
1枚のページが表示されるまで
- ユーザーが URL にアクセスすると，サーバーは HTML を返す。
- ブラウザは HTML を上から順に読み込み，DOM（Document Object Model） という木構造を組み立てる。
- DOM の内容をもとに画面が描画される。
HTML はあくまで「テキスト」であり，ブラウザが DOM へ変換することで初めて UI として扱えるようになります。
DOM とは？
DOM は HTML の各要素をオブジェクトとして表現したものです。親子関係を持つツリー構造になっており，JavaScript から次のように操作できます。
- 任意の要素を選択する
- 新しい要素を追加する
- テキストや属性を更新する
- 要素を削除する
こうした操作をまとめて DOM 操作 と呼びます。ページに動きを付ける基本はすべて DOM に触れるところから始まります。
開発者ツールで DOM を観察しよう
ブラウザの開発者ツール（F12）の Elements / Inspector タブを開くと，現在の DOM ツリーが確認できます。HTML との違いを見比べてみましょう。
この章で押さえておきたいポイント
- ブラウザは HTML を元に DOM を作り，DOM を描画している。
- JavaScript から DOM を直接操作することで，UI を動的に更新できる。
- React はこの DOM 操作をもっと扱いやすくするために生まれた。
次の章では，実際に JavaScript だけで DOM を操作しながら，宣言的な UI 思想へつながる課題を体験します。