$30 off During Our Annual Pro Sale. View Details »

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

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

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

Matsuo Obu

May 29, 2019
Tweet

More Decks by Matsuo Obu

Other Decks in Technology

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