Upgrade to Pro — share decks privately, control downloads, hide ads and more …

共通Reactコンポーネントを作ろう!!!

 共通Reactコンポーネントを作ろう!!!

共通Reactコンポーネントを作ろう!!!

Meguro.es #4 in Wantedly (2016/6/21)
http://meguroes.connpass.com/event/32167/

Shimpei Takamatsu

June 21, 2016
Tweet

More Decks by Shimpei Takamatsu

Other Decks in Technology

Transcript

  1. シゴトでココロオドル 最近のシゴト 6 * 大規模なReact + Reduxプロジェクト → 11000 lines!!!

    * 社内(とちょっと外部)の勉強会 → React + Redux速習会 * エモいブログも書いた → なぜ React か? 173はてブ!!! 138ストック!!!
  2. シゴトでココロオドル SelectBoxの縮小版を実装します Original -> OOP -> HoCs -> Decorator 13

    * 4パターンの実装を用意 * Original → 最初に作った実装 * OOP → Productionで稼働中 * HoCs → 高階Componentを使う実装 * Decorator → ContextをDecorateする * ソースはこちら * shimpeiws/js-playground (GitHub) * src/react/components/selectBox 配下 * 書きかけ多くてすみません...
  3. シゴトでココロオドル 悪い予感はしていたが、これでいけるのではと思っていました Original 15 * pros * 単純 * ちょっとしたものならばこれでOK

    * 正直共通化を考えていなかった * cons * 増え続けるフラグ用のprops * View(Render)の拡張に特に難がある * オーバーライドに無理を感じる
  4. シゴトでココロオドル ‘オブジェクト指向のこころ’は素晴らしい本ですね OOP 18 * pros * 硬派、OOPが分かっていれば理解できる * 外からViewもロジックも渡すので柔軟

    * 現実解としてかなり優秀 * cons * Strategy・View・Item、ファイルが多い * npmで公開するものを作るのは無理 * デザパタはやっぱりJavaかな...
  5. シゴトでココロオドル Higher Order Components (HoCs) 19 * HoCsでmixin的な動きを実現する * Componentを受けて元のComponentをextendsしたComponentを返す

    * 参照: ReactのHigher-order Component(HoCs)という概念に関するメモ by @inuscript HoCs mixinされる メソッド Componentを 拡張
  6. シゴトでココロオドル Higher Order Components (HoCs) 20 * HoCsでmixin的な動きを実現する * Componentを受けて元のComponentをextendsしたComponentを返す

    * 参照: ReactのHigher-order Component(HoCs)という概念に関するメモ by @inuscript Base Component propsから mixinを呼べる 使う側 HoCsで 拡張
  7. シゴトでココロオドル なんだかオトナになった気分です Higher Order Components (HoCs) 21 * pros *

    分離もよく、かなりすっきり書けた * 余計なインタフェースが増えなくていい * 一度書けば難解さも感じない * cons * 最初何が起こっているのか分からない * Plugin的な仕組みをどう作るか * this問題 (設計の問題な気はしている)
  8. シゴトでココロオドル Decorator 23 * ES6 DecoratorsでReactのcontextを拡張する * 各ComponentでContextを定義してロジック・Viewを分ける * 参照:

    Extending Behavior of React Components by ES6 Decorators & Higher Order Components ItemSelectBox contextを定義 decoratorを 適用
  9. シゴトでココロオドル まだまだ戦いは続く!!! まとめとこれから 26 * まとめ * OOPは現実解として良いと思う * HoCsはReactで共通コンポーネントを作る

    なら知っておくべきテクニック * 共通化は計画的に!!! * これから * SPAの品質保証どうする、という重い問題 * 次はテストかな...