共通 Reactコンポーネントを 作ろう!!! ーJavaScriptでココロオドル人をふやすー Meguro.es #4 in Wantedly 高松 真平 (@shimpeiws)

シゴトでココロオドル 私は誰? 2 * 高松 真平 (@shimpeiws) * Webエンジニア @ Wantedly https://www.wantedly.com/users/544320

シゴトでココロオドル 目次 1 ここ最近のWantedly React事情 2 共通化の機運 3 Original -> OOP -> HoCs -> Decorator 4 まとめとこれから 3

1.ここ最近のWantedly React事情 4

シゴトでココロオドル * RailsプロジェクトにReact + Reduxなスタックを導入 * とりあえずモダンになった * 戦いはこれからだ、的な展開 前回までのお話 5

シゴトでココロオドル 最近のシゴト 6 * 大規模なReact + Reduxプロジェクト → 11000 lines!!! * 社内(とちょっと外部)の勉強会 → React + Redux速習会 * エモいブログも書いた → なぜ React か? 173はてブ!!! 138ストック!!!

シゴトでココロオドル コンポーネントが増えました 7 * 大規模な開発だったので、かなりの勢いで書いた * 布教活動の成果もあり、書く人数も増えた * 結果: コンポーネントが104個まで増えた

2.共通化の機運 8

シゴトでココロオドル リストから選択するダイアログ、似ているようでちょっとずつ違う... SelectBoxという共通コンポーネント 9

シゴトでココロオドル インターン生の悲痛な叫び、ごめん... リファクタリングがしたいです! 10 SelectBox辛いです... まだ行けるでしょ 早すぎる最適化は... そんなやりとりを何回か繰り返し... リファクタリングが したいです!!! お、おおう... (レビュー辛くなってきた)

シゴトでココロオドル Issueがたった!!! 共通コンポーネントの設計 11

3.Original -> OOP -> HoCs -> Decorator 12

シゴトでココロオドル SelectBoxの縮小版を実装します Original -> OOP -> HoCs -> Decorator 13 * 4パターンの実装を用意 * Original → 最初に作った実装 * OOP → Productionで稼働中 * HoCs → 高階Componentを使う実装 * Decorator → ContextをDecorateする * ソースはこちら * shimpeiws/js-playground (GitHub) * src/react/components/selectBox 配下 * 書きかけ多くてすみません...

シゴトでココロオドル Original 14 * BaseComponentを継承して、差分をサブクラスに実装する * オーバーライトして欲しいメソッドにはコメント * 差分の吸収はpropsでフラグを渡す 使う側 BaseComponent

シゴトでココロオドル 悪い予感はしていたが、これでいけるのではと思っていました Original 15 * pros * 単純 * ちょっとしたものならばこれでOK * 正直共通化を考えていなかった * cons * 増え続けるフラグ用のprops * View(Render)の拡張に特に難がある * オーバーライドに無理を感じる

シゴトでココロオドル OOP 16 * 最もシンプルな形をBaseComponentにする * View・ロジックの差分はStrategyパターンで外から渡す * 検索欄など付加的な要素はDecoratorパターンでPluginにする 使う側 Strategy BaseComponent Strategy経由で 呼び出し

シゴトでココロオドル OOP 17 * 最もシンプルな形をBaseComponentにする * View・ロジックの差分はStrategyパターンで外から渡す * 検索欄など付加的な要素はDecoratorパターンでPluginにする Strategy Viewは 子コンポーネント Plugin Decoratorで 連結可能 Stateを拡張

シゴトでココロオドル ‘オブジェクト指向のこころ’は素晴らしい本ですね OOP 18 * pros * 硬派、OOPが分かっていれば理解できる * 外からViewもロジックも渡すので柔軟 * 現実解としてかなり優秀 * cons * Strategy・View・Item、ファイルが多い * npmで公開するものを作るのは無理 * デザパタはやっぱりJavaかな...

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

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

シゴトでココロオドル なんだかオトナになった気分です Higher Order Components (HoCs) 21 * pros * 分離もよく、かなりすっきり書けた * 余計なインタフェースが増えなくていい * 一度書けば難解さも感じない * cons * 最初何が起こっているのか分からない * Plugin的な仕組みをどう作るか * this問題 (設計の問題な気はしている)

シゴトでココロオドル Decorator 22 * ES6 DecoratorsでReactのcontextを拡張する * 各ComponentでContextを定義してロジック・Viewを分ける * 参照: Extending Behavior of React Components by ES6 Decorators & Higher Order Components 中はHoCs @context 使う側

シゴトでココロオドル Decorator 23 * ES6 DecoratorsでReactのcontextを拡張する * 各ComponentでContextを定義してロジック・Viewを分ける * 参照: Extending Behavior of React Components by ES6 Decorators & Higher Order Components ItemSelectBox contextを定義 decoratorを 適用

シゴトでココロオドル DecoratorとContext、ムズカシイです Decorator 24 * pros * Decorateするだけで拡張できる * ContextのDecorator部分は一度書くだけ * Contextに分離できるので見通しが良い * cons * Contextの仕組みがそもそも複雑 * stage-0...

4.まとめとこれから 25

シゴトでココロオドル まだまだ戦いは続く!!! まとめとこれから 26 * まとめ * OOPは現実解として良いと思う * HoCsはReactで共通コンポーネントを作る なら知っておくべきテクニック * 共通化は計画的に!!! * これから * SPAの品質保証どうする、という重い問題 * 次はテストかな...

シゴトでココロオドル モダンな環境でReactを書きたいエンジニアWanted！！ We are hiring 27 https://www.wantedly.com/projects/51709