Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2015/05/27にLINE社で行われた、Data Binding JS Nightでの発表内容です。

  • Login to see the comments

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

  1. 1. コンポーネント指向 による、Reactの ベストプラクティスと バッドプラクティス @axross Data Binding JS Night
  2. 2. Hi :) • Kohei Asai • @axross • Software Engineer • React.js, express.js
  3. 3. コンポーネント指向
  4. 4. コンポーネント指向を推奨
  5. 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. 6. 値 -> DOM 変換器 • stateを使わず、propsを使うようにすれば、 Componentは「値 -> DOM 変換器」になる Componentprops DOM ( or Virtual DOM)
  7. 7. JSがDOMを支配する世界 • XHRとHistory APIでSPAが可能になった • すべての状態をJavaScriptが管理できる • JavaScriptがDOMを支配する世界
  8. 8. Data-bindedな「DOM」とは • データバインドされたすべてのDOMは、 JavaScriptの値によって吐き出される • ならば、DOMはコンパイル結果物 • データバインディングの嬉しさはここにある
  9. 9. Reactの思想から逆算する ベストプラクティスと バッドプラクティス
  10. 10. コンポーネント指向 3つの法則 • 値をDOMに変換する装置であることを徹する • 再利用されることを前提にする • コンポーネントとそうでないものを明確に分 ける
  11. 11. 値をDOMに変換する装置 であることを徹する
  12. 12. 冪等性を守る • 通常は「値 -> DOM 変換器」であるはず • 受け入れた値が同じであれば、吐き出される DOMは常に同じはず • つまり、冪等性があるはず
  13. 13. 余計な仕事はさせない • それ以上の仕事をさせると、犠牲を生む • 必要以上なstateの保持・利用 • コンポーネントの中でXHR • = 冪等性を失う • = 疎結合ではなくなる
  14. 14. 必要以上に状態を持たせない • 必要以上に状態を持たせると • 同じ値を外から与えたとしても、吐き出さ れるDOMが違うものになる可能性がある • = テストが困難になる
  15. 15. 副作用のある行為を含めない • 副作用のある行為はコンポーネントの外ですべき • XHR、Web Storageへのアクセスなど • FluxのStoreをsubscribeするなど • = 結果的に状態を持ってしまう • = 依存が増え、テストが困難になる
  16. 16. コンポーネントが再利用 されることを前提にする
  17. 17. componentDidMountに注意 • componentDidMountで、writeな作用のある Flux Actionを呼んでいる • コンポーネントをmountしただけで、 他のコンポーネントに作用してしまう • = コンポーネントの副作用
  18. 18. 「どう使うか」は「使う時」に • コンポーネント自体の位置やサイズを指定す るCSSもよろしくない • それは「コンポーネントをどう使うか」と いう話であって、「コンポーネントの定義」 とはコンテキストが異なってしまう • = 別の場所にそのまま置けない
  19. 19. コンポーネントと そうでないものを 明確に分ける
  20. 20. 「そうでないもの」も必要 • 冪等性のあるコンポーネントのみでクライア ントサイドのアプリケーションは作れない • 誰かが状態を持ったり、XHRする必要がある • 無理のないように設計するには、 「そうでないもの」も必要
  21. 21. テスト可能範囲を広げるために • Componentの親となる層は諦める • 状態を持ち、Flux Storeをsubscribeする • コンポーネントにpropsを渡す • ユニットテストが不可能な唯一の存在 • = 代わりに他のすべてのテストが容易になる
  22. 22. CSS設計へのアンサー
  23. 23. 単位を合わせる • 1 コンポーネント = 1 BEM Blockとかにする • ファイル名、セレクタ名も合わせる • 名前の競合が防がれる • 他のセレクタへの依存や影響がなくなる • = カジュアルに削除できる・再利用できる
  24. 24. まとめ
  25. 25. Reactとコンポーネント • Reactはコンポーネント指向 • コンポーネントは、値 -> DOM 変換器 として 機能する
  26. 26. コンポーネント指向 3つの法則 • 値 -> DOM 変換器 であることを徹する • 再利用されることを前提にする • コンポーネントとそうでないものを明確に分 ける
  27. 27. メリット • テスタブル • 冪等性と疎結合であることが担保される • カジュアルな変更・削除と再利用が可能 • 高速なPDCAサイクルに弱くない • CSS設計も助ける
  28. 28. みんなもReact使おう!
  29. 29. Thank you for listening :)

×