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

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

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. いろいろあるけど...
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