React入門 | DOM, 仮想DOM

DOMは、HTMLを解釈しツリー構造で表現したもので、Document Object Modelの略となる。Webブラウザから開発者ツールを開くことで、誰でも見ることが可能である。

従来JavaScriptで画面の要素を変更する場合は、DOMを直接指定して書き換えるような処理をしてきた。以下は、プレーンなJavaScriptやjQueryを用いて画面に要素を追加するコード。

例：プレーンはJavaScriptの場合

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

例：jQueryの場合

//id=nushidaを持つ要素の配下にHello World!!と設定したpタグを差し込む
var textElement = $("<p>").text("Hello World!!");
$("nushida").append(textElement);

このようなコードは、手続き的で分かりやすい反面、レンダリングコスト（画面の表示速度）に問題が生じやすかったり、プログラムコードが肥大化してくるとどこで何をしているか分からなくなるという辛さがある。
こういった問題を解決するために作られたのが仮想DOMという技術。

仮想DOMとは

仮想DOMとは、JavaScriptのオブジェクトで作られた仮想的なDOMのこと。これを用い実際のDOMとの差分を比較し変更箇所のみを実際のDOMに反映することで、DOMへの操作を最小限に抑えることが可能になる。

ReactやVue等のモダンJavaScriptのフレームワークやライブラリでは仮想DOMが用いられている。そのため、ページ遷移をJavaScriptによる画面の書き換えで表現しているが、レンダリングコストを最小限に抑えて快適なWebシステムを提供することが可能となる。
素晴らしいことにReactではこのあたりは全く意識しなくても勝手に裏側でいい感じに処理してくれる。