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が必要なのかについて書きました。この記事で紹介したことに目新しいことはないかもしれません。細々とあれやこれやとインターネットで検索して、何が分からないのか分からない感じで、私がよく分からないと思うことにフォーカスしてまとめたものになります。