JavaScript
reactjs
React

React / Flux を実案件で使ってみた (2015/02/16 講演資料)

More than 1 year has passed since last update.


2015/02/16 歌舞伎座.tech#6「VirtualDOMとReact」



自己紹介

power-assert



React / Flux を知ったきっかけ


  • mizchi さんのエントリ (あなたがReactを使うべき理由) だったと思う

  • 日本語の情報はほとんど無かったが、エッジ系の人たちが騒ぎ出した & 海外で圧倒的に事例が増え出したので興味を持った


  • Rendr をつくった AirBnb が React を使い始めたことを知り、これは決定的だと思った



React をどう勉強したか



今なら 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 buildbrowserify を叩いてビルド


  • npm run watch でコードが更新されたら watchify で検知して再ビルド

  • browserify / webpack との親和性が高い。多くの npm モジュールが使えるので他にも単機能の小さいライブラリを積極的に使う



チームにどう伝えたか


  • チーム向けに導入ガイドを書いて啓蒙


  • nodebrew 入れて npm install して npm run build の3ステップで使えるところまで手数を減らす

  • React / Flux の概念は日本語情報を中心に簡単なリンク集を作成

  • あとは画面の構造に即して画面の各コンポーネントのコードを読んでもらう

  • 画面がコンポーネントに構造化されて整理され、 JSX の見た目も実際の HTML タグ構造に近いので、チームメンバーにも意外と評価が高かった



実際に使ってみてどうだったか (1)


  • 富豪的にデータを更新してもレンダリングコストの心配をしなくて良いのは想像以上のメリット

  • サーバサイドでテンプレートを毎回レンダリングするのと同じ感覚でクライアントのコードも書ける

  • データ更新の方向が一方通行なので状態が一意に定まり、混乱しにくい (Single source of truth)

  • トップダウンに画面を構造化して設計できるのも良い。自然に部品化されるので共通化が行いやすい



実際に使ってみてどうだったか (2)



はまったところなど


  • 最初 state と prop の使い分けが分からなかった (後に外部インターフェイスとして機能し、親からデータを与えられるものが prop, 自分で所有しているデータや状態が state と使い分けている)

  • HTML と JSX で微妙に属性名が違うところもチームメンバーは少し混乱する

  • アニメーションが良くわからない

  • バリデーションの設計も悩んだところ

  • jQuery-UI の置き換え問題!!!



まとめ



Special Thanks to


  • mizchi さん

  • koba04 さん

  • saneyuki_s さん

  • この3人がいなければ React / Flux を使っていなかったと思う。ただただ感謝。