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

styled-components or emotion?

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
470
これまでのReact、これからのReact
Avatar for ponday honda
0
340
Gatsbyお試し
Avatar for ponday honda
0
130
Web ComponentsとAngular
Avatar for ponday honda
0
150
Atomic Design周りについての私見
Avatar for ponday honda
1
790
え、まだ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
Cache-moi si tu peux : patterns et pièges du cache en production - Devoxx France 2026 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
240
PicoRuby for IoT: Connecting to the Cloud with MQTT
Avatar for Y_uuu yuuu
2
560
煩雑なSkills管理をSoC（関心の分離）により解決する――関心を分離し、プロンプトを部品として育てるためのOSSを作った話 / Solving Complex Skills Management Through SoC (Separation of Concerns)
Avatar for nrs nrslib
4
940
Vibe NLP for Applied NLP
Avatar for Ines Montani inesmontani
PRO
0
430
アーキテクチャモダナイゼーションとは何か
Avatar for nwiizo nwiizo
19
5.2k
Coding as Prompting Since 2025
Avatar for Jimmy Moon ragingwind
0
830
ふりがな Deep Dive try! Swift Tokyo 2026
Avatar for watura watura
0
220
Liberating Ruby's Parser from Lexer Hacks
Avatar for ydah ydah
2
1.2k
第3木曜LT会 #28
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
110
実践ハーネスエンジニアリング #MOSHTech
Avatar for Takuma Kajikawa kajitack
7
6.5k
Claude Codeをカスタムして自分だけのClaude Codeを作ろう
Avatar for Terisuke terisuke
0
140
Vibe하게 만드는 Flutter GenUI App With ADK , 박제창, BWAI Incheon 2026
Avatar for JaiChangPark itsmedreamwalker
0
550

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
220
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.5k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
250
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
300
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.5k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k

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