このエントリーをはてなブックマークに追加

そろそろ、悪ふざけをするブログのネタがつきてきました、山本です。

さて、今回やってみるのは「React.js」です。

なんでも、MVCのVを担当するとか、フレームワークではないとか。

まあ、今更とお考えの方もおられることでしょう。
が、私は枯れたり、普及し始めたり等、導入コストが低くなってから参入する主義ですので今回のようなきっかけが無ければ、未だ触ることはなかったのかと思います。
つまりは、よい機会だったということですね。

さて、今回の方針ですが

  • どういうものなのか。
  • とりあえず、使ってみての感想。

あたりを考えています。

あとは、jQueryで全て頑張るというものにも限界を感じていたりもするので、その辺を解消出来るといいな～といったところです。

どういうものなのか

まず、なんなのかですね。
ざっくりでもいいので、その辺は把握しておきたいです。

何から調べていいのか、分からず色々記事などを探していたところ「Virtual DOM」だと、誰かが言ってました。

これを操作するんだそうです。

「Virtual DOM」って何？

調べる度に、知らない単語や概念が出てくるのは、一番心が折られますね。
まあ、これ会社のブログなんで、心が折れましたで終わらせることは難しいのですが。。。。

なので、我慢して調べていきましょう。

「Virtual DOM」でググッて一番上にある記事を拝見しました。
http://qiita.com/mizchi/items/4d25bc26def1719d52e6

う～ん、よく分からん。

そもそも、通常のDOMと何が異なるのでしょうか？

通常のDOMの操作、説明を掻い摘んでみるとDOMを細かな単位に分けて管理する。
そして、分けたそれぞれを操作するといったところでしょうか？

<ul>
  <li>0001</li>
  <li>0002</li>
  <li>0003</li>
  <li>0004</li>
</ul>

のようなものがあった場合、ulが細かな単位で、liそれぞれもまた細かな単位となると。

その前提で、一番上のliを、例えばjQueryで操作するとすれば

$('li').eq(0).text('foobar');

のような形で操作出来ますね。

これは、データバインディング方式なんだそうです。

で、Virtual DOMは、実際のDOMと対になる仮想DOMを生成する。
ユーザは、仮想DOMを操作して、操作後差分を実際のDOMへと反映する。

分からなくはないのですが、想像力が足りないのか、それほど利便性を感じなかったりしますね。

……、全く利便性を感じないと進めて行くのが難しくなるので、便利そうなことを想像してみましょう。

とある案件で、Backbone.jsで作られた管理画面の改修を行ったことがあります。

それは、一覧画面がいくつもあり、表示する内容はAPIで取得していました。

初期表示の時は良いのですが、データを更新した時など、差分だけを差し替えといった事が諸々の事情から難しい為、毎回DOMを洗い替えをしていました。

勿論これでも動くのですが、洗い替えなので、一瞬リストが消えて、更新されたリストが表示されるといった美しくない挙動であったり。
そもそも、無駄だな～とも思っていました。

なるほど、この辺の動きが仮想DOMであれば、Reactが代わりに差分のみを反映と、よりスマートに書けそうですね。

書いてみる

使ってみたら、もっと有効性に気が付くかもしれません。

とりあえず、簡単に使えるようにしてみます。

まず、この2つのスクリプトを読み込む必要があるようです。

<script src="http://fb.me/react-0.13.3.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.3.js"></script>

reactは分かりますが、JSXTransformerとはなんでしょう。

JSXとは、Facebookが開発した独自規格のようです。
jsの記述を、xml形式のような分かりやすい記述で出来るようになるそうです。

説明だけでは、伝わらないので比較してみます。

  • JS
render: function(){

 return (
    React.createElement('div', {className: 'hoge'}, 'foobar')
  );

}
  • JSX
render: function(){
  return (
    <div className="hoge">foobar</div>
  );

}

分かりやすくなったのか？

<!DOCTYPE html>
<html>
  <head>
    <script src="http://fb.me/react-0.13.3.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var foobar = React.createClass({
        render: function(){
          return (
            <div className="hoge">foobar</div>
          );

        }
      });
      React.render(<foobar />, document.getElementById('container'));
    </script>
  </body>
</html>

で、実際に動くように書いてみると

SyntaxError: expected expression, got ‘foobar