2015/02/16 歌舞伎座.tech#6「VirtualDOMとReact」
自己紹介
- Name : Takuto Wada
- github : twada
- twitter : t_wada
- hatena : t-wada
- TDD とライオンの人
- power-assert の人
React / Flux を知ったきっかけ
- mizchi さんのエントリ (あなたがReactを使うべき理由) だったと思う
- 日本語の情報はほとんど無かったが、エッジ系の人たちが騒ぎ出した & 海外で圧倒的に事例が増え出したので興味を持った
- Rendr をつくった AirBnb が React を使い始めたことを知り、これは決定的だと思った
React をどう勉強したか
- 公式ドキュメントとチュートリアルが充実している
- まず Tutorial をそのまま写経
- 次に browserify + babelify で Tutorial をもう一周やってみる (showdown は browserify 対応していないので marked に変更。 jQuery も Fetch API Polyfill に入れ替えてみる)
- Thinking in React で思想を学ぶ
- koba04 さんの Get Started React.js でとどめを刺す
- 気になった情報はブクマしておく
今なら React をどう勉強するか
- いまから学ぶなら koba04 さんの 一人React.js Advent Calendar 2014 がまず最初にオススメ
- Flux react現状確認会 の資料も良い
- mozaic.fm の mizchi 回 #13 Virtual DOM, #13 Virtual DOM sideshow を聴く
Flux をどう勉強したか
- 概念から理解しようと思うと混乱するので、まずは手を動かす。Tutorial を写経
- 一通り終わったら、次に Overview を読む
- saneyuki_s さんのエントリを読む (Fluxアーキテクチャの覚え書きを書いた と Fluxとはなんだったのか + misc at 2014)
- 最後に Chat Tutorial の資料で複数 Store の設計を学ぶ
- さらに Isomorphic App の設計と実装を学びたいなら yahoo/flux-examples を読む
- (追記) ReactとFluxのこと
実案件で適用したところ
- 業務システムのやや複雑な管理画面 (新規開発する画面)
- 他の画面は jQuery で書かれているが、新しい画面は複雑なので jQuery のままでは破綻することが予想できた
- その画面でだけ React を使うことにして、 React / Flux でトップダウンに設計 & 実装
- 設計の方法は Thinking in React と Flux の二つのチュートリアルを踏襲
開発環境
- Emacs + web-mode.el (jsx のサポートがある)
- ライブラリは React.js + 元祖 Flux (facebook の Flux 実装)
- ビルドは npm run で統一。
npm run buildで browserify を叩いてビルド -
npm run watchでコードが更新されたら watchify で検知して再ビルド - browserify / webpack との親和性が高い。多くの npm モジュールが使えるので他にも単機能の小さいライブラリを積極的に使う
チームにどう伝えたか
- チーム向けに導入ガイドを書いて啓蒙
- nodebrew 入れて npm install して npm run build の3ステップで使えるところまで手数を減らす
- React / Flux の概念は日本語情報を中心に簡単なリンク集を作成
- あとは画面の構造に即して画面の各コンポーネントのコードを読んでもらう
- 画面がコンポーネントに構造化されて整理され、 JSX の見た目も実際の HTML タグ構造に近いので、チームメンバーにも意外と評価が高かった
実際に使ってみてどうだったか (1)
- 富豪的にデータを更新してもレンダリングコストの心配をしなくて良いのは想像以上のメリット
- サーバサイドでテンプレートを毎回レンダリングするのと同じ感覚でクライアントのコードも書ける
- データ更新の方向が一方通行なので状態が一意に定まり、混乱しにくい (Single source of truth)
- トップダウンに画面を構造化して設計できるのも良い。自然に部品化されるので共通化が行いやすい
実際に使ってみてどうだったか (2)
- Virtual DOM は足回りなのでほとんど意識しない。実際に使ってみると、現実的な React の強みはコンポーネント化であり、 Flux によるアーキテクチャの単純化だった
- "Reactの発明は成立由来からしても、UIのコンポーネント化・テンプレート化をカジュアルに行える点であり、Virtual DOMは彼らにとっては速度面のトレードオフを抑え込むためのトリックにすぎない" by saneyuki_s
はまったところなど
- 最初 state と prop の使い分けが分からなかった (後に外部インターフェイスとして機能し、親からデータを与えられるものが prop, 自分で所有しているデータや状態が state と使い分けている)
- HTML と JSX で微妙に属性名が違うところもチームメンバーは少し混乱する
- アニメーションが良くわからない
- バリデーションの設計も悩んだところ
- jQuery-UI の置き換え問題!!!
まとめ
- あらためて何が React / Flux の美点か
- "Virtual DOMによって「パフォーマンス面で問題を出さずに」常にゼロから状態を構築する、ということが可能になった" by mizchi
- "Topレベルの要素にアプリケーションの状態を持たせておいてそれをsetStateでどんどん更新するという雑なアーキテクチャも可能。DOM周りの面倒でパフォーマンスに影響を与える部分をReact.jsに任せることでアプリケーションの実装を単純に出来る" by koba04
Special Thanks to
- mizchi さん
- koba04 さん
- saneyuki_s さん
- この3人がいなければ React / Flux を使っていなかったと思う。ただただ感謝。