$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すれば モテるかもしれない

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

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

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

  5. None
  6. ですが...

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

  8. 自己紹介 - CSS in JS のライブラリ - 高性能:パフォーマンスがいい - 多機能:色々な方法でstylingできる

    - 大人気:★ 8,000 over - とてもエモーショナルなロゴですね emotion-js / emotion
  9. 多機能な点において styled-componentsに完全勝利

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

    (String styles) - Styled Components (String styles) - Styled Components (Object styles)
  11. css prop (Object styles) const textStyle = { color: "red"

    }; const Page = () => ( <div css={textStyle}>Emotion でモテモテ</div> ); Inline stylesと同じ要領のstyling cssプロパティに指定する
  12. @emotion/coreのcss関数を使うと CSSと同じように書ける css prop (String styles) import { css }

    from "@emotion/core" ; const textStyle = css` color: blue; `; const Page = () => ( <div css={textStyle}>Emotion でモテモテ</div> );
  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
  14. Styled Components (String styles) styled-componentsと同じ要領で書ける import styled from "@emotion/styled" ;

    const MoteText = styled.div` color: yellow; `; const Page = () => ( <MoteText>Emotionでモテモテ</MoteText> );
  15. Styled Components (Object styles) import styled from "@emotion/styled" ; const

    MoteText = styled.div({ color: "green", }); const Page = () => ( <MoteText>Emotionでモテモテ</MoteText> ); styled-componentsと同じ要領で書ける
  16. $ npm install --save @emotion/core 導入方法 (css props) /** @jsx

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

    from "react"; import styled from "@emotion/styled" ; @emotion/styled パッケージをインストール styledだけを使う場合は、プラグマは必要なし styled-components と同じ使用感
  18. Emotionは他にもいろいろな機能がある - Globalコンポーネントでglobalのstylingができる - ネストされてるelementに対してもstylingできる - propsの値から動的なstylingもできる - 姉妹パッケージのfacepaintでメディアクエリをいい感じに書ける -

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

  20. そうゆうことだ

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

  22. E N D