Free — 基礎

Reactのレンダリングの流れ

あなたが書くJSXはどのようにしてブラウザの画面になるのか。Virtual DOM・再レンダリング・keyの役割を順を追って理解します。

1. JSX → React要素

JSXはJavaScriptの構文拡張です。ブラウザはJSXをそのまま理解できないため、 BabelやTypeScriptコンパイラによってReact.createElement()の呼び出しに変換されます。

あなたが書くJSX

<button className="btn">
  クリック
</button>

コンパイル後

React.createElement(
  "button",
  { className: "btn" },
  "クリック"
)

React.createElement()が返すのは、 UIの構造を表したシンプルなJavaScriptオブジェクト（React要素）です。これはDOMではありません。

React要素（プレーンなオブジェクト）

{
  type: "button",
  props: { className: "btn", children: "クリック" },
  key: null,
  ref: null
}

2. Virtual DOM（仮想DOM）

React要素のツリー全体をVirtual DOMと呼びます。これはメモリ上に存在するUIの「設計図」です。実際のDOMよりもはるかに操作が軽量です。

Virtual DOM ツリー（概念図）

App

├── Header

├── <nav>

└── TodoList

├── <ul>

├── <li key="1">

└── <li key="2">

3. 再レンダリングとは何か？

stateやpropsが変化すると、Reactはコンポーネント関数を再実行します。これが「再レンダリング」です。新しいVirtual DOMツリーを生成し、前回のツリーと比較（差分検出 = Reconciliation）して、変化した部分だけを実際のDOMに反映します。

1 state / propsが変化

↓

2 コンポーネント関数を再実行 → 新しいVirtual DOMを生成

↓

3 前回のVirtual DOMと差分比較（Reconciliation）

↓

4 変化した部分だけ実際のDOMを更新

⚠️ 重要：「再レンダリング ≠ DOM更新」

再レンダリングはReactのJavaScript上の計算処理です。Virtual DOMを再生成するだけで、必ずしも実際のDOMが更新されるわけではありません。差分がなければDOMは触られません。

4. keyの意味

リストをレンダリングするとき、Reactは各要素を識別するためにkeyを使います。 keyがないと、Reactはリストの変化を正確に追跡できません。

❌ keyなし（問題あり）

todos.map((todo) => (
  <li>{todo.text}</li>
))

先頭に要素を追加すると、Reactはすべての要素が変化したと誤認し、全DOM再構築する可能性がある。

✅ keyあり（正しい）

todos.map((todo) => (
  <li key={todo.id}>{todo.text}</li>
))

keyによって各要素が一意に識別され、Reactは変化した要素だけを効率的に更新できる。

注意： keyにインデックス（index）を使うのは最後の手段です。リストの並び替えや先頭への追加があると、keyが意味をなさなくなります。 安定したユニークIDを使いましょう。

keyはReconciliationアルゴリズムの核心です。有料コースの「Reconciliationの内部」では、このアルゴリズムがなぜO(n)で済むのか、keyがどう機能するかを詳細に解説します。

📌 まとめ

✓ JSXはコンパイルされてReact.createElement()になる
✓ React要素はUIを表したプレーンなJavaScriptオブジェクト（Virtual DOM）
✓ 再レンダリングとは「新しいVirtual DOMを生成してDOMと差分比較する処理」
✓ keyはReconciliationで要素を一意識別するために必須

次のステップ