フロントエンドを学んでいると、よく聞く言葉、「レンダリング」
記事を読むたび、エラーにこの言葉が使われるたび、
当たり前のように受け入れてたけど、
そもそもレンダリングって何なの？
とふと立ち止まって考えてみたくなりました。
この記事では、React、Next.js、TypeScriptを使う超初心者エンジニア目線で、
レンダリングを理解してみます。
レンダリングとは何か？
一言で言うと
データ（状態）をもとに、画面を生成する処理
もう少し分解すると、
state（状態）やデータ
↓
UIを計算
↓
DOMを生成・更新
この一連の流れがレンダリングです。
UIを計算する？
「UIを計算する」とは、簡単に言うと「関数を実行してUIの設計書を作ること」です。
もうすでにピンと来ている方は、ここを飛ばして次の
ブラウザの基本レンダリング に進んでOKです！
では、
まず前提として、ご存知の通りReactコンポーネントは「関数」です。
function Counter({ step }: { step: number }) {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + step)}>
+{step}
</button>
</div>
);
}
例えば以下のようにCounterコンポーネントを使います。
<Counter step={2} />
React内部では、Counterコンポーネント（＝関数）が実行されます。
この時、以下のように私たちが設定した戻り値は、
実は「HTML」ではなく、React要素ツリーです。
これからこういうUIを作りますよ、というオブジェクトの設計書のようなものです。
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + step)}>
+{step}
</button>
</div>
);
つまり、
stateとpropsを材料にJSX（＝React要素オブジェクト）を生成する
これがUIの計算です。
さて、それを踏まえた上で次に進みます。
ブラウザの基本レンダリング
例えばこのHTML：
<div>Hello</div>
ブラウザは以下のことをしています。
- HTMLを解析
- DOMツリーを作成
- CSSと組み合わせ
- 画面に描画
これも立派な「レンダリング」です。
Reactでのレンダリング
ブラウザでは私たちがDOMを直接操作していましたが、
Reactでは私たちの役割は「UIの設計書を書くこと」に変わります。
実際のDOM操作は、Reactがやってくれます。
基本構造
function Counter() {
const [count, setCount] = useState(0);
return <div>{count}</div>;
}
ここで起きていること↓
count = 0- ReactがUIを計算
-
<div>0</div>を生成 - 画面に表示
これが 初回レンダリング です。
再レンダリングとは？
setCount(1);
が呼ばれると↓
- stateが変わる
- コンポーネント関数が再実行される
- 新しいUIが計算される
- 変更箇所だけDOM更新される
これが 再レンダリング です。
重要なのは、
私たち開発者は「画面を直接更新する」コードを書かず
「どんなUIにするか」を書くだけ
という考え方です。
ReactがUIの計算結果をもとに、効率的にDOMを更新してくれます。
つまりレンダリングとは、
UIを計算し、その結果をDOMに反映する一連のプロセス
なのです。
TypeScriptは何をしているの？
TypeScript自体はレンダリングしません。
TypeScriptは、
- propsの型を保証
- stateの型を保証
- コンポーネントの構造を保証
つまり、安全にレンダリングできるようにしてくれる存在。
実際にレンダリングしているのはReactです。
Next.jsでのレンダリングの種類
Next.jsではさらに概念が増えます。(これによく苦しめられます)
CSR（Client Side Rendering）
- ブラウザでレンダリング
- Reactが動く
SSR（Server Side Rendering）
- サーバーでHTML生成
- 完成したHTMLをブラウザに送る
SSG（Static Site Generation）
- ビルド時にHTML生成
- 完全に静的なページ
同じ「レンダリング」でも、
どこで計算しているかが違うのです。
最後に
レンダリング（rendering）という言葉を雰囲気で理解していたので、
内部で何が起きているかを理解する良いきっかけになりました。
同じように疑問に思っていた方の助けになれば嬉しいです！