Tweet
Tweet

Slide 1

Slide 1 text

styled-components or emotion ? React勉強会＠福岡 vol.1 / Jan 25th, 2019 ponday (@ponday_dev)

Slide 2

Slide 2 text

Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション エンジニア - Like : TypeScript / Elixir / Python etc… - 日曜フロントエンドエンジニア - 副業もやってます

Slide 3

Slide 3 text

Reactでよく聞くCSS in JS

Slide 4

Slide 4 text

styled-components

Slide 5

Slide 5 text

emotion

Slide 6

Slide 6 text

で、 結局どっち使えばいいの？

Slide 7

Slide 7 text

styled-components vs emotion - styled-componentsのほうが人気っぽい - GitHubのstar数はstyled-componentsのほうが多い - emotionも伸びてきている - emotionのほうが後発で高機能 - 開発はどちらもアクティブ - styled-components v4で速くなったらしい

Slide 8

Slide 8 text

検証してみた

Slide 9

Slide 9 text

速度検証 - スタイル付きのリスト（1万件）の表示速度を図る - componentWillMount 〜 componentDidMountまで - 10回平均 - 以下の3つのコードで検証 - styled-components - emotion (CSS style) - emotion (styled)

Slide 10

Slide 10 text

styled-components

Slide 11

Slide 11 text

emotion (CSS style)

Slide 12

Slide 12 text

emotion (styled)

Slide 13

Slide 13 text

結果 styled-components emotion (CSS style) emotion (styled) キャッシュなし キャッシュあり 762ms 1103ms 507ms 596ms 1033ms 421ms

Slide 14

Slide 14 text

検証 - @emotion/styledが速そう？ - styled-componentsも実用レベル - 意外とemotion標準のオブジェクト型が遅い - 簡易的な検証なのでいろいろ試していきたい

Slide 15

Slide 15 text

Thank you !!