KAKUTA TECH BLOG

Blog Article

React のレンダリングを徹底解説

はじめに

React を学び始めると、必ずと言っていいほど「レンダリング」という言葉に出会います。さらに学習を進めると、「仮想 DOM」「 diff 」「 commit 」「 patch 」といった専門用語が登場し、頭の中が混乱しやすくなります。実はこれらはすべて、React が画面をどのように更新しているかという一連の流れを説明するための言葉です。

この記事では、プログラミング初学者の方でも理解できるように、React のレンダリングの仕組みを順番に、やさしい言葉で、かつ裏側の動きまで丁寧に説明します。「結局、React は裏で何をしているのか？」が、はっきりイメージできることを目標にします。

参考リンク

“ Reconciliation ” React 公式ドキュメント

https://react.dev/learn/reconciliation

“ Render and Commit ” React 公式ドキュメント

https://react.dev/learn/render-and-commit

“ Virtual DOM Explained ”

https://reactjs.org/docs/faq-internals.html

レンダリングとはなにか？

一言で言うと、レンダリングとは「データの状態をもとに、画面に表示する内容を決めて、実際に表示すること」です。

Web アプリケーションでは、ボタンを押したり、入力したり、データを取得したりするたびに、画面の表示内容が変わります。そのたびに、画面を正しく更新しなければなりません。この「画面を更新する仕組み」がレンダリングです。

もしレンダリングの仕組みがなければ、開発者は手動で DOM を書き換える必要があります。これはミスが起きやすく、コードも複雑になります。React は、この作業を自動化してくれます。

どんな場面で使うか

  • ボタンを押して数値を増やすとき
  • フォームに入力した文字を画面に反映するとき
  • API から取得したデータを一覧表示するとき
  • 条件によって表示内容を切り替えるとき

これらすべてで、レンダリングが働いています。

コード例

まずは最小構成のコードを見ます。

// App.jsx
import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
    </div>
  );
}
// main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <App />
);

このシンプルなコードの裏側で、React はとても賢いことをしています。ここから、レンダリングの流れを順番に説明します。

① render

一言で言うなら、render とは「この状態なら、どんな画面になるかを計算すること」です。

画面を更新するには、「いまのデータで、どんな UI になるか」を毎回計算する必要があります。

上記のコードで setCount が呼ばれると、App 関数がもう一度実行されます。これが render です。ここで React は JSX を読み取り、「新しい UI の設計図」を作ります。

この時点では、まだ実際の画面（ DOM ）は変更されていません。

以下の時に処理が行なわれます。

  • コンポーネントが最初に表示されるとき
  • state が変更されたとき
  • 親コンポーネントが再実行されたとき

② 仮想 DOM

一言で言うなら、仮想 DOM とは「画面の設計図を JavaScript のオブジェクトとして表現したもの」です。

いきなり本物の DOM を触ると処理が重くなります。そのため、まずは軽い JavaScript オブジェクトとして UI を管理します。

render の結果、React は次のような「仮想的な構造」を作ります（イメージです）。

{
  type: "div",
  children: [
    { type: "p", children: [count] },
    { type: "button", children: ["+1"] }
  ]
}

このデータ構造が仮想 DOM です。

③ diff

一言で言うなら、diff とは「前回の仮想 DOM と今回の仮想 DOM の違いを見つけること」です。

画面全体を毎回作り直すと、無駄な処理が増えます。変わったところだけを更新すれば、高速に動きます。

例えば、count が 0 から 1 に変わった場合、React は次の違いに気づきます。

  • <p> の中の文字だけが変わった

それ以外は同じなので、更新する必要がありません。

④ commit（patch）

一言で言うなら、commit とは「diff の結果をもとに、本物の DOM を書き換えること」です。

仮想 DOM はあくまで設計図なので、最終的には本物の DOM を変更する必要があります。

diff の結果、「 p タグの文字だけ変わった」と分かっているので、React はその部分だけを書き換えます。これを patch と呼ぶこともあります。

⑤ ブラウザの描画

ここで初めて、ブラウザが画面を描画します。

React の内部処理が終わり、DOM が更新された結果、ユーザーの目に見える形で表示が変わります。これが最終的なレンダリングです。

何が起きているのか？（裏側の動き・データの流れ）

  1. setCount により state が変更される
  2. App 関数が再実行される（ render ）
  3. 新しい仮想 DOM が作られる
  4. 前回の仮想 DOM と比較される（ diff ）
  5. 変更点だけが DOM に反映される（ commit / patch ）
  6. ブラウザが再描画する

何をしているのか？（コードの視点）

コード

何をしているか

useState(0)

state を定義している

setCount(count + 1)

state を更新している

return (...)

UI の設計図を返している

createRoot(...).render(<App />)

React のレンダリングを開始している

具体例まとめ

  • render は「UI を計算する処理」
  • 仮想 DOM は「UI の設計図」
  • diff は「違い探し」
  • commit は「本物の DOM を修正」
  • レンダリングは「画面に反映」

まとめ

手順

役割

render

UI を計算する

仮想 DOM

UI をデータとして保持

diff

変更点を見つける

commit

DOM を部分更新する

レンダリング

画面に表示される

React のレンダリングは、「毎回画面を作り直している」のではなく、「差分だけを賢く更新している」仕組みです。この流れを理解すると、なぜ React が高速なのか、なぜ state が重要なのか、なぜ再レンダリングが起きるのかが、すべてつながって見えてきます。

レンダリングという言葉が混乱を生む理由（補足）

ここまでで、React のレンダリングの流れを

① render → ② 仮想 DOM → ③ diff → ④ commit（ patch ） → ⑤ ブラウザ描画

の順番で説明してきました。

しかし、ここで多くの初学者が必ず混乱するポイントがあります。それは、「レンダリング」という言葉が、文脈によって意味が変わるということです。

このズレを理解していないと、

  • 「再レンダリングが起きる」と言われたときに何が起きているのか分からない
  • render と レンダリング の違いが分からない
  • React の処理とブラウザの処理の境界が分からない

といった状態になってしまいます。

レンダリングという言葉は、2 つの意味で使われています。

React を知らない人にとって「レンダリング」は「画面が表示されること」です。でも React にとってレンダリングは「画面を作る計算」 のことです。

ここに言葉のズレがあります。

① 広い意味の「レンダリング」

こちらは会話や記事でよく使われる意味です。

【state が変わってから、画面が更新されるまでのReact の一連の処理すべて を指して「レンダリング」と呼ぶ】

つまり、

【render → 仮想 DOM → diff → commit → ブラウザ描画】

この全部まとめてを「レンダリング」と言うことが多いです。

ブログや解説記事で「再レンダリングが起きる」と書いてある場合、ほぼこの意味です。

② 狭い意味の「レンダリング」

React の内部や公式ドキュメントの文脈では、レンダリングはもっと限定的な意味で使われます。

【render とは「コンポーネント関数が実行され、仮想 DOM を作るフェーズ」のこと】

つまりここだけです。

【render（計算フェーズ）】

React 公式の「 Render and Commit 」では、この意味で使われています。

なぜこの違いが重要なのか

この違いを理解していないと、「再レンダリングが起きた」と聞いたときに、

  • 画面が描画されたのか
  • コンポーネントが再実行されたのか
  • DOM が書き換えられたのか

が区別できなくなってしまいます。

React を正しく理解するためには、React がやっている処理 とブラウザがやっている処理 を分けて考える必要があります。

まとめ

  • React の render は「 UI を計算すること 」
  • ブラウザの render は「 画面を描画すること 」
  • 一般的なレンダリングという言葉は、この両方を含むことがある

この違いを意識できるようになると、React のドキュメントや技術記事が格段に読みやすくなります。