Upgrade to Pro — share decks privately, control downloads, hide ads and more …

styled-components or emotion?

Avatar for ponday ponday
January 25, 2019
Programming
720
0

styled-components or emotion?

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

Avatar for ponday

ponday

January 25, 2019

More Decks by ponday

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

Other Decks in Programming

See All in Programming
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
Avatar for Manfred Steyer manfredsteyer
PRO
0
230
Spec Driven Development | AI Summit Lisbon
Avatar for Daniel Sogl danielsogl
PRO
0
170
OSもどきOS
Avatar for Sora Arakawa arkw
0
470
AIエージェントの隔離技術の徹底比較
Avatar for kawayu kawayu
0
470
Hunting Vulnerabilities in Symfony with LLMs
Avatar for Vincent Amstoutz vinceamstoutz
0
520
ADKを使って簡単にAIエージェントを作ってみよう
Avatar for K1mu21 k1mu21
0
240
作って学ぶ、 JSX (TSX) ランタイムの基本
Avatar for syumai syumai
7
1.6k
肥大化するレガシーコードに立ち向かうためのインターフェース分離と依存の逆転 / JJUG CCC 2026 Spring
Avatar for hirokuni-maeta hirokunimaeta
0
520
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
Avatar for mom0tomo mom0tomo
8
3.2k
CSC307 Lecture 17
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
320
A2UI という光を覗いてみる
Avatar for SatohJohn satohjohn
1
120
脅威をエンジニアリングの糧にして――現場編 / Turning Threats into Engineering Fuel — Field Edition
Avatar for nrs nrslib
0
260

Featured

See All Featured
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.2k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
580
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
56k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.7k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
310
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
250
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
180
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.4k

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 !!