Gotanda.js #2の発表資料です。

1. コンポーネント設計について
@ufo_ocha
Gotanda.js #2

2. @ufo_ocha
• 2015年新卒
• JS歴半年くらい
yuuho
ufo_ocha
yuho.tsuboi

3. 新年早々風邪を引いて
資料作る時間なかったので雑
すみません(´・ω・｀)

4. 内容
• 今日話すこと
– コンポーネント設計（と言うか使い方？）
• 話さないこと
– Flux設計
– コンポーネント設計にしたらCSS設計いらんやろ！
みたいなバトル(´・ω・｀)

5. 皆さんSPAしてますか？

6. 僕は半年前に書いたSPAを
Railsに書き換えたりしてます
(´；ω；｀)ﾌﾞﾜｯ

7. CSS in JSやってますか？

8. 超便利！(ﾟ∀ﾟ)ｱﾋｬ
webpackで
css-loaderとか
style-loaderとか

9. そうなってくると
コンポーネント設計が大事！

10. 新人JSerが半年ほど
色々やってみて得た
コンポーネントの使い方
について話します

11. 結論
• そこのコンポーネント内でしか利用しない
stateはFluxにのせない
• DOMを持たないコンポーネントを使う

12. 結論
• そこのコンポーネント内でしか利用しない
stateはFluxにのせない
• DOMを持たないコンポーネントを使う

14. こういうちょっとしたことまで
Fluxに則ってやるのツラい！

15. 俺は.hide()と.show()が
したいだけなんや！

16. そこだけjQuery・・・・・( ﾟдﾟ )

17. 罪悪感を感じつつ、luxにのせないStateを使う

18. 結論
• そこのコンポーネント内でしか利用しない
stateはFluxにのせない
• DOMを持たないコンポーネントを使う

19. ツラさ
• イベント関連の処理が入るとEmiPerのon/off
をコンポーネントのライフサイクルに加えない
といけない
• 一番上のコンポーネントが膨れ上がる
• イベント処理がどこに書いたかわからなくなる

21. Component
Component
Component
ロジックだけの
コンポーネント

22. その他、
ログインチェックのリダイレクトとか
ロジックだけ切り分けたい
ことありますよね？

23. 本当にこれでいいのか的な
コンポーネントゴミを量産中

24. 現状、特に不便は感じていない

25. 結論
• そこのコンポーネント内でしか利用しない
stateはFluxにのせない
• DOMを持たないコンポーネントを使う

26. こうしてるよ！などあれば
是非、教えて下さい！