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
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
ふつうの技術スタックでアート作品を作ってみる
akira888
1
880
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
1
120
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
390
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
230
テスト駆動Kaggle
isax1015
0
220
Porting a visionOS App to Android XR
akkeylab
0
470
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
600
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
800
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.5k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
How STYLIGHT went responsive
nonsquared
100
5.6k
Building an army of robots
kneath
306
45k
A designer walks into a library…
pauljervisheath
207
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Git: the NoSQL Database
bkeepers
PRO
430
65k
Speed Design
sergeychernyshev
32
1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
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 !!