Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
いまさら styled components 入門した
8845musign
September 20, 2018
Technology
3
440
いまさら styled components 入門した
Meguro.css #3 @ oRo
8845musign
September 20, 2018
Tweet
Share
More Decks by 8845musign
See All by 8845musign
8845musign
1
610
8845musign
3
1.8k
8845musign
2
370
8845musign
0
1.2k
8845musign
1
1.4k
8845musign
3
1.1k
8845musign
1
110
8845musign
0
160
8845musign
1
260
Other Decks in Technology
See All in Technology
kyonmm
1
1.9k
sat
1
970
layerx
1
710
shirayanagiryuji
1
400
tzkoba
0
380
caori_t
0
150
asaju7142501
0
250
line_developers
PRO
2
1.2k
hamadakoji
0
1.1k
shomaekawa
3
1k
line_developers
PRO
0
140
ytaka23
0
430
Featured
See All Featured
bermonpainter
342
26k
jeffersonlam
328
15k
qrush
285
18k
rasmusluckow
318
18k
brad_frost
156
6.4k
yeseniaperezcruz
302
31k
keavy
106
14k
philhawksworth
192
8.8k
3n
163
22k
jlugia
216
16k
ddemaree
274
31k
chriscoyier
499
130k
Transcript
いまさら stlyed components 入門した Meguro.css #3 @ oRo
自己紹介 腹筋ローラーの力、信じてるよ @8845musign_ 株式会社ウィルゲート ディレクター 転職した会社すべてに腹筋ローラー部を作ってきた 腹筋ローラーが必要な会社さん声かけてください(嘘
話すこと 最近業務で styled components 使い始めた 各所で結構「いいよ」って言われまくっている(於: Twitter) 実際に使って思ったことを話します
styled components サマリ
CSS in JS のメリット ローカルスコープ スタイルの再利用 JavaScript の利用 変数 関数など
一部は Sass や LESS といった CSS プリプロセサーでも代替可能です
CSS in JS の例を見てみましょう Vue styled components
Vue <template> <h1 class="heading"><slot></slot></h1> </template> <style scoped> .heading { font-size:
40px; } </style> ... 以下省略... 普通の CSS を書く感覚で CSS in JS の恩恵を得ることができる
styled components import styled from 'styled-components' const Heading = styled.h1`
font-size: 18px; ... ` const Page = () => <Heading> 見出し</Heading> Tagged Template literals に CSS を記述 コード量がかなり少なくなった React や Vue などでコンポーネントを作るよりはるかに手軽
styled components の良さ class を書かない分、記述量が減る 冗長な名前が減る ‑ ローカルスコープのおかげ Sass や
LESS でできるようなことはたいていできる ‑ mixin や extend、function など OK
アプローチの一種として ライブラリではなく styled components というアプローチ として 広まっている ほぼ同じような書き方ができるライブラリもいくつかある ‑ freestyler
‑ emotion React でも Vue でも Angular でも使える
stlyed components は既存 CSS の置き換え となるか?
どうかなぁ...
難しい 実装コストが大きい JavaScript による高い柔軟性は結局メンテナンスを難しくする
実装コストが大きい
通常の Web ページのコーディングフロー 1. デザインから HTML 文章構造を設計 2. HTML を構築しつつ
class を 各要素へ付与 3. CSS を記述して style を付与 4. 1~3 を繰り返す
stlyed components を使った場合のフロー 1. デザインから HTML 文章構造を設計 2. HTML を構築
3. 構築した HTML から必要なコンポーネントを作成 4. CSS を記述して style を付与 5. コンポーネントを HTML の各要素と置き換え 6. 1~5 を繰り返す
正直 ul > li の li くらいはローカルスコープに頼って コンポーネント化しなくても良いんでは
高い柔軟性は結局メンテナンスを難しくする
スタイルの使い回し const transition = css` transition: background-color 150ms ease-in-out, color:
150ms ease-in-out; ` const Button = styled.button` ${buttonBase} ${transition} ... `
既存コンポーネントの拡張 const Button = styled.button` background-color: white; ... ` const
PrimaryButton = styled(Button)` background-color: blue; ... `
一度定義したコンポーネントの要素の変更 ver 4.0 より const Text = styled.div``; <Text as="p">
腹筋がだらしない<Text />
高い柔軟性 柔軟性がコードベース全体に渡って発揮されていたとしたら? 私には難しい
それでも
stlyed components の力を信じろ
どう扱えば良さそう? 限定的 に扱うとその力を最大限発揮するのでは
ローカルスコープを作るために使う const Component = () => { <Status> <div> <dt>
腹筋</dt> <dd> 今筋肉痛</dd> </div> ... </Status> } const Status = styled.dl => { ... > div { ... } dt { ... } dd { ... } }
ローカルスコープを作るために使う ドキュメントで実は似たような手法が紹介されている 1. コンポーネントとという小さな単位内 2. 構造が自明な要素を使っていること 2 つのどちらかに当てはまる場合、ローカルスコープを生成しても良い のでは
雑に複数の要素からなるコンポーネントを作る const BaseSiteFooter = ({ className, children }) => (
<footer className={className}> <p><small> (c ){children}</small></p> </footer> ) className を受け取るコンポーネントを実装する
雑に複数の要素からなるコンポーネントを作る const SiteFooter = styled(BaseSiteFooter)` footer { display: flex; ...
} small: { font-size: ${theme.font.sm}; } ` <SiteFooter> 腹筋ローラの力を信じろよ?</SiteFooter> セマンティクスを持った構造をコンポーネントにまとめて スタイルを付与。 とっても楽。
UI フレームワーク の実装に使う
機能と外観を分離する class BaseButton extends React.Components { onClick: () { ...
} onHhover () { ... } render () { return ( <button className={this.props.className}> {this.props.children} </button> ) } } const PrimaryButton = styled(BaseButton)`...`; const SecondaryButton = styled(BaseButton)`...`; export PrimaryButton export SecondaryButton
CSS フレームワークを コンポーネント化するために使う // Bootstrap const LgPrimaryButton = styled.button.attrs({ className:
'btn btn-lg btn-primary' }); コンポーネント生成時に class 属性を指定することができるので CSS を 1 行も書かずにコンポーネントが実装可能
まとめ 銀の弾丸なんてなかった 辛いと感じたら全部置き換えなくても良い stlyed components、崩して使っても便利
ご清聴ありがとうございました