Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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
ご清聴ありがとうございました