VirtualDOM Advent Calendar 2014 - Qiitaの10日目です。
はじめに
この記事は、これからVirtual DOMを始める人やVirtual DOMに興味があるけれど触ったことがない人のための記事です。まず、Virtual DOMとは何なのかについて述べて、なぜVirtual DOMが必要なのかについて考察してみます。そして、少しだけReactに触ってみましょう。
私はVirtual DOMについて詳しくありません。もしかすると間違ったことを記事に書いてしまうかもしれません。もし誤りに気付きましたら、指摘していただけれると助かります。また、コメントも励みになります。気軽にコメントしていただければと思います。
Virtual DOMとは？
まずはどういうものなのか知りたいですよね？公式な定義ではありませんが、Virtual DOMとは__DOMを作るために必要な情報を持っているオブジェクト__です。
Virtual DOMを勉強し始めたとき、私は「誰かがブラウザの仕組みを解読して、全く新しいアプローチによってDOMを作っているのだ」と勘違いをしていました。そういうことではありません。
Virtual DOMは__DOMを作るために必要な情報を持っているオブジェクト__です。Reactなどのフレームワークのことは一旦忘れてみて下さい。Virtual DOMは理解できないほど難しい概念ではありません。
なぜVirtual DOM?
なぜ__DOMを作るために必要な情報を持っているオブジェクト__が必要なのでしょうか？ちょっと視点を変えます。データバインディングという視点からVirtual DOMを眺めてみます。
念のため、データバインディングについておさらいします。データバインディングとは__モデルの更新に伴いビューを更新する仕組みのこと、または、ビューの更新に伴いモデルを更新する仕組みのこと__です。
Virtual DOMの必要性とデータバインディングとにどのような関係があるのでしょうか？一見して関係などないように見えますが、データバインディングという視点からVirtual DOMを眺めることでVirtual DOMの必要性を確認することができます。
簡単のために、クライアントサイドにおけるモデルをJavaScriptのオブジェクト、__クライアントサイドにおけるビューをDOM__とします。そうすると、Virtual DOMがモデルでありながら、ビューでもあるように見えます。つまり、Virtual DOMはデータバインディングの仕組みを持っているように見えます。
あまり詳しくはないのですが、データバインディングの仕組みを持つフレームワークの一つであるBackbone.jsなどでは、モデルオブジェクトのデータが変更されたときにイベントを発火し、ビューオブジェクトでそのイベントを検知し、ビューオブジェクトでDOMを操作してデータバインディングを実現していると思います。
一方、Virtual DOMをベースとしたフレームワークは、Virtual DOMの変更に伴い、__直接DOMを操作することなく__DOMが変更されます。言い換えると、モデルの変更に伴い、__直接DOMを操作することなく__ビューが変更されます。つまり、Virtual DOMをベースとしたフレームワークはデータバインディングの仕組みを持っています。なおかつ、__直接DOMを操作することなく__データバインディングの仕組みを実現しています。Virtual DOMとデータバインディングとの関係が見えてきました。
例えば、Reactを見てみると、Reactにはデータバインディングの仕組みがあります。__直接DOMを操作することなく__データバインディングを実現しています。(この記事内で一番大切なところですが、私が理解できているか怪しいところでもあります。。。)
他にもVirtual DOMが必要であることを納得させる要素があると思いますが、__直接DOMを操作することなく__データバインディングを実現できるからVirtual DOMが必要なんじゃないかなと思います。
ReactでVirtual DOMを試してみよう
ここまで抽象的なことばかりでちょっと辛いですよね。どんな感じなのかReactで確認してみましょう。
index.htmlだけ用意しました。src/app.jsは上記リンク先で調達できます。buildディレクトリ下のファイルはパッケージマネージャで調達できます。そして、cpコマンドなどでbuildディレクトリ下にコピーします。
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx" src="src/app.js"></script>
</body>
</html>
念のため、パッケージマネージャでbuildディレクトリ下のファイルを調達する方法も紹介しておきます。次のコマンドで調達できます。
$ npm install bower -g
$ bower install react
まとめ
Virtual DOMとは何なのか、なぜVirtual DOMが必要なのかについて書きました。この記事で紹介したことに目新しいことはないかもしれません。細々とあれやこれやとインターネットで検索して、何が分からないのか分からない感じで、私がよく分からないと思うことにフォーカスしてまとめたものになります。