Emotion使うとモテるかもしれないという話。React LT会 @Informetis (2019-05-29) で発表。
@mqtsuo022019-05-29 React LT会EmotionでReactをstylingすればモテるかもしれない
View Slide
自己紹介- フリーランスのWebエンジニア- 直近2年間はずっとReactメイン- ReactのSPA3本、ReactNative1本やった- 最近はNext.jsとGAEが好き
Reactでstylingといえば....
いろいろあるけど...
ですが...
こんなやつもいます...
自己紹介- CSS in JS のライブラリ- 高性能:パフォーマンスがいい- 多機能:色々な方法でstylingできる- 大人気:★ 8,000 over- とてもエモーショナルなロゴですねemotion-js / emotion
多機能な点においてstyled-componentsに完全勝利
Emotionのstyling いろいろ- css prop (Object styles)- css prop (String styles)- Styled Components (String styles)- Styled Components (Object styles)
css prop (Object styles)const textStyle = { color: "red" };const Page = () => (Emotion でモテモテ);Inline stylesと同じ要領のstylingcssプロパティに指定する
@emotion/coreのcss関数を使うとCSSと同じように書けるcss prop (String styles)import { css } from "@emotion/core" ;const textStyle = css`color: blue;`;const Page = () => (Emotion でモテモテ);
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 StylesObject Styles
Styled Components (String styles)styled-componentsと同じ要領で書けるimport styled from "@emotion/styled" ;const MoteText = styled.div`color: yellow;`;const Page = () => (Emotionでモテモテ);
Styled Components (Object styles)import styled from "@emotion/styled" ;const MoteText = styled.div({color: "green",});const Page = () => (Emotionでモテモテ);styled-componentsと同じ要領で書ける
$ npm install --save @emotion/core導入方法 (css props)/** @jsx jsx */import { jsx, css } from "@emotion/core" ;@emotion/core パッケージをインストール各ページファイルでプラグマを書いてReactの代わりに jsx モジュールをimportする
$ npm install --save @emotion/styled導入方法 (Styled Components)import React from "react";import styled from "@emotion/styled" ;@emotion/styled パッケージをインストールstyledだけを使う場合は、プラグマは必要なしstyled-components と同じ使用感
Emotionは他にもいろいろな機能がある- Globalコンポーネントでglobalのstylingができる- ネストされてるelementに対してもstylingできる- propsの値から動的なstylingもできる- 姉妹パッケージのfacepaintでメディアクエリをいい感じに書ける- TypeScriptの型定義がパッケージに入っているのでtsxへの導入も楽
Emotionはこんな人にオススメかもしれない- stylingをとことんカスタムしたい人- Inline Stylesっぽい感じでclassによるstylingがしたい人- 環境整備だけして、styling方法は後で考えたい人- とりあえずナウいパッケージ使いたい人
そうゆうことだ
ReactやってるならEmotionもさわった方がいいプラグマはうざいけど、多機能なのはいい個人的にはこのロゴ(絵文字)好きReactのお仕事おまちしてます!このLTで伝えたかったこと
E N D