Reactで書いたコードは、実際にはどのようにブラウザーへ描かれるのでしょうか。
useStateで状態を変えると魔法のように画面も変わりますが、裏ではブラウザー、JavaScriptエンジン、Reactが緊密に協力しています。
第0週では、コードを書くことから一歩進み、そのコードがブラウザーという舞台で動き、読者の前に現れる基本原理を探ります。
ブラウザーの描画過程、JavaScriptの動作、多様なレンダリングモデルの理解は、Reactを深く効果的に使う土台になります。
Reactのコードは主にJSXを含むJavaScriptファイルですが、ブラウザーはJSXを直接理解できません。
理解できるHTML、CSS、JavaScriptへ変換する必要があります。
ビルド
とは、コンポーネント、JSX、新しいJavaScript構文、CSSなどを、ブラウザーで実行できる静的ファイルへ変換する作業です。
ツール
としては、
Babel
のようなトランスパイラーがJSXや新しい構文を古いブラウザーにも対応する形へ変換し、
Webpack
や
Parcel
などのバンドラーが、複数のファイルと依存関係を一つ、または少数のファイルへまとめます。
Create React AppやViteは、こうした設定を内部で使いやすく提供しています。
成果物である
index.htmlと複数の
.js、
.cssがウェブサーバーから届くと、画面を描き始められます。
コードの変換過程
HTML、CSS、JavaScriptを受け取り、目に見えるピクセルへ変えるまでには、決まった段階があります。
Rendering Pipeline
、または
Critical Rendering Path
と呼びます。
性能の最適化とReactの描画方式を理解するうえで重要な過程です。
まずHTMLを読み解き、
DOM（Document Object Model）ツリー
を作ります。
文書の構造と内容をオブジェクトで表したものです。
<html>、
<body>、
<div>、
<p>などのタグがノードとなり、親子関係を構成します。
<!DOCTYPE html>
<html>
<head><title>My Page</title></head>
<body>
<div>
<h1>Hello</h1>
<p>World</p>
</div>
</body>
</html>
このHTMLは次のようなDOMツリーになります。
DOMツリー
HTML解析中に
<link>や
<style>を見つけると、CSSの解析を始めます。
CSSを解釈して
CSSOM（CSS Object Model）ツリー
を作ります。
DOMへ適用するスタイル規則をツリーで表し、色、大きさ、位置などの情報を保持します。
DOMとCSSOMを組み合わせ、
レンダーツリー
を生成します。
実際に表示する要素
だけを含み、スタイルの情報も持っています。
display: none;の要素はDOMにはありますが、表示しないためレンダーツリーには入りません。
<head>のように見た目を持たない要素も除外します。
[DOM 트리]
├── <html>
│ ├── <head>
│ └── <body>
│ ├── <div>
│ ├── <span>
│ └── <p>
[CSSOM 트리]
├── {div { display: block; }}
├── {span { display: none; }}
└── {p { display: block; }}
[렌더 트리]
├── <div>
└── <p>
レンダーツリーはDOMとCSSOMを結び付け、実際に描く要素だけを残した、最終的な視覚表現用のデータ構造です。
レンダーツリーができるまで
各要素をどこに、どの大きさで配置するかを計算するのが
レイアウト
です。
ノードの正確な位置と寸法を決めます。
パーセントや
vh、
vwなどの相対単位も、この段階でピクセルへ変換します。
寸法や位置、DOM構造の変更で配置へ影響すると、再計算が必要になります。
これを
リフロー
と呼び、計算コストの高い作業の一つです。
配置計算の結果から、要素を実際のピクセルへ描くのが
ペイント
です。
文字、色、画像、影などを画面へ塗っていきます。
背景色や文字色など、配置に影響しない見た目だけの変更では、レイアウトを飛ばしてペイントだけをやり直します。
これが
リペイント
です。
Q：「ブラウザーの描画過程を説明してください。」
A：DOM・CSSOM生成、レンダーツリー生成、レイアウト、ペイントの順序と役割を説明します。性能の観点から、リフローとリペイントの違いも理解しておくとよいでしょう。
Reactの初回表示は、このパイプラインとどうつながるのでしょうか。
JavaScriptの実行とVirtual DOMの生成
ブラウザーがビルド済みのJavaScriptを読み込んで実行します。コンポーネント関数が呼ばれ、JSXはReact.createElement()の呼び出しへ変換されます。
Reactは実際のDOMを模した軽いオブジェクトツリー、Virtual DOM
をメモリー上に作ります。実際のDOMノードの生成と挿入
初回は比較対象の古いVirtual DOMがないため、その情報から実DOMノードを作ります。
index.htmlのルートDOMノード、通常は<div id="root"></div>の子として挿入します。ブラウザーの描画を開始する
DOMの挿入をブラウザーが検知し、レイアウトとペイントを行って画面へ反映します。
Reactが直接ピクセルを描くのではなく、DOMを効率的に管理・変更します。
実際の描画はブラウザーの役割です。
Reactは、その作業を効率的にする手助けをしていると考えられます。
以降の更新ではVirtual DOMの比較、つまり再調整により、必要最小限のDOM変更だけを行います。次回詳しく扱います。
ReactはJavaScriptライブラリなので、JavaScriptの仕組みも重要です。
特に
非同期処理
は、イベント処理や状態更新と密接に関係します。
JavaScriptは基本的に
シングルスレッド
で、一度に一つの処理しか実行できません。
それでもウェブページは、クリックへ反応しつつネットワーク要求やアニメーションを扱います。
ブラウザーやNode.jsが提供する
イベントループ
のおかげです。
- コールスタック
実行中の関数を管理します。呼び出した関数を積み、終了したら取り除きます。データ構造の
スタック
と同じです。
- ヒープ
オブジェクトや配列など、動的に作るデータを保存するメモリー領域です。
- タスクキュー・イベントキュー
setTimeoutのコールバック、イベント、ネットワーク応答など、非同期処理の完了後に実行する関数が待ちます。
マイクロタスクとマクロタスク、または単にタスクのキューに分かれることもあります。
- イベントループ
スタックが空か確認し、空ならキューで待つコールバックを一つ取り出し、スタックへ入れて実行することを繰り返します。
イベントループの図
Reactのクリックハンドラーの実行や、
setStateによる更新の予約も、この仕組みの上で動きます。
setStateは直ちに変更と再描画を行うのではなく、作業を予約し、イベントループを通じて適切な時点で処理できます。
この後学ぶバッチ処理とも深く関係します。
Q：「イベントループとは何ですか」「JavaScriptはシングルスレッドなのに、どう非同期処理できますか。」
A：コールスタック、ヒープ、タスクキュー、イベントループの役割と相互作用を説明します。
ウェブページを表示するモデルは一つではなく、Reactはさまざまなモデルと組み合わせられます。
Client-Side Rendering（CSR） 🔗
- 仕組み：最小限のHTMLとJavaScriptを受け取り、JavaScriptの実行で動的にDOMを生成して描画します。Create React Appなど、多くの通常のReactアプリがこの方式です。
- 長所：初回以降は必要なデータだけを交換し、ページ遷移が速く、サーバー負荷も少なくなります。
- 短所：最初に空画面や読み込み表示を長く見る場合があります。Time To First Meaningful Paintが遅く、検索ボットがJavaScriptを待てなければSEOにも不利です。
Server-Side Rendering（SSR） 🔗
- 仕組み：要求時にサーバーがデータを取得し、Reactで完成したHTMLを作って送ります。ブラウザーはすぐ表示し、その後JavaScriptを読み込んで操作可能にします。この過程がHydrationです。
- 長所：Time To First Paintが速く、完成HTMLがあるためSEOに有利です。
- 短所：要求ごとに描画し、サーバー負荷が増えます。両側のロジックを考える必要があり、開発も複雑になります。Next.jsなどが実装を支援します。
Static Site Generation（SSG） 🔗
- 仕組み：ビルド時に全ページのHTMLを作り、要求時にはそのファイルをすぐ提供します。ブログや文書など、変化の少ない内容向けです。
- 長所：非常に速く、HTMLを送るだけなので負荷も少なく、CDNで効率よく配信できます。SEOにも有利です。
- 短所：ビルドが長くなる場合があり、頻繁に変わる動的ページには向きません。Gatsbyや、SSG対応のNext.jsなどを使います。
Q：「CSR、SSR、SSGの違いと長所・短所を説明してください。」
A：原理、代表的な長所と短所、適した用途を説明します。
今回はReactのコードから一歩進み、ウェブという大きな環境でアプリが動く基礎を確認しました。
- Reactコードはビルドで、ブラウザーが理解できるHTML、CSS、JavaScriptへ変換される。
- ブラウザーはDOM・CSSOM、レンダーツリー、レイアウト、ペイントの順で描画する。
- Reactの初回表示はVirtual DOMを作り、実DOMを変更してブラウザーの描画を始める。
- JavaScriptはシングルスレッドでも、イベントループで非同期処理を行い、Reactもその仕組みと深く関わる。
- CSR、SSR、SSGなどのモデルがあり、Reactはそれらと組み合わせられる。
こうした基礎は、単にReactの構文を知ること以上に重要です。
性能問題の診断、ユーザー体験の改善、技術的な意思決定に大いに役立ちます。
次回からは、Virtual DOM、Reconciliation、Fiberという、Reactの中心的な原理を本格的に掘り下げます。
Reactのレンダリングと実行環境：Reactを理解して使う第0週