いまさら styled components 入門した

Transcript

1. いまさら stlyed components 入門した Meguro.css #3 @ oRo

2. 自己紹介 腹筋ローラーの力、信じてるよ @8845musign_ 株式会社ウィルゲート ディレクター 転職した会社すべてに腹筋ローラー部を作ってきた 腹筋ローラーが必要な会社さん声かけてください（嘘

3. 話すこと 最近業務で styled components 使い始めた 各所で結構「いいよ」って言われまくっている（於: Twitter） 実際に使って思ったことを話します

4. styled components サマリ

5. CSS in JS のメリット ローカルスコープ スタイルの再利用 JavaScript の利用 変数 関数など

   一部は Sass や LESS といった CSS プリプロセサーでも代替可能です

6. CSS in JS の例を見てみましょう Vue styled components

7. Vue <template> <h1 class="heading"><slot></slot></h1> </template> <style scoped> .heading { font-size:

   40px; } </style> ... 以下省略... 普通の CSS を書く感覚で CSS in JS の恩恵を得ることができる

8. styled components import styled from 'styled-components' const Heading = styled.h1`

   font-size: 18px; ... ` const Page = () => <Heading> 見出し</Heading> Tagged Template literals に CSS を記述 コード量がかなり少なくなった React や Vue などでコンポーネントを作るよりはるかに手軽

9. styled components の良さ class を書かない分、記述量が減る 冗長な名前が減る ‑ ローカルスコープのおかげ Sass や

   LESS でできるようなことはたいていできる ‑ mixin や extend、function など OK

10. アプローチの一種として ライブラリではなく styled components というアプローチ として 広まっている ほぼ同じような書き方ができるライブラリもいくつかある ‑ freestyler

    ‑ emotion React でも Vue でも Angular でも使える

11. stlyed components は既存 CSS の置き換え となるか？

12. どうかなぁ...

13. 難しい 実装コストが大きい JavaScript による高い柔軟性は結局メンテナンスを難しくする

14. 実装コストが大きい

15. 通常の Web ページのコーディングフロー 1. デザインから HTML 文章構造を設計 2. HTML を構築しつつ

    class を 各要素へ付与 3. CSS を記述して style を付与 4. 1～3 を繰り返す

16. stlyed components を使った場合のフロー 1. デザインから HTML 文章構造を設計 2. HTML を構築

    3. 構築した HTML から必要なコンポーネントを作成 4. CSS を記述して style を付与 5. コンポーネントを HTML の各要素と置き換え 6. 1～5 を繰り返す

17. 正直 ul > li の li くらいはローカルスコープに頼って コンポーネント化しなくても良いんでは

18. 高い柔軟性は結局メンテナンスを難しくする

19. スタイルの使い回し const transition = css` transition: background-color 150ms ease-in-out, color:

    150ms ease-in-out; ` const Button = styled.button` ${buttonBase} ${transition} ... `

20. 既存コンポーネントの拡張 const Button = styled.button` background-color: white; ... ` const

    PrimaryButton = styled(Button)` background-color: blue; ... `

21. 一度定義したコンポーネントの要素の変更 ver 4.0 より const Text = styled.div``; <Text as="p">

    腹筋がだらしない<Text />

22. 高い柔軟性 柔軟性がコードベース全体に渡って発揮されていたとしたら? 私には難しい

23. それでも

24. stlyed components の力を信じろ

25. どう扱えば良さそう？ 限定的 に扱うとその力を最大限発揮するのでは

26. ローカルスコープを作るために使う const Component = () => { <Status> <div> <dt>

    腹筋</dt> <dd> 今筋肉痛</dd> </div> ... </Status> } const Status = styled.dl => { ... > div { ... } dt { ... } dd { ... } }

27. ローカルスコープを作るために使う ドキュメントで実は似たような手法が紹介されている 1. コンポーネントとという小さな単位内 2. 構造が自明な要素を使っていること 2 つのどちらかに当てはまる場合、ローカルスコープを生成しても良い のでは

28. 雑に複数の要素からなるコンポーネントを作る const BaseSiteFooter = ({ className, children }) => (

    <footer className={className}> <p><small> （c ）{children}</small></p> </footer> ) className を受け取るコンポーネントを実装する

29. 雑に複数の要素からなるコンポーネントを作る const SiteFooter = styled(BaseSiteFooter)` footer { display: flex; ...

    } small: { font-size: ${theme.font.sm}; } ` <SiteFooter> 腹筋ローラの力を信じろよ？</SiteFooter> セマンティクスを持った構造をコンポーネントにまとめて スタイルを付与。 とっても楽。

30. UI フレームワーク の実装に使う

31. 機能と外観を分離する 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

32. CSS フレームワークを コンポーネント化するために使う // Bootstrap const LgPrimaryButton = styled.button.attrs({ className:

    'btn btn-lg btn-primary' }); コンポーネント生成時に class 属性を指定することができるので CSS を 1 行も書かずにコンポーネントが実装可能

33. まとめ 銀の弾丸なんてなかった 辛いと感じたら全部置き換えなくても良い stlyed components、崩して使っても便利

34. ご清聴ありがとうございました