辞書: 仮想DOM

投稿日: 更新日:

仮想DOMとは

JavaScriptのオブジェクトのことです。

コロンブスの卵

仮想DOMという名前から、なんかものすごいものを想像してましたが、 実際はただのJavaScriptのオブジェクトでした。

hyperappという300行ほどの軽量ライブラリが紹介されていたので、 ソースコードを読んでみたんですね。 そのpatch関数を見たときに、orzと崩れ落ちました。 単にオブジェクトの差分をチェックして、 差分があったら、実DOMに反映させているだけでした。

どうやら仮想DOMの仕組みはこのようになっているようです。

  1. DOMの構造を表すJavaScriptオブジェクトを作成する
  2. JavaScriptオブジェクトから実DOMを作る
  3. DOMを更新したいときは、対応するJavaScriptオブジェクトを作成する
  4. 現在のJavaScriptオブジェクトと、更新後のJavaScriptオブジェクトを比較して、その内容を実DOMに反映する。

ついでに、以下の2つのことも分かりました。

  • h関数は、そのノードを作成する1
  • JSXは、HTMLからh関数を呼び出す形式に変換する。

実DOMを触るライブラリが使えない

仮想DOMを使うことは、すなわち、実DOMは基本的に使えません。 jQueryが使えないのはそういうことです2


  1. 自分は、Rubycgiライブラリを思い出しました。 [return]
  2. 検索すると「jQueryは遅れてる」みたいなことを言う似非エンジニアばかりでうんざいりますが。 [return]