DOMと仮想DOM

DOMとは

DOMとは・・・HTMLを解釈し木構造で表現したもの
本来、JavaScriptで画面の要素を変更するときは、
DOMを直接指定して書き換えるような処理をしていた。

//id=Messageを持つ要素の配下にHello World！!と設定したpタグを差し込む
var textElement = document.createElement("p");
textElement.textContent = "Hello World!!";
document.getElementById("Message").appendChild(textElement);

このようなコードは手続的でわかりやすい反面、レンダリングコストやコードの肥大化が問題だった。
このような問題を解決するために作られたのが仮想DOM

仮想DOMとは

仮想DOMとは・・・JavaScriptのオブジェクトで作られた仮想的なDOMのこと
実際のDOMとの差分を比較して変更箇所のみを実際のDOMに反映
ReactやVue等のモダンJavaScriptのフレームワークやライブラリでは仮想DOMが使われている。
ページ遷移をJavaScriptによる画面の書き換えで表現し、レンダリングコストを最小限に抑え、快適なWebシステムを提供している。