Component 設計と CSS@Eight

React.js meetup #32016/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の buttonタグのように使えて、ボタンとしての見た目や振る舞いが揃う•機能追加、改善フェーズに入るとこういう細かいところの共通化で開発効率がだいぶ上がる

<Button onClick={registration} disabled={alreadyRegistred} type=“PRIMARY” />

CSSは？• rails上で sass使ってます• Componentの階層構造に合わせて命名• js:components/common/button.js• css: “.common-button”

• 階層は” -”で表す• .common-button 以下については、あまり決めてない• BEMなどの特定の指針には従ってない• Idやタグ指定はやめよう• 無駄に詳細度をあげない• Component内の cssはできるだけそこで閉じる

• CSS周りはまだまだ改善が必要😅

http://jp.corp-sansan.com/recruit/job/engineer_ruby.html

(ruby採用だけど js書ける人も募集中🙏 )

詳しいことは懇親会で🍻