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

styled-components or emotion?

Avatar for ponday ponday
January 25, 2019
Programming
730
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
890
Web Componentsの動向とPolymer
Avatar for ponday honda
4
2.8k

Other Decks in Programming

See All in Programming
AIエージェントで 変わるAndroid開発環境
Avatar for takahirom takahirom
1
310
act1-costs.pdf
Avatar for Sumedh Bala sumedhbala
0
160
はてなアカウント基盤 State of the Union
Avatar for cockscomb cockscomb
1
1.3k
Hatena Engineer Seminar #37「言語モデルの活用に関する研究」
Avatar for SlashNephy slashnephy
0
470
Creating Composable Callables in Contemporary C++
Avatar for Björn Fahller rollbear
0
190
AIで効率化できた業務・日常
Avatar for Ochtum ochtum
0
160
継続モナドとリアクティブプログラミング
Avatar for ゆきくらげ yukikurage
2
240
これからAgentCoreを触る方へ トレンドはGatewayです
Avatar for Har1101 har1101
6
460
ランチタイムLT会3周年！ランチタイムLT会を3年間続けられたお話
Avatar for y-ohgi y0hgi
1
130
霧の中の代数的エフェクト
Avatar for funnycat funnyycat
1
130
Dataformのリポジトリを立ち上げるときにまずやること / dataform-day0-2026
Avatar for snhryt snhryt
0
210
スマートグラスで並列バイブコーディング
Avatar for Hayami Shuhei hyshu
0
280

Featured

See All Featured
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
720
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
220
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
620
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
250
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
230
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
610
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
340
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
1.9k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
460
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
180
Design in an AI World
Avatar for tapps tapps
1
260
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k

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