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
410
これまでのReact、これからのReact
honda
0
300
Gatsbyお試し
honda
0
110
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
670
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
780
Web Componentsの動向とPolymer
honda
4
2.5k
Other Decks in Programming
See All in Programming
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
230
2025/3/18 サービスの成長で生じる幅広いパフォーマンスの問題を、 AIで手軽に解決する
shirahama_x
0
160
20250326_生成AIによる_レビュー承認システムの実現.pdf
takahiromatsui
17
5.4k
プログラミング教育のコスパの話
superkinoko
0
120
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
180
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
7
6.6k
PsySHから紐解くREPLの仕組み
muno92
PRO
1
520
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
130
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
3
1.1k
AHC 044 混合整数計画ソルバー解法
kiri8128
0
300
WordPress Playground for Developers
iambherulal
0
120
体得しよう!RSA暗号の原理と解読
laysakura
3
530
Featured
See All Featured
Navigating Team Friction
lara
184
15k
Building Applications with DynamoDB
mza
94
6.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
A Tale of Four Properties
chriscoyier
158
23k
Being A Developer After 40
akosma
90
590k
Building Adaptive Systems
keathley
41
2.5k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A designer walks into a library…
pauljervisheath
205
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Building an army of robots
kneath
304
45k
Side Projects
sachag
452
42k
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 !!