React / Vue の「仮想DOMの仕組み」と「設計思想の違い」をざっくり整理する
フロントエンドの文脈でよく出てくる「仮想DOM」という言葉。
ReactもVueも使っているけど、「結局どう違うの？」と思うことはないでしょうか。
この記事では、仮想DOM が生まれた背景と、React/Vue の考え方の違いを整理してみました。
DOM と 仮想DOM の関係
DOM は JavaScript の DOM APIで更新します。
ただし、画面への描画はすぐには行われず、ブラウザが次のフレーム（約16ms間隔）でまとめてバッチ処理されます。
※ DOMってそもそも何？という方はこちらの記事も参考になるかもしれません →
function changeColor(newColor) {
const elem = document.getElementById("para");
elem.style.color = newColor;
}
このように変更しても、すぐに画面が再描画されるわけではなく、内部的に「次のタイミングで処理しよう」とキューに積まれます。
DOMの欠点
- 差分がなくてもとりあえず全部処理される
- 操作コストが高く、パフォーマンス面で不利
この欠点を補うために登場したのが 仮想DOM（Virtual DOM） です。
仮想DOMとは？
仮想DOMは、「画面の状態」をメモリ上に再現しておき、差分だけを本物のDOMに反映する仕組みです。
たとえば、カウンタボタンを押したとき：
- 変更前の仮想DOMを保存しておく
- 新しい仮想DOMを構築
- 前後の差分（diff）を比較し、必要な部分だけ本物のDOMに反映
この仕組みにより、DOM 操作の負担を最小限に抑えられます。
React の設計思想
- UI は「状態に対する関数」として設計する
- 状態変更（＝再描画）を明示的に制御する
- 一方向データフローにより副作用を減らす
const [count, setCount] = useState(0);
setCount() の呼び出しによって、新しい仮想DOMが構築され、前の状態との差分がレンダリングされます。
React は「すべてを一度再実行して差分を取る」というスタンスで、
「冪等で速ければ何度実行してもいい」 という思想に立っています。
Vue の設計思想
- UI・ロジック・スタイルを1ファイルにまとめて管理しやすく
-
refやreactiveによって状態の変化を追跡 - 依存関係を自動的に記録して、必要な箇所だけ再描画
const count = ref(0);
Vueは状態の追跡を Proxy によって自動的に行う ため、仮想DOMを更新する対象を最初から絞ることができます。
「そもそも全部比較するのは無駄」という発想です。
仮想DOMの更新効率は？
| 比較項目 | React | Vue |
|---|---|---|
| 差分抽出方法 | 全体を再構築 → 差分を比較 | 変更箇所を事前に検知して差分 |
| 自動追跡 | なし（useStateなど明示） | あり（Proxyベース） |
| 処理効率 | 実装が単純で予測可能 | 効率は高いが、仕組みが複雑になりやすい |
Vue の方が効率的に見えますが、その分ロジックは複雑になっています。
どちらが優れているかは一概に言えず、「実装のシンプルさ」「学習コスト」「拡張性」など、開発者体験全体を含めて選ぶべきポイントです。
状態を変えても画面が変わらない場合
ReactもVueも、「状態が変わった」とライブラリに伝えないと描画は更新されません。
- Reactで
useStateを使わなかった場合 - Vueで
refやreactiveを使わなかった場合
内部の値は変わっても、画面は変わりません。
状態変更の通知が「仮想DOM更新」のトリガーです。
まとめ：React / Vue の設計思想比較
| 観点 | React | Vue |
|---|---|---|
| UIの捉え方 | 状態に対する関数 | UI・ロジック・スタイルの統合 |
| 状態管理 | 明示的（Hook）で制御 | 自動追跡（ref / reactive） |
| 描画の定義 | JSXベースのロジック主導 | template中心の構造主導 |
| 学習スタイル | 自由に組み合わせる | 最初から整ったフレームワーク |
| エコシステム | 状態管理やルーティングは選定自由 | 公式エコシステムが豊富で統一感がある |
おわりに
仮想DOMはどちらのライブラリでも中心的な仕組みですが、「何を重視しているか」によってその使い方や設計方針が異なります。
- 状態とUIの関係を純粋に保ちたい → React
- わかりやすさや統一感を重視したい → Vue
自分に合ったスタイルや、プロジェクトの要求に応じて選べると良いですね。