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
680

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.2k
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
700
え、まだWeb Componentsを未来の技術だと思ってるの？
Avatar for ponday honda
2
820
Web Componentsの動向とPolymer
Avatar for ponday honda
4
2.6k

Other Decks in Programming

See All in Programming
PipeCDのプラグイン化で目指すところ
Avatar for Warashi warashi
1
280
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
Avatar for Márton Braun zsmb
1
290
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
Avatar for Nealle nealle
1
10k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
120
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
Avatar for panda_program panda_program
6
2.1k
git worktree × Claude Code × MCP ～生成AI時代の並列開発フロー～
Avatar for hisuzuya hisuzuya
1
570
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
Avatar for Hiromi Hishida 77web
2
530
地方に住むエンジニアの残酷な現実とキャリア論
Avatar for nakamichi ichimichi
5
1.5k
High-Level Programming Languages in AI Era -Human Thought and Mind-
Avatar for Hayato Ishida hayat01sh1da
PRO
0
780
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
Avatar for Tetsuya Kikuchi tkikuc
21
4k
ISUCON研修おかわり会 講義スライド
Avatar for Yuki Yata arfes0e2b3c
1
450
Hack Claude Code with Claude Code
Avatar for Akihiro Okuno choplin
4
2.1k

Featured

See All Featured
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.5k
A better future with KSS
Avatar for Kyle Neath kneath
238
17k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
970
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k

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