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

styled-components or emotion?

Avatar for ponday ponday
January 25, 2019
Programming
0
690

styled-components or emotion?

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

Avatar for ponday

ponday

January 25, 2019
Tweet

More Decks by ponday

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

Other Decks in Programming

See All in Programming
コーディングエージェント時代のNeovim
Avatar for KEY60228 key60228
1
110
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
Avatar for Date Huang tjjh89017
0
390
兎に角、コードレビュー
Avatar for mitohato14 mitohato14
0
150
A Gopher's Guide to Vibe Coding
Avatar for Daniela Petruzalek danicat
0
180
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
Avatar for Kazuya Sakamoto kazuyasakamoto
0
280
TanStack DB ~状態管理の新しい考え方~
Avatar for じょうげん bmthd
2
350
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
Avatar for MinoDriven minodriven
23
9.1k
オープンセミナー2025@広島 「君はどこで動かすか？」 アンケート結果
Avatar for Satoshi Kaneyasu satoshi256kbyte
0
220
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
Avatar for ivargrimstad ivargrimstad
0
220
AIエージェント開発、DevOps and LLMOps
Avatar for Kento.Yamada ymd65536
1
350
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
Avatar for adachi.ryo rvirus0817
1
2.3k
Namespace and Its Future
Avatar for Satoshi Tagomori tagomoris
6
600

Featured

See All Featured
Done Done
Avatar for chrislema chrislema
185
16k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
20k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
268
13k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k

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