Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

styled-components or emotion?

Avatar for ponday ponday
January 25, 2019
Programming
0
700

styled-components or emotion?

React勉強会@福岡 vol.1（2019/01/25）の発表資料3つめです。
すごく簡易的な検証なのでいろいろなシーンで追加の検証をしていきたい。

Avatar for ponday

ponday

January 25, 2019
Tweet

More Decks by ponday

See All by ponday
関数型でGoFのデザインパターンやってみる
Avatar for ponday honda
1
1.5k
TypeScriptの型表現
Avatar for ponday honda
10
3.1k
Web Componentsの今
Avatar for ponday honda
1
440
これまでのReact、これからのReact
Avatar for ponday honda
0
320
Gatsbyお試し
Avatar for ponday honda
0
120
Web ComponentsとAngular
Avatar for ponday honda
0
140
Atomic Design周りについての私見
Avatar for ponday honda
1
750
え、まだWeb Componentsを未来の技術だと思ってるの？
Avatar for ponday honda
2
860
Web Componentsの動向とPolymer
Avatar for ponday honda
4
2.6k

Other Decks in Programming

See All in Programming
TestingOsaka6_Ozono
Avatar for O3(ozono) o3
0
170
DevFest Android in Korea 2025 - 개발자 커뮤니티를 통해 얻는 가치
Avatar for Suhyeon Kim wisemuji
0
170
ELYZA_Findy AI Engineering Summit登壇資料_AIコーディング時代に「ちゃんと」やること_toB LLMプロダクト開発舞台裏_20251216
Avatar for 株式会社ELYZA elyza
2
580
Navigating Dependency Injection with Metro
Avatar for HyunWoo Lee l2hyunwoo
1
170
クラウドに依存しないS3を使った開発術
Avatar for しめさば simesaba80
0
150
エディターってAIで操作できるんだぜ
Avatar for kis9a kis9a
0
750
gunshi
Avatar for kazupon kazupon
1
110
AIコーディングエージェント（NotebookLM）
Avatar for kondai kondai24
0
220
Cell-Based Architecture
Avatar for Luram Archanjo larchanjo
0
140
perlをWebAssembly上で動かすと何が嬉しいの？？？ / Where does Perl-on-Wasm actually make sense?
Avatar for mackee mackee
0
120
これならできる！個人開発のすゝめ
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
120
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
0
340

Featured

See All Featured
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
0
72
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
66
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
1.9k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
100
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
120
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
0
38
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
1.9k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
89
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
31
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.8k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
29

Transcript

  1. styled-components or emotion ? React勉強会＠福岡 vol.1 / Jan 25th, 2019

    ponday (@ponday_dev)

  2. Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション エンジニア - Like

    : TypeScript / Elixir / Python etc… - 日曜フロントエンドエンジニア - 副業もやってます

  3. Reactでよく聞くCSS in JS

  4. styled-components

  5. emotion

  6. で、 結局どっち使えばいいの？

  7. styled-components vs emotion - styled-componentsのほうが人気っぽい - GitHubのstar数はstyled-componentsのほうが多い - emotionも伸びてきている -

    emotionのほうが後発で高機能 - 開発はどちらもアクティブ - styled-components v4で速くなったらしい

  8. 検証してみた

  9. 速度検証 - スタイル付きのリスト（1万件）の表示速度を図る - componentWillMount 〜 componentDidMountまで - 10回平均 -

    以下の3つのコードで検証 - styled-components - emotion (CSS style) - emotion (styled)

  10. styled-components

  11. emotion (CSS style)

  12. emotion (styled)

  13. 結果 styled-components emotion (CSS style) emotion (styled) キャッシュなし キャッシュあり 762ms

    1103ms 507ms 596ms 1033ms 421ms

  14. 検証 - @emotion/styledが速そう？ - styled-componentsも実用レベル - 意外とemotion標準のオブジェクト型が遅い - 簡易的な検証なのでいろいろ試していきたい

  15. Thank you !!