EmotionでReactをstylingすればモテるかもしれない

Emotion使うとモテるかもしれないという話。React LT会 @Informetis (2019-05-29) で発表。

Transcript

1. @mqtsuo02
   2019-05-29 React LT会
   EmotionでReactをstylingすれば
   モテるかもしれない
   

   View Slide

2. 自己紹介
   - フリーランスのWebエンジニア
   - 直近2年間はずっとReactメイン
   - ReactのSPA3本、ReactNative1本やった
   - 最近はNext.jsとGAEが好き
   

   View Slide

3. Reactでstylingといえば....
   

   View Slide

4. いろいろあるけど...
   

   View Slide

5. View Slide

6. ですが...
   

   View Slide

7. こんなやつもいます...
   

   View Slide

8. 自己紹介
   - CSS in JS のライブラリ
   - 高性能：パフォーマンスがいい
   - 多機能：色々な方法でstylingできる
   - 大人気：★ 8,000 over
   - とてもエモーショナルなロゴですね
   emotion-js / emotion
   

   View Slide

9. 多機能な点において
   styled-componentsに完全勝利
   

   View Slide

10. Emotionのstyling いろいろ
    - css prop (Object styles)
    - css prop (String styles)
    - Styled Components (String styles)
    - Styled Components (Object styles)
    

    View Slide

11. css prop (Object styles)
    const textStyle = { color: "red" };
    const Page = () => (
    Emotion でモテモテ
    );
    Inline stylesと同じ要領のstyling
    cssプロパティに指定する
    

    View Slide

12. @emotion/coreのcss関数を使うと
    CSSと同じように書ける
    css prop (String styles)
    import { css } from "@emotion/core" ;
    const textStyle = css`
    color: blue;
    `;
    const Page = () => (
    Emotion でモテモテ
    );
    

    View Slide

13. styleの共通化はこんな感じに書ける
    const baseStyleSt = css`
    color: black;
    `;
    const textStyleSt = css`
    ${baseStyleSt};
    font-size: .8rem;
    color: blue;
    `;
    const baseStyleOb = {
    color: "black",
    };
    const textStyleOb = {
    ...baseStyleOb,
    fontSize: ".8rem",
    color: "blue",
    };
    String Styles
    Object Styles
    

    View Slide

14. Styled Components (String styles)
    styled-componentsと同じ要領で書ける
    import styled from "@emotion/styled" ;
    const MoteText = styled.div`
    color: yellow;
    `;
    const Page = () => (
    Emotionでモテモテ
    );
    

    View Slide

15. Styled Components (Object styles)
    import styled from "@emotion/styled" ;
    const MoteText = styled.div({
    color: "green",
    });
    const Page = () => (
    Emotionでモテモテ
    );
    styled-componentsと同じ要領で書ける
    

    View Slide

16. $ npm install --save @emotion/core
    導入方法 (css props)
    /** @jsx jsx */
    import { jsx, css } from "@emotion/core" ;
    @emotion/core パッケージをインストール
    各ページファイルでプラグマを書いて
    Reactの代わりに jsx モジュールをimportする
    

    View Slide

17. $ npm install --save @emotion/styled
    導入方法 (Styled Components)
    import React from "react";
    import styled from "@emotion/styled" ;
    @emotion/styled パッケージをインストール
    styledだけを使う場合は、プラグマは必要なし
    styled-components と同じ使用感
    

    View Slide

18. Emotionは他にもいろいろな機能がある
    - Globalコンポーネントでglobalのstylingができる
    - ネストされてるelementに対してもstylingできる
    - propsの値から動的なstylingもできる
    - 姉妹パッケージのfacepaintでメディアクエリをいい感じに書ける
    - TypeScriptの型定義がパッケージに入っているのでtsxへの導入も楽
    

    View Slide

19. Emotionはこんな人にオススメかもしれない
    - stylingをとことんカスタムしたい人
    - Inline Stylesっぽい感じでclassによるstylingがしたい人
    - 環境整備だけして、styling方法は後で考えたい人
    - とりあえずナウいパッケージ使いたい人
    

    View Slide

20. そうゆうことだ
    

    View Slide

21. ReactやってるならEmotionもさわった方がいい
    プラグマはうざいけど、多機能なのはいい
    個人的にはこのロゴ(絵文字)好き
    Reactのお仕事おまちしてます！
    このLTで伝えたかったこと
    

    View Slide

22. E N D
    

    View Slide