今からVirtual DOMを勉強します！

[VirtualDOM Advent Calendar 2014 - Qiita](http://qiita.com/advent-calendar/2014/virtual-dom "VirtualDOM Advent Calendar 2014 - Qiita")の10日目です。

## はじめに

この記事は、これからVirtual DOMを始める人やVirtual DOMに興味があるけれど触ったことがない人のための記事です。まず、Virtual DOMとは何なのかについて述べて、なぜVirtual DOMが必要なのかについて考察してみます。そして、少しだけReactに触ってみましょう。

私はVirtual DOMについて詳しくありません。もしかすると間違ったことを記事に書いてしまうかもしれません。もし誤りに気付きましたら、指摘していただけれると助かります。また、コメントも励みになります。気軽にコメントしていただければと思います。

## Virtual DOMとは？

まずはどういうものなのか知りたいですよね？公式な定義ではありませんが、Virtual DOMとは__DOMを作るために必要な情報を持っているオブジェクト__です。

- [javascript - What is Virtual DOM? - Stack Overflow][18]

Virtual DOMを勉強し始めたとき、私は「誰かがブラウザの仕組みを解読して、全く新しいアプローチによってDOMを作っているのだ」と勘違いをしていました。そういうことではありません。

Virtual DOMは__DOMを作るために必要な情報を持っているオブジェクト__です。Reactなどのフレームワークのことは一旦忘れてみて下さい。Virtual DOMは理解できないほど難しい概念ではありません。

## なぜVirtual DOM?

なぜ__DOMを作るために必要な情報を持っているオブジェクト__が必要なのでしょうか？ちょっと視点を変えます。データバインディングという視点からVirtual DOMを眺めてみます。

- [データバインディング - Wikipedia][19]

念のため、データバインディングについておさらいします。データバインディングとは__モデルの更新に伴いビューを更新する仕組みのこと、または、ビューの更新に伴いモデルを更新する仕組みのこと__です。

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で確認してみましょう。

- [Tutorial | React][1]

index.htmlだけ用意しました。src/app.jsは上記リンク先で調達できます。buildディレクトリ下のファイルはパッケージマネージャで調達できます。そして、cpコマンドなどでbuildディレクトリ下にコピーします。

``` index.html
<!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ディレクトリ下のファイルを調達する方法も紹介しておきます。次のコマンドで調達できます。

``` sh
$ npm install bower -g
$ bower install react
```

## まとめ

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

## 参照URL

- [Tutorial | React][1]

- [React (Virtual) DOM Terminology][2]

- [Virtual DOMってどんだけ早いの？測ってみた][3]

- [仮想DOMライブラリの「virtual-dom」だけでMV*なビューを書く][4]

- [virtual-domを使って、Reactみたいなコンポーネントを実現するライブラリを書いてみた][5]

- [Reactでサーバーサイドで生成したHTMLに対してDOMを初期化せずにReactComponentとして状態を更新する][8]

- [なぜ仮想DOMという概念が俺達の魂を震えさせるのか][6]

- [segmentio/dekuのコード読んで自分でも仮想DOMのdiffアルゴリズムを書いてみた][7]

- [Virtual DOMのアルゴリズムが知りたくてvirtual-domのコードを読んだ話][9]

- [[JavaScript] 仮想DOMを提供する『React』について少し調べてみた][10]

- [Reactjsのチュートリアルを読んで浮かんだ疑問とそれに対する答え][11]

- [segmentio/dekuのコードリーディング][12] 

- [React.jsのVirtualDOMについて][13]

[1]:http://facebook.github.io/react/docs/tutorial.html
[2]:http://facebook.github.io/react/docs/glossary.html
[3]:http://dsuket.hatenablog.com/entry/2014/12/02/125230
[4]:http://qiita.com/seanchas_t/items/05d70bf4e095865583cf
[5]:http://qiita.com/seanchas_t/items/f7aa5df930d34e8bc49d
[6]:http://qiita.com/mizchi/items/4d25bc26def1719d52e6
[7]:http://qiita.com/mizchi/items/d21bb598156821131b8c
[8]:http://qiita.com/mizchi/items/dca6b82349e811a24158
[9]:http://saneyukis.hatenablog.com/entry/2014/09/03/134858
[10]:http://qiita.com/hkusu/items/ee5bc75c3c32185c7b76
[11]:http://qiita.com/yuku_t/items/f453839377317e013537
[12]:http://efcl.info/2014/12/09/deku-codereading/
[13]:http://qiita.com/koba04/items/de79f158cd1f59ba5d20

[18]:http://stackoverflow.com/questions/21965738/what-is-virtual-dom
[19]:http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CCMQFjAA&url=http%3A%2F%2Fja.wikipedia.org%2Fwiki%2F%25E3%2583%2587%25E3%2583%25BC%25E3%2582%25BF%25E3%2583%2590%25E3%2582%25A4%25E3%2583%25B3%25E3%2583%2587%25E3%2582%25A3%25E3%2583%25B3%25E3%2582%25B0&ei=vEuGVOa9OKa7mAXhroDwBw&usg=AFQjCNF9-lDBr5IqQErx7idE10YCpfBVlw&sig2=cndrGb0tCg24vxSDrJdaDg&bvm=bv.81449611,d.dGY