【Reactが動く仕組み】シリーズ
Reactでコードを書いて、アプリは作れる。
でも、「どうやって動いているのか？」と聞かれると、言葉にできない…。
一歩踏み出して、「裏側の仕組みを理解して説明できる」を目指したシリーズです。
全７弾で以下の内容を記載予定です。
１．Node.js（実行環境）
２．ビルド（構築の流れ）
３．Babel / polyfill（変換）
４．DOM / 仮想DOM（仕組み）
５．レンダリング（動き）
６．再レンダリング（なぜ起きる？）
７．最適化（どう見極める？）
今回はその第4弾として、「Reactの有用性」についてDOMと仮想DOMを交えて整理していきます。
はじめに
第3弾では、Babelとpolyfillについて整理しました。
👉 Reactのコードは、そのままでは動かず
👉 変換や補完によってブラウザで動く形になっている
Reactを動かせる形にするまでにいろいろ過程がありました。
Babelやpolyfill便利ですね。
ふむ。。。
👉 「ここまでしてReactを使う意味ってなんだろう？」
この記事でわかること
- DOMとは何か
- DOM操作の問題点
- 仮想DOMとは何か
- なぜReactが使われるのか
DOMとは何か
DOM（Document Object Model）とは、
👉 HTMLをJavaScriptから操作できるようにした仕組み
例えば
document.getElementById("title").textContent = "Hello";
上記のようにして、JavaScriptからHTMLを書き換えることができます
DOM操作には問題がある？
一見便利ですが、DOM操作には問題がありました。
問題①：操作が増えるとコードが複雑になる
例えば、状態に応じて画面を更新する場合
if (count > 10) {
document.getElementById("message").textContent = "多い";
} else {
document.getElementById("message").textContent = "少ない";
}
画面が複雑になると
👉 どこをどう更新しているのか分かりにくくなる
さらに、これらが画面のあちこちに散らばると、
👉 「どこを直せばいいのかわからない」状態になる
問題②：パフォーマンスが悪い
DOM操作は実はコストが高い処理です。
- レイアウト計算
- 再描画（reflow / repaint）
👉 頻繁にやると重くなる
問題③：差分管理を自分でやる必要がある
例えば
どこが変わったのか？
何を更新すべきか？
👉 全部自分で判断する必要がある
DOM操作の問題をまとめると
👉 「何をどう更新するか」を人間が考え続けるのがつらい
そこで登場するのが
👉 仮想DOM（Virtual DOM）
仮想DOMとは何か
仮想DOMとは一言でいうと、
👉 DOMの状態をJavaScriptのオブジェクトとして表現したもの
イメージ：
const vdom = {
type: "h1",
children: "Hello"
};
👉 本物のDOMではなく、「仮想的なDOM」
仮想DOMを使うと、何が嬉しいのか？
① 差分を自動で計算してくれる
- 変更前
- 変更後
を比較して
👉 必要な部分だけ更新してくれる
👉 人間が差分を考えなくてよくなる
② DOM操作を最小限にできる
👉 無駄な更新を減らせる
👉 パフォーマンスが良くなる
③ UIを宣言的に書ける
<h1>{count}</h1>
👉 「どう更新するか」ではなく
👉 「どうあるべきか」を書くだけ
Reactは何をしているのか
お待たせしました！
DOM操作とReactの関係に入ります。
Reactは
👉 仮想DOMを使ってDOM操作を効率化しているライブラリ
つまり
状態が変わる
↓
仮想DOMを更新
↓
差分を計算
↓
必要な部分だけDOM更新
👉 人間がやっていた差分管理を自動化している
👉 「どこを更新するか」を考えなくてよくなる
なぜReactが必要なのか
DOMを直接操作するのは
- 複雑になる
- パフォーマンスが悪い
- 管理が大変
そして何より
「どこを更新すればいいのか」を常に考え続ける必要がある
これを解決するために生まれたのが、
👉 仮想DOMという仕組み
そしてReactは、
👉 仮想DOMを使って「差分管理」を自動化するライブラリ
Tips
仮想DOMはReact独自のものではなく、UIを効率的に更新するための考え方の一つです。
Reactはその代表的な実装です。他には以下のようなものがあります。
- Vue（バージョン2系など）
- Preact（Reactの軽量版）
- Inferno
まとめ
- DOMは、HTMLをJavaScriptで操作する仕組み
- しかし直接操作すると、複雑さやパフォーマンスの問題がある
- 仮想DOMは、DOMをデータとして扱う仕組み
- Reactは、仮想DOMを使って効率的にUIを更新している
👉 Reactは「DOM操作のつらさ」を解決するためのライブラリ
第5弾に向けて
ここまでで、「なぜReactが必要なのか」は見えてきました。
では実際に、
👉 Reactはどのように画面を描画しているのか？
次回は「レンダリング」をテーマに、
Reactがどのように画面を作っているのかを整理していきます。