仮想DOMとは？
かそうどむ
仮想DOMとは、ブラウザの実際のDOMを直接操作する代わりに、メモリ上に保持した軽量なDOM表現を使って差分だけを効率よく反映する技術です。
仮想DOM（Virtual DOM）は、Webページの構造を表すDOM（Document Object Model）を、JavaScriptのオブジェクトとしてメモリ上に再現した仮想的な複製です。ReactやVue.jsなどのモダンフロントエンドフレームワークが採用する中核的な技術のひとつです。
従来のDOM操作では、UIの状態が変化するたびに直接ブラウザのDOMを書き換えていました。DOMの変更はレイアウト計算や再描画（リフロー・リペイント）を引き起こすため、頻繁な更新はパフォーマンスの低下につながります。
仮想DOMはこの問題を次のように解決します。
- 状態（state）が変化すると、まず新しい仮想DOMツリーを生成する
- 古い仮想DOMとの差分（diff）を算出する（diffingアルゴリズム）
- 変更が必要な最小限の箇所だけを実際のDOMに適用する（パッチング）
この仕組みにより、開発者はUIの「あるべき状態」を宣言的に記述するだけで、効率的な更新処理がフレームワーク側で自動的に行われます。コードの見通しが良くなり、複雑なUIの状態管理も扱いやすくなります。
ただし、仮想DOM自体も計算コストを持つため、シンプルなページでは必ずしも高速ではありません。SvelteのようにコンパイルタイムにDOM操作を最適化する別アプローチも登場しており、フロントエンド技術は進化を続けています。
使い方・例文
Reactでチェックボックスの状態を切り替えると、仮想DOMが差分を計算し、変更があった該当のDOM要素だけを更新するため、ページ全体の再描画を避けて高速に動作します。
この用語をシェア
最終更新: