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
680
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
3.1k
Web Componentsの今
honda
1
430
これまでのReact、これからのReact
honda
0
310
Gatsbyお試し
honda
0
120
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
700
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
820
Web Componentsの動向とPolymer
honda
4
2.6k
Other Decks in Programming
See All in Programming
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
9.6k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
440
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
AIともっと楽するE2Eテスト
myohei
8
3k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
10
4.3k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
530
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
1.1k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.1k
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Facilitating Awesome Meetings
lara
54
6.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
How GitHub (no longer) Works
holman
314
140k
Docker and Python
trallard
45
3.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Building an army of robots
kneath
306
45k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
For a Future-Friendly Web
brad_frost
179
9.8k
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 !!