仮想DOMとは

モダンJavaScript以前
仮想DOMで高速化

モダンJavaScript以前

従来のJavaScriptでは以下のようにしてDOM(Document Object Model)の操作、つまり画面の更新をしていました。
以下のコードはブラウザの開発コンソールでもそのまま実行できます。

var elm = document.createElement('div'); //div要素を生成
var text = document.createTextNode('Hello!'); //テキストノード生成
elm.appendChild(text); // divの子要素にテキストノードを設定
document.body.appendChild(elm); // body要素の末尾にdiv要素を追加

上のコード例は生のJavaScriptによるやや冗長な書き方で、jQueryなどのライブラリを使えばもっと簡潔に書けますが、内部的な処理としてはいずれも同様になります。
実行結果は以下のようになります。

<html>
<body>
...
<div>Hello</div>
</body>

しかし、この方法はレンダリングに時間がかかるため、Webアプリケーションで頻繁に行うと重くなってしまいます。
また、システムが大きくなるにつれ、JavaScriptのコードの見通しが悪くなりがちになってしまう問題がありました。

仮想DOMで高速化

そういった問題を解決するのが仮想DOMという技術で、ReactやVue、Angularなどの、モダンなJavaScriptフレームワークで使われています。

仮想DOMは、実際のWebページを表すDOMとは別に、React内部でJavaScriptオブジェクトのデータ構造として扱われます。実体のDOMよりも軽量です。

Reactで画面を更新する際には、仮想DOMとの差分を実体のDOMに反映するようにしています。
それによってReactは高速に動作し、スムーズな画面の更新を実現しています。

少し難しそうに思えるかもしれませんが、Reactが内部で自動的にやってくれるので、最初のうちは開発する上で仮想DOMを意識する必要はありません。そういった仕組みがあるんだくらいに知っておくと良いと思います。