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.
Component設計とCSS
@Eight
React.js meetup #3
2016/02/23
@halhide
自己紹介
• 大熊秀治(@halhide)
• Sansan株式会社
• 名刺管理アプリEightのwebエンジニアです
• APIからUIまで何でもやってます
• 足立区の比較的安全なエリアに住んでます😱
画像割愛
ReactとReduxで作ってます
2015/11月までは
Backbone.js
名刺管理アプリ感強め
2015/12月
ReactとReduxでリニューアル
ネットワークサービス感強め
どうやってComponentを定義
しているか?
機能ドリブンな例
FeedComponent
PostComponent
CommentComponent
※元画像割愛
<ProfilePhoto />
取得失敗時の処理をラップ
<CardImage />
取得URLの生成や、縦画像の時の
回転処理などをラップ
※元画像割愛
中身は単なる<img/>
画像URLの生成や失敗時の処理な
どをひとまとめにした
汎用的なものはどうか?
cssクラスさえ揃えておけばきっと大丈夫😇
onClickに関数設定するくらいしかやることないの
では😏
実 際 辛 い
ボタン風実装が乱立
<a/>, <button/>, <span/>, …
二度押し禁止🙅
クリック時のログ取りたいです🙏
見た目と振る舞いをま
とめよう
Button Component
• typeでレイアウトやテーマを指定する
• PRIMARY(_MINI) → submitやOKなどの青系のボタン
• SECONARY(_MINI) → キャンセル用の灰色のボタン
• htmlのbutt...
CSSは?
• rails上でsass使ってます
• Componentの階層構造に合わせて命名
• js:components/common/button.js
• css: “.common-button”
• 階層は”-”で表す
• .c...
http://jp.corp-sansan.com/recruit/job/engineer_ruby.html
(ruby採用だけどjs書ける人も募集中🙏)
詳しいことは懇親会で🍻
React meetup 3_eight
React meetup 3_eight
React meetup 3_eight
Upcoming SlideShare
Loading in …5
×

React meetup 3_eight

4,290 views

Published on

React meetup#3でのLT資料。

画像系は一部省略してます。

Published in: Technology
  • DOWNLOAD FULL MOVIE, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... ,DOWNLOAD FULL. MOVIE 4K,FHD,HD,480P here { https://tinyurl.com/yybdfxwh }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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. 詳しいことは懇親会で🍻

×