コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス

1. コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス @axross Data Binding JS Night

2. Hi :) • Kohei Asai • @axross • Software Engineer • React.js, express.js

3. コンポーネント指向

4. コンポーネント指向を推奨

5. ReactのにおけるComponent const SomeComponent = React.createClass({ render() { return ( <div> <span>{this.state.valueA}</span> <span>{this.props.valueB}</span> </div> ); }, }); 内部状態外からの値 Component = DOMとJSのセット、UI部品

6. 値 -> DOM 変換器 • stateを使わず、propsを使うようにすれば、 Componentは「値 -> DOM 変換器」になる Componentprops DOM ( or Virtual DOM)

7. JSがDOMを支配する世界 • XHRとHistory APIでSPAが可能になった • すべての状態をJavaScriptが管理できる • JavaScriptがDOMを支配する世界

8. Data-bindedな「DOM」とは • データバインドされたすべてのDOMは、 JavaScriptの値によって吐き出される • ならば、DOMはコンパイル結果物 • データバインディングの嬉しさはここにある

9. Reactの思想から逆算するベストプラクティスとバッドプラクティス

10. コンポーネント指向 3つの法則 • 値をDOMに変換する装置であることを徹する • 再利用されることを前提にする • コンポーネントとそうでないものを明確に分ける

11. 値をDOMに変換する装置であることを徹する

12. 冪等性を守る • 通常は「値 -> DOM 変換器」であるはず • 受け入れた値が同じであれば、吐き出される DOMは常に同じはず • つまり、冪等性があるはず

13. 余計な仕事はさせない • それ以上の仕事をさせると、犠牲を生む • 必要以上なstateの保持・利用 • コンポーネントの中でXHR • = 冪等性を失う • = 疎結合ではなくなる

14. 必要以上に状態を持たせない • 必要以上に状態を持たせると • 同じ値を外から与えたとしても、吐き出されるDOMが違うものになる可能性がある • = テストが困難になる

15. 副作用のある行為を含めない • 副作用のある行為はコンポーネントの外ですべき • XHR、Web Storageへのアクセスなど • FluxのStoreをsubscribeするなど • = 結果的に状態を持ってしまう • = 依存が増え、テストが困難になる

16. コンポーネントが再利用されることを前提にする

17. componentDidMountに注意 • componentDidMountで、writeな作用のある Flux Actionを呼んでいる • コンポーネントをmountしただけで、他のコンポーネントに作用してしまう • = コンポーネントの副作用

18. 「どう使うか」は「使う時」に • コンポーネント自体の位置やサイズを指定するCSSもよろしくない • それは「コンポーネントをどう使うか」という話であって、「コンポーネントの定義」とはコンテキストが異なってしまう • = 別の場所にそのまま置けない

19. コンポーネントとそうでないものを明確に分ける

20. 「そうでないもの」も必要 • 冪等性のあるコンポーネントのみでクライアントサイドのアプリケーションは作れない • 誰かが状態を持ったり、XHRする必要がある • 無理のないように設計するには、「そうでないもの」も必要

21. テスト可能範囲を広げるために • Componentの親となる層は諦める • 状態を持ち、Flux Storeをsubscribeする • コンポーネントにpropsを渡す • ユニットテストが不可能な唯一の存在 • = 代わりに他のすべてのテストが容易になる

22. CSS設計へのアンサー

23. 単位を合わせる • 1 コンポーネント = 1 BEM Blockとかにする • ファイル名、セレクタ名も合わせる • 名前の競合が防がれる • 他のセレクタへの依存や影響がなくなる • = カジュアルに削除できる・再利用できる

24. まとめ

25. Reactとコンポーネント • Reactはコンポーネント指向 • コンポーネントは、値 -> DOM 変換器として機能する

26. コンポーネント指向 3つの法則 • 値 -> DOM 変換器であることを徹する • 再利用されることを前提にする • 副作用を除外する • コンポーネントとそうでないものを明確に分ける

27. メリット • テスタブル • 冪等性と疎結合であることが担保される • カジュアルな変更・削除と再利用が可能 • 高速なPDCAサイクルに弱くない • CSS設計も助ける

28. みんなもReact使おう！

29. Thank you for listening :)

コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス

Kohei Asai

Transcript