Slide 1
Slide 1 text
いまさら stlyed components 入門した
Meguro.css #3 @ oRo
Slide 2
Slide 2 text
自己紹介
腹筋ローラーの力、信じてるよ
@8845musign_
株式会社ウィルゲート
ディレクター
転職した会社すべてに腹筋ローラー部を作ってきた
腹筋ローラーが必要な会社さん声かけてください（嘘
Slide 3
Slide 3 text
話すこと
最近業務で styled components 使い始めた
各所で結構「いいよ」って言われまくっている（於: Twitter）
実際に使って思ったことを話します
Slide 4
Slide 4 text
styled components サマリ
Slide 5
Slide 5 text
CSS in JS のメリット
ローカルスコープ
スタイルの再利用
JavaScript の利用
変数
関数など
一部は Sass や LESS といった CSS プリプロセサーでも代替可能です
Slide 6
Slide 6 text
CSS in JS の例を見てみましょう
Vue
styled components
Slide 7
Slide 7 text
Vue
.heading {
font-size: 40px;
}
...
以下省略...
普通の CSS を書く感覚で CSS in JS の恩恵を得ることができる
Slide 8
Slide 8 text
styled components
import styled from 'styled-components'
const Heading = styled.h1`
font-size: 18px;
...
`
const Page = () =>
見出し
Tagged Template literals
に CSS を記述
コード量がかなり少なくなった
React や Vue などでコンポーネントを作るよりはるかに手軽
Slide 9
Slide 9 text
styled components の良さ
class
を書かない分、記述量が減る
冗長な名前が減る ‑ ローカルスコープのおかげ
Sass や LESS でできるようなことはたいていできる ‑ mixin や
extend、function など OK
Slide 10
Slide 10 text
アプローチの一種として
ライブラリではなく styled components というアプローチ として
広まっている
ほぼ同じような書き方ができるライブラリもいくつかある ‑
freestyler ‑ emotion
React でも Vue でも Angular でも使える
Slide 11
Slide 11 text
stlyed components は既存 CSS の置き換え
となるか？
Slide 12
Slide 12 text
どうかなぁ...
Slide 13
Slide 13 text
難しい
実装コストが大きい
JavaScript による高い柔軟性は結局メンテナンスを難しくする
Slide 14
Slide 14 text
実装コストが大きい
Slide 15
Slide 15 text
通常の Web ページのコーディングフロー
1. デザインから HTML 文章構造を設計
2. HTML を構築しつつ class を 各要素へ付与
3. CSS を記述して style を付与
4. 1～3 を繰り返す
Slide 16
Slide 16 text
stlyed components を使った場合のフロー
1. デザインから HTML 文章構造を設計
2. HTML を構築
3. 構築した HTML から必要なコンポーネントを作成
4. CSS を記述して style を付与
5. コンポーネントを HTML の各要素と置き換え
6. 1～5 を繰り返す
Slide 17
Slide 17 text
正直 ul > li
の li
くらいはローカルスコープに頼って
コンポーネント化しなくても良いんでは
Slide 18
Slide 18 text
高い柔軟性は結局メンテナンスを難しくする
Slide 19
Slide 19 text
スタイルの使い回し
const transition = css`
transition:
background-color 150ms ease-in-out,
color: 150ms ease-in-out;
`
const Button = styled.button`
${buttonBase}
${transition}
...
`
Slide 20
Slide 20 text
既存コンポーネントの拡張
const Button = styled.button`
background-color: white;
...
`
const PrimaryButton = styled(Button)`
background-color: blue;
...
`
Slide 21
Slide 21 text
一度定義したコンポーネントの要素の変更
ver 4.0
より
const Text = styled.div``;
腹筋がだらしない
Slide 22
Slide 22 text
高い柔軟性
柔軟性がコードベース全体に渡って発揮されていたとしたら?
私には難しい
Slide 23
Slide 23 text
それでも
Slide 24
Slide 24 text
stlyed components の力を信じろ
Slide 25
Slide 25 text
どう扱えば良さそう？
限定的 に扱うとその力を最大限発揮するのでは
Slide 26
Slide 26 text
ローカルスコープを作るために使う
const Component = () => {
腹筋
今筋肉痛
...
}
const Status = styled.dl => {
...
> div { ... }
dt { ... }
dd { ... }
}
Slide 27
Slide 27 text
ローカルスコープを作るために使う
ドキュメントで実は似たような手法が紹介されている
1. コンポーネントとという小さな単位内
2. 構造が自明な要素を使っていること
2 つのどちらかに当てはまる場合、ローカルスコープを生成しても良い
のでは
Slide 28
Slide 28 text
雑に複数の要素からなるコンポーネントを作る
const BaseSiteFooter = ({ className, children }) => (
（c ）{children}
) className を受け取るコンポーネントを実装するSlide 29
Slide 29 text
雑に複数の要素からなるコンポーネントを作る
const SiteFooter = styled(BaseSiteFooter)`
footer {
display: flex;
...
}
small: {
font-size: ${theme.font.sm};
}
`
腹筋ローラの力を信じろよ？
セマンティクスを持った構造をコンポーネントにまとめて
スタイルを付与。
とっても楽。
Slide 30
Slide 30 text
UI フレームワーク の実装に使う
Slide 31
Slide 31 text
機能と外観を分離する
class BaseButton extends React.Components {
onClick: () { ... }
onHhover () { ... }
render () {
return (
{this.props.children}
)
}
}
const PrimaryButton = styled(BaseButton)`...`;
const SecondaryButton = styled(BaseButton)`...`;
export PrimaryButton
export SecondaryButton
Slide 32
Slide 32 text
CSS フレームワークを コンポーネント化するために使う
// Bootstrap
const LgPrimaryButton = styled.button.attrs({
className: 'btn btn-lg btn-primary'
});
コンポーネント生成時に class 属性を指定することができるので
CSS を 1 行も書かずにコンポーネントが実装可能
Slide 33
Slide 33 text
まとめ
銀の弾丸なんてなかった
辛いと感じたら全部置き換えなくても良い
stlyed components、崩して使っても便利
Slide 34
Slide 34 text
ご清聴ありがとうございました