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
styled-components or emotion?
Search
ponday
January 25, 2019
Programming
0
660
styled-components or emotion?
React勉強会@福岡 vol.1(2019/01/25)の発表資料3つめです。
すごく簡易的な検証なのでいろいろなシーンで追加の検証をしていきたい。
ponday
January 25, 2019
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.2k
TypeScriptの型表現
honda
10
3k
Web Componentsの今
honda
1
400
これまでのReact、これからのReact
honda
0
290
Gatsbyお試し
honda
0
110
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
660
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
770
Web Componentsの動向とPolymer
honda
4
2.4k
Other Decks in Programming
See All in Programming
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
150
GoとPHPのインターフェイスの違い
shimabox
2
210
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
200
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
240
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
300
PEPCは何を変えようとしていたのか
ken7253
2
240
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.7k
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
GraphQLとの向き合い方2022年版
quramy
44
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
GitHub's CSS Performance
jonrohan
1030
460k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Making Projects Easy
brettharned
116
6k
Transcript
styled-components or emotion ? React勉強会@福岡 vol.1 / Jan 25th, 2019
ponday (@ponday_dev)
Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション エンジニア - Like
: TypeScript / Elixir / Python etc… - 日曜フロントエンドエンジニア - 副業もやってます
Reactでよく聞くCSS in JS
styled-components
emotion
で、 結局どっち使えばいいの?
styled-components vs emotion - styled-componentsのほうが人気っぽい - GitHubのstar数はstyled-componentsのほうが多い - emotionも伸びてきている -
emotionのほうが後発で高機能 - 開発はどちらもアクティブ - styled-components v4で速くなったらしい
検証してみた
速度検証 - スタイル付きのリスト(1万件)の表示速度を図る - componentWillMount 〜 componentDidMountまで - 10回平均 -
以下の3つのコードで検証 - styled-components - emotion (CSS style) - emotion (styled)
styled-components
emotion (CSS style)
emotion (styled)
結果 styled-components emotion (CSS style) emotion (styled) キャッシュなし キャッシュあり 762ms
1103ms 507ms 596ms 1033ms 421ms
検証 - @emotion/styledが速そう? - styled-componentsも実用レベル - 意外とemotion標準のオブジェクト型が遅い - 簡易的な検証なのでいろいろ試していきたい
Thank you !!