ここ二週間ほどReact.jsを触っていて、業務でも今の案件で使うことにしたので、簡単な紹介と、触ってみた感想。

React.jsについて

React.jsは、Facebook製のクライアントサイドJSフレームワーク。

Angular.jsなどと並べられがちだけど、ああいう俗にいうMVWでフルスタックなものとは違って、View層に特化している。

3つの特徴

UIに特化

ここでいうUIとは、UI部品のことで、つまりは複数のDOMを内包する1つの部分的なDOMツリーのこと。これをReactではComponentと呼んでいる。

このComponentという単位は、呼び方こそ違えども、再利用性を意識したDOMやスタイルの設計でよく使っていると思う。

Reactはこの単位を意識していることで、再利用性・保守性が高く、変更に強い(スケーラブルな)アプリケーションを構築できる。

Virtual DOM

Reactの機能の一番の目玉で、Virtual DOMは、実際のDOMをJavascriptで擬似的に表現する。

実際のDOM操作は変更のたびに、DOMツリーやレンダーツリーが変わって、描画があったりと、様々なコストが発生する。

もしこの変更がJavascriptに閉じているなら、そういう心配はない。もちろん最終的に実際のDOMの変更は起こるけど、それはReactが差分を計算して最小限の操作のみを行ってくれる。そして、それを開発者はあまり意識しなくていい。

追いやすいデータフロー

Virtual DOMももちろん親子関係があり、兄弟関係もある。他のComponentとの繋がりはもちろんある。

しかし、その繋がりは厳格に決められていて、基本的にデータの流れは親から子に一方向に流れていく。

だからコードの可読性が高く、開発者が変わっても設計がブレにくい。

触ってみて思ったこと

Virtual DOMはすごい

Vue.jsなどのViewModelに近い、よりよいアプローチだと思った。
実際のDOMと並立するViewModelの場合、ViewModelは値に過ぎなくなる。DOMは値をもとに形成されるが、この形成がどう行われるかを意識するコストが高かった。
ViewModelとDOMの紐付きは弱い。ViewModelは常にDOMによって制約されていた。

Angular.jsは、むしろDOMにベッタリ頼っていた。DOMはViewであり、ロジックの入り口でもあった。Controllerの役割も少し担っていたと言える。
そのせいで、直感的に役割を分けることが難しかった。綺麗なコードを書くためには、専用のベストプラクティスが必要だった。

Reactはそんなことはない。Virtual DOMはViewModelに近いけど、DOMを擬似的に表現したことで、値との結びつきが強い。DOMを自由に扱うことはできないけど、その制約のおかげで雑念はなくなった。

未来だ！！！

Reactはまだまだ発展途上で、そのロードマップも興味を惹かれる。

Reactに対してFacebookが掲げる思想と未来は、GitHub上のリポジトリで確認できる。

これはちょうど@koba04さんが今日のAdvent Calendarで話されているので、それを見るといい。

かいつまんで話すなら、例えば、「CSSをVirtual DOMに内包してもいいのでは」という思想がある。

知っての通り、CSSは何も考えずに書いてるだけで壊れるし、みんなそれが糞だなって思いながらlessやSCSS、Stylusとかを使っている。

それでも設計とかの問題は解決しなくて、SMACCSとかBEMとか、みんなルールを用いて、それに従って書いてごまかしている。

もしComponent自体にスタイルを書けるなら、この設計の問題は解決するかもしれない。状態によってスタイルを変更したい時、その条件はJavascriptで書き、値はCSSに書くという現在のスタイルから脱却できる。

これは未来だ！

補足

Reactはまだ日本だと盛り上がってなくて、ようやく火がついてきたところ、っていう風に見えている。

ただ、@mizchiさんとか@koba04さんとかが激燃えしていて、なかなかエモいので、読み物をいくつか貼っておく。

あと、社内勉強会でライブコーディングした時のTODOサンプルアプリのリポジトリも貼っておく。