Reactの理解でつまずきやすいのが「仮想DOM」と「再レンダー」です。この記事では、細かい内部実装よりも、開発者として必要な考え方に絞って説明します。
DOMとは何か
DOM（Document Object Model）は、HTMLをJavaScriptから扱うための仕組みです。ブラウザはHTMLを読み込むと、内部で「要素の木構造」を作ります。これがDOMです。
従来のやり方では、UIの変更はDOMの操作になります。
document.querySelector("#title").textContent = "Hello"小規模なら問題ありませんが、状態が増えると「どこをいつ更新するか」が複雑になります。
ReactはUIをどう更新するのか
Reactは「state → UI」という関係を前提にします。stateが変わったら、Reactはそのコンポーネントを 再レンダー（render） します。
再レンダーといっても、毎回DOMを全置換するわけではありません。Reactは「前回のUI」と「今回のUI」を比較し、差分だけを反映します。
仮想DOMは何のためにあるのか
仮想DOM（Virtual DOM）は「UIのスナップショット（のようなもの）」と捉えると理解が早いです。実際にはReact要素のツリーですが、イメージは「前回のUIツリー」と「今回のUIツリー」を比較するための中間表現です。
重要なのは次の一点です。
- 開発者は仮想DOMを直接触らない（触る必要がない）
- 代わりに stateを更新する
この設計により、UI更新の責務をReact側に寄せられます。
再レンダーで壊れないためのルール
再レンダーは頻繁に起きます。よって、レンダー中に「副作用（外部に影響する処理）」を置くと壊れやすくなります。
避けたい例：
- レンダー中にAPI呼び出し
- レンダー中にlocalStorageへ書き込み
- レンダー中にMath.random()をUIのキーに使う
副作用は基本的に useEffect に寄せます（後半回で扱います）。
チェックリスト
- DOMは「ブラウザ内部のHTML表現」
- Reactは state からUIを作り、state更新で再レンダー
- 仮想DOMは差分計算のための中間表現（直接触らない）
- レンダーは何度も走るので、副作用はレンダー外へ
練習問題
- 「命令的UI」と「宣言的UI」の違いを自分の言葉で説明してみましょう。
- 「stateを更新する」ことと「DOMを書き換える」ことの違いは何でしょうか？
- レンダー中にAPI呼び出しをすると問題になりやすい理由は？
コメント