React meetup#3でのLT資料。 画像系は一部省略してます。

1. Component設計とCSS
@Eight
React.js meetup #3
2016/02/23
@halhide

2. 自己紹介
• 大熊秀治(@halhide)
• Sansan株式会社
• 名刺管理アプリEightのwebエンジニアです
• APIからUIまで何でもやってます
• 足立区の比較的安全なエリアに住んでます😱

4. 画像割愛

5. ReactとReduxで作ってます

6. 2015/11月までは
Backbone.js
名刺管理アプリ感強め

7. 2015/12月
ReactとReduxでリニューアル
ネットワークサービス感強め

8. どうやってComponentを定義
しているか？

9. 機能ドリブンな例

10. FeedComponent
PostComponent
CommentComponent
※元画像割愛

11. <ProfilePhoto />
取得失敗時の処理をラップ
<CardImage />
取得URLの生成や、縦画像の時の
回転処理などをラップ
※元画像割愛

12. 中身は単なる<img/>
画像URLの生成や失敗時の処理な
どをひとまとめにした

13. 汎用的なものはどうか？

15. cssクラスさえ揃えておけばきっと大丈夫😇
onClickに関数設定するくらいしかやることないの
では😏

16. 実 際 辛 い

17. ボタン風実装が乱立
<a/>, <button/>, <span/>, …
二度押し禁止🙅
クリック時のログ取りたいです🙏

18. 見た目と振る舞いをま
とめよう

20. Button Component
• typeでレイアウトやテーマを指定する
• PRIMARY(_MINI) → submitやOKなどの青系のボタン
• SECONARY(_MINI) → キャンセル用の灰色のボタン
• htmlのbuttonタグのように使えて、ボタンとしての見た目や振
る舞いが揃う
• 機能追加、改善フェーズに入るとこういう細かいところの共通
化で開発効率がだいぶ上がる
<Button onClick={registration} disabled={alreadyRegistred} type=“PRIMARY” />

21. CSSは？
• rails上でsass使ってます
• Componentの階層構造に合わせて命名
• js:components/common/button.js
• css: “.common-button”
• 階層は”-”で表す
• .common-button 以下については、あまり決めてない
• BEMなどの特定の指針には従ってない
• Idやタグ指定はやめよう
• 無駄に詳細度をあげない
• Component内のcssはできるだけそこで閉じる
• CSS周りはまだまだ改善が必要😅

22. http://jp.corp-sansan.com/recruit/job/engineer_ruby.html
(ruby採用だけどjs書ける人も募集中🙏)

23. 詳しいことは懇親会で🍻