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
脱Riverpod？fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
Avatar for Takuma Osada ostk0069
0
120
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
Avatar for bash0C7 bash0c7
1
770
すべてのコンテキストを、 ユーザー価値に変える
Avatar for Michiru Kato applism118
3
1.3k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
Avatar for Oikon s4yuba
16
11k
LT 2025-06-30: プロダクトエンジニアの役割
Avatar for Keisuke Yamamoto yamamotok
0
760
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
Avatar for Shintani Teppei euglena1215
1
160
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
Avatar for Munetoshi Ishikawa munetoshi
0
170
Hypervel - A Coroutine Framework for Laravel Artisans
Avatar for Albert Chen albertcht
1
120
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
Avatar for uutan1108 ohmori_yusuke
1
120
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
Avatar for Nealle nealle
1
10k
High-Level Programming Languages in AI Era -Human Thought and Mind-
Avatar for Hayato Ishida hayat01sh1da
PRO
0
770
第9回 情シス転職ミートアップ 株式会社IVRy（アイブリー）の紹介
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
1
320

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
107
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
50
5.5k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
69
11k
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
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Scaling GitHub
Avatar for Zach Holman holman
460
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.7k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.3k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.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 !!