React meetup 3_eight

React meetup 3_eight

1. 1. Component設計とCSS @Eight React.js meetup #3 2016/02/23 @halhide
2. 2. 自己紹介 • 大熊秀治(@halhide) • Sansan株式会社 • 名刺管理アプリEightのwebエンジニアです • APIからUIまで何でもやってます • 足立区の比較的安全なエリアに住んでます😱
3. 3. 画像割愛
4. 4. ReactとReduxで作ってます
5. 5. 2015/11月までは Backbone.js 名刺管理アプリ感強め
6. 6. 2015/12月 ReactとReduxでリニューアル ネットワークサービス感強め
7. 7. どうやってComponentを定義 しているか？
8. 8. 機能ドリブンな例
9. 9. FeedComponent PostComponent CommentComponent ※元画像割愛
10. 10. <ProfilePhoto /> 取得失敗時の処理をラップ <CardImage /> 取得URLの生成や、縦画像の時の 回転処理などをラップ ※元画像割愛
11. 11. 中身は単なる<img/> 画像URLの生成や失敗時の処理な どをひとまとめにした
12. 12. 汎用的なものはどうか？
13. 13. cssクラスさえ揃えておけばきっと大丈夫😇 onClickに関数設定するくらいしかやることないの では😏
14. 14. 実 際 辛 い
15. 15. ボタン風実装が乱立 <a/>, <button/>, <span/>, … 二度押し禁止🙅 クリック時のログ取りたいです🙏
16. 16. 見た目と振る舞いをま とめよう
17. 17. Button Component • typeでレイアウトやテーマを指定する • PRIMARY(_MINI) → submitやOKなどの青系のボタン • SECONARY(_MINI) → キャンセル用の灰色のボタン • htmlのbuttonタグのように使えて、ボタンとしての見た目や振 る舞いが揃う • 機能追加、改善フェーズに入るとこういう細かいところの共通 化で開発効率がだいぶ上がる <Button onClick={registration} disabled={alreadyRegistred} type=“PRIMARY” />
18. 18. CSSは？ • rails上でsass使ってます • Componentの階層構造に合わせて命名 • js:components/common/button.js • css: “.common-button” • 階層は”-”で表す • .common-button 以下については、あまり決めてない • BEMなどの特定の指針には従ってない • Idやタグ指定はやめよう • 無駄に詳細度をあげない • Component内のcssはできるだけそこで閉じる • CSS周りはまだまだ改善が必要😅
19. 19. http://jp.corp-sansan.com/recruit/job/engineer_ruby.html (ruby採用だけどjs書ける人も募集中🙏)
20. 20. 詳しいことは懇親会で🍻