仮想DOMとは

りあぴ — Thu, 08 Dec 2022 03:09:29 +0000

モダン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などのライブラリを使えばもっと簡潔に書けますが、内部的な処理としてはいずれも同様になります。
実行結果は以下のようになります。



...
Hello

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

仮想DOMで高速化

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

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

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

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

仮想DOM | React入門

仮想DOMとは

モダンJavaScript以前

仮想DOMで高速化