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
3k
Web Componentsの今
Avatar for ponday honda
1
420
これまでのReact、これからのReact
Avatar for ponday honda
0
310
Gatsbyお試し
Avatar for ponday honda
0
110
Web ComponentsとAngular
Avatar for ponday honda
0
130
Atomic Design周りについての私見
Avatar for ponday honda
1
690
え、まだWeb Componentsを未来の技術だと思ってるの？
Avatar for ponday honda
2
810
Web Componentsの動向とPolymer
Avatar for ponday honda
4
2.5k

Other Decks in Programming

See All in Programming
Design Pressure
Avatar for Hynek Schlawack hynek
0
1.4k
Perlで痩せる
Avatar for Yuuki Shimizu yuukis
1
650
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
Avatar for にー兄さん drumath2237
0
110
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
Avatar for nrs nrslib
5
920
マテリアルって何者？RealityKitで扱うマテリアル入門
Avatar for Nao-RandD nao_randd
0
140
抽象データ型について学んだ
Avatar for ryounasso ryounasso
0
200
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
Avatar for suzuki masayuki suzukimar
0
190
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
Avatar for Tomohisa Takaoka tomohisa
1
160
JSAI2025 RecSysChallenge2024 優勝報告
Avatar for kami unonao
1
370
Doma で目指す ORM 最適解
Avatar for Toshihiro Nakamura nakamura_to
1
160
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
Avatar for Yohei Yasukawa yasulab
PRO
1
130
バリデーションライブラリ徹底比較
Avatar for Yuta Tanaka nayuta999999
1
410

Featured

See All Featured
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
42
2.3k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
49
8k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
329
24k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
92
6k
Designing for Performance
Avatar for Lara Hogan lara
608
69k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.8k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
137
7k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
14
1.5k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
13k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
85
4.7k

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