仮想DOM（Virtual DOM）

仮想DOM（Virtual DOM／かそうドム）とは、実際の画面に反映されているDOMを直接操作する代わりに、メモリ上に仮の（仮想的な）DOM構造を用意し、変更があった部分だけをまとめて実際のDOMへ反映する仕組みです。ReactやVue.jsなどの主要なフレームワークで採用されています。

現実世界に例えると、仮想DOMは「清書する前に下書き用紙で編集を済ませておく」ような仕組みです。修正のたびに清書（実際の画面）を書き直すのではなく、まず下書き（仮想DOM）の上で自由に書き直し、最後に変わった部分だけを清書へ反映することで、無駄な手間を減らします。

仮想DOM図解

なぜ仮想DOMが必要なのか

実際のDOMを直接何度も書き換えると、そのたびにブラウザが画面の再計算・再描画を行うため、更新回数が多くなるほど処理が重くなりやすいという課題があります。特に、一覧表示やリアルタイム更新の多いアプリケーションでは、この負荷が目立ちやすくなります。

仮想DOMの仕組み

仮想DOMを使う仕組みでは、画面の状態が変わるたびに、まずメモリ上に新しい仮想DOMを作り、変更前の仮想DOMと比較（差分検出）します。そして、実際に変わった部分だけを見つけ出し、その差分だけを実際のDOMへまとめて反映します。この一連の流れを「reconciliation（差分反映）」と呼びます。

通常のDOM操作との違い

採用しているフレームワーク

仮想DOMという考え方は、Reactによって広く知られるようになりました。その後、Vue.jsをはじめとする多くのモダンなフレームワークでも同様の仕組みが取り入れられ、現在ではWebアプリ開発における代表的な設計手法のひとつになっています。

開発者にとっての利点

仮想DOMを使うと、開発者は「今どの部分をどう書き換えるか」という細かい手順を自分で管理する必要がなくなります。データが変化した結果、画面がどのような状態になるべきかを記述するだけで、実際の差分計算や反映処理はフレームワーク側が自動的に行ってくれるため、コードがシンプルになり、不具合も減らしやすくなります。

あわせて知っておきたい用語

• DOM：
  HTML文書をプログラムから操作できるよう、ツリー構造で表現したものです。
• React：
  仮想DOMの考え方を広めた、代表的なJavaScriptライブラリです。
• Vue.js：
  仮想DOMを採用している、日本でも人気の高いフレームワークです。
• レンダリング：
  データをもとに、画面上に実際の見た目を描き出す処理のことです。
• 差分検出（diffing）：
  変更前と変更後の状態を比較し、変わった部分だけを見つけ出す処理です。