Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
EmotionでReactをstylingすればモテるかもしれない
Search
Matsuo Obu
May 29, 2019
Technology
0
580
EmotionでReactをstylingすればモテるかもしれない
Emotion使うとモテるかもしれないという話。React LT会 @Informetis (2019-05-29) で発表。
Matsuo Obu
May 29, 2019
Tweet
Share
More Decks by Matsuo Obu
See All by Matsuo Obu
Reactの歴史
mqtsuo02
0
950
文学作品「檸檬」をReactで読む
mqtsuo02
1
480
僕が求めていたのはNext.jsだったんだ
mqtsuo02
0
650
Repro Tech Hands-on : Nuxt.js
mqtsuo02
1
820
ピピピのPWA
mqtsuo02
0
690
GraphQLについての5分間
mqtsuo02
0
780
Create React App 読解特急
mqtsuo02
0
85
JekyllとBootstrapを使って静的なブログを作ってみたよ
mqtsuo02
0
68
Other Decks in Technology
See All in Technology
TerraformをSaaSで使うとAzureの運用がこんなに楽ちん!HCP Terraformって何?
mnakabayashi
0
160
Kotlinで学ぶ 代数的データ型
ysknsid25
5
1.1k
OpenTelemetry Collector internals
ymotongpoo
5
550
JSX - 歴史を振り返り、⾯⽩がって、エモくなろう
pal4de
3
960
今からでも間に合う! 生成AI「RAG」再入門 / Re-introduction to RAG in Generative AI
hideakiaoyagi
1
180
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
38k
菸酒生在 LINE Taiwan 的後端雙刀流
line_developers_tw
PRO
0
210
上長や社内ステークホルダーに対する解像度を上げて、より良い補完関係を築く方法 / How-to-increase-resolution-and-build-better-complementary-relationships-with-your-bosses-and-internal-stakeholders
madoxten
13
7.8k
比起獨自升級 我更喜歡 DevOps 文化 <3
line_developers_tw
PRO
0
230
Rubyで作る論理回路シミュレータの設計の話 - Kashiwa.rb #12
kozy4324
1
310
What's new in OpenShift 4.19
redhatlivestreaming
1
270
Long journey of Continuous Delivery at Mercari
hisaharu
1
220
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Faster Mobile Websites
deanohume
307
31k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
4 Signs Your Business is Dying
shpigford
184
22k
Speed Design
sergeychernyshev
31
990
For a Future-Friendly Web
brad_frost
179
9.8k
Transcript
@mqtsuo02 2019-05-29 React LT会 EmotionでReactをstylingすれば モテるかもしれない
自己紹介 - フリーランスのWebエンジニア - 直近2年間はずっとReactメイン - ReactのSPA3本、ReactNative1本やった - 最近はNext.jsとGAEが好き
Reactでstylingといえば....
いろいろあるけど...
None
ですが...
こんなやつもいます...
自己紹介 - 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 = () => ( <div css={textStyle}>Emotion でモテモテ</div> ); Inline stylesと同じ要領のstyling cssプロパティに指定する
@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> );
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
Styled Components (String styles) styled-componentsと同じ要領で書ける import styled from "@emotion/styled" ;
const MoteText = styled.div` color: yellow; `; const Page = () => ( <MoteText>Emotionでモテモテ</MoteText> );
Styled Components (Object styles) import styled from "@emotion/styled" ; const
MoteText = styled.div({ color: "green", }); const Page = () => ( <MoteText>Emotionでモテモテ</MoteText> ); 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