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
590
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
960
文学作品「檸檬」をReactで読む
mqtsuo02
1
480
僕が求めていたのはNext.jsだったんだ
mqtsuo02
0
660
Repro Tech Hands-on : Nuxt.js
mqtsuo02
1
830
ピピピのPWA
mqtsuo02
0
700
GraphQLについての5分間
mqtsuo02
0
780
Create React App 読解特急
mqtsuo02
0
87
JekyllとBootstrapを使って静的なブログを作ってみたよ
mqtsuo02
0
69
Other Decks in Technology
See All in Technology
What’s new in Android development tools
yanzm
0
240
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
100
Geminiとv0による高速プロトタイピング
shinya337
0
260
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
210
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
340
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
200
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
140
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
モバイル界のMCPを考える
naoto33
0
430
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.6k
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
6.8k
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
2
580
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Designing for Performance
lara
610
69k
Practical Orchestrator
shlominoach
188
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Navigating Team Friction
lara
187
15k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Building an army of robots
kneath
306
45k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
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