はじめに
Reactの特徴として，非常に高速に動くというものがあり，これを実現する概念として"仮想DOM"というものがある．この記事では，そもそも"DOM"とは何か，仮想DOMを利用しない従来の方法と仮想DOMを利用する方法の違いに触れながら，"仮想DOM"についてまとめる．
DOMとは
DOMは"Document Object Model"の略で，仮想DOMに対してリアルDOMとも呼ばれる．
DOMは，HTML文書やXML文書などのドキュメントを木構造モデルで表現し，プログラムから操作・利用することを可能にする仕組みである．
(通常のJavaScriptもHTMLの要素に対して，値を読み取ったり要素を増やすことができる．それはこの仕組みを利用して変更している．)
DOMの木構造(ツリー構造)
DOMではドキュメントの各要素を抽出し，それを階層構造として扱うことで木構造モデルを表現する．この構造をツリー構造と呼び，抽出して各要素のことをノードと呼ぶ．
例えば以下のようなHTMLを記述したとする．
<html>
<head>
<title></title>
</head>
<body>
<header></header>
<main>
<h1></h1>
<p></p>
</main>
<footer></footer>
</body>
</html>
このように記述されているHTMLをブラウザは以下のような木構造モデルで扱う．
ある特定のノードは他のノードと親子関係または兄弟関係になっている．
- 親子関係
html(親)↔︎head(子)，body(親)↔︎main(子) - 兄弟関係
head↔︎body，header↔︎main↔︎footer
通常のレンダリング
Webアプリにおける「レンダリング」とは，指定したリソース(ここでいうHTMLファイルなど)をブラウザの画面に表示することで，従来のレンダリング方法としてDOMを利用している．
通常のレンダリングの流れ
１．HTMLからDOM木構造モデル，CSSからCSSOM木構造モデルを構築
２．DOMツリーとCSSOMツリーを利用して，画面表示に必要となるレンダリングツリーを生成する．
３．レンダリングツリーのレイアウト(レンダリングツリーが持つ各DOM要素の位置を決定)
４．実際に画面への描画処理を行う
CSSOMは"CSS Object Model"の略で，DOMと似ていて，木構造モデルで表現できる．
レンダリングには上記の4ステップが必要でかなり処理コストがかかる．JavaScriptによってHTMLに変更を加える場合は，さらにコストがかかってしまう．
仮想DOMとは
仮想DOMはリアルDOMのレンダリングコストが多くかかってしまうという問題を解決するために登場したものがで，その名の通りブラウザ上のDOMを抽象化した仮のDOMとして複製したものである．仮想DOMを利用する主な目的は，効率的なUIの更新と再レンダリングを実現することである．
仮想DOMを利用したレンダリング
仮想DOMを利用してレンダリングを行う場合，以下のような流れで行う．
１．HTMLから仮想的なDOM構造モデルを２つ構築する
２．JavaScriptによる操作を片方のモデルだけ行う
３．２つの仮想DOMを比較して，変更部分を探す
４．変更部分だけをリアルDOMに反映する
５．反映されたリアルDOMをブラウザがレンダリングする
２つの仮想DOMのうち，片方だけJavaScriptの操作を行うことで操作前後のツリー構造モデルを作成することができる．この２つのツリー構造を比較することで，操作前後の差分を検出することができる．リアルDOMにはこの差分のみを反映すればよいので，再レンダリングをリアルDOMよりも低コストで行うことができる．
まとめ
今回はReactの特徴の１つである"仮想DOM"についてまとめた．一般的には，リアルDOMよりも仮想DOMの方が高速にレンダリングができると言われているが，差分の検出も多くの処理が行われているため，差分が膨大になるとリアルDOMの方が高速にレンダリングできる場合がある．開発するアプリによって使い分ける必要がある．