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
670
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
410
これまでのReact、これからのReact
honda
0
300
Gatsbyお試し
honda
0
110
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
680
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
790
Web Componentsの動向とPolymer
honda
4
2.5k
Other Decks in Programming
See All in Programming
AIコードエディタの基盤となるLLMのFlutter性能評価
alquist4121
0
210
エンジニアが挑む、限界までの越境
nealle
1
210
Chrome Extension Techniques from Hell
moznion
1
160
AIコーディングの理想と現実
tomohisa
22
29k
PHPで書いたAPIをGoに書き換えてみた 〜パフォーマンス改善の可能性を探る実験レポート〜
koguuum
0
160
AHC045_解説
shun_pi
0
530
監視 やばい
syossan27
4
500
スモールスタートで始めるためのLambda×モノリス(Lambdalith)
akihisaikeda
2
280
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Webinar 2025
danielsogl
0
130
Exit 8 for SwiftUI
ojun9
0
130
ComposeでWebアプリを作る技術
tbsten
0
110
Building a macOS screen saver with Kotlin (Android Makers 2025)
zsmb
1
150
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
69
4.7k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Writing Fast Ruby
sferik
628
61k
Typedesign – Prime Four
hannesfritz
41
2.6k
Building Adaptive Systems
keathley
41
2.5k
The Pragmatic Product Professional
lauravandoore
33
6.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Embracing the Ebb and Flow
colly
85
4.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.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 !!