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

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 :)