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
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
120
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
160
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
120
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
How GitHub (no longer) Works
holman
314
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Scaling GitHub
holman
460
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
What's in a price? How to price your products and services
michaelherold
246
12k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
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 !!