仮想DOMとは
JavaScriptのオブジェクトのことです。
コロンブスの卵
仮想DOMという名前から、なんかものすごいものを想像してましたが、 実際はただのJavaScriptのオブジェクトでした。
hyperappという300行ほどの軽量ライブラリが紹介されていたので、 ソースコードを読んでみたんですね。 そのpatch関数を見たときに、orzと崩れ落ちました。 単にオブジェクトの差分をチェックして、 差分があったら、実DOMに反映させているだけでした。
どうやら仮想DOMの仕組みはこのようになっているようです。
- DOMの構造を表すJavaScriptオブジェクトを作成する
- JavaScriptオブジェクトから実DOMを作る
- DOMを更新したいときは、対応するJavaScriptオブジェクトを作成する
- 現在のJavaScriptオブジェクトと、更新後のJavaScriptオブジェクトを比較して、その内容を実DOMに反映する。
ついでに、以下の2つのことも分かりました。
- h関数は、そのノードを作成する1。
- JSXは、HTMLからh関数を呼び出す形式に変換する。
実DOMを触るライブラリが使えない
仮想DOMを使うことは、すなわち、実DOMは基本的に使えません。 jQueryが使えないのはそういうことです2。