この記事について

社内プロジェクトでstyled-componentsが主に使われており、世間でもstyled-componentsが主流な感じなのですが、
徐々に伸びてきているemotionが気になったので導入して使ってみました。

お…！ってなったのでstyled-componentsに比べてよかったこと、悪かったことを簡単にまとめます。
（*随時更新）

emotion初心者なのでこんなメリット/デメリットある！ってことがあれば教えてください

emotionとは

後発のCSS-in-Jsのライブラリです。
基本的にはstyled-componentsでできることはほぼできそうな印象を受けました。

個人的に良い！って思った点は
- TypeScriptとの相性◎ (https://emotion.sh/docs/typescript)
- render内（html)が見やすくなる


// styled-componentっぽく書いたりできます
import styled from '@emotion/styled'

const Pin = styled.div`
  color: red;
`

render(<Pin> pin component </Pin>)

でもこっちの書き方が便利です（TSの恩恵受けられる）

import styled from '@emotion/styled'

// Object Stylesっていいます

const Pin = css({
    color: 'red',
});

render(<div css={Pin}> pin component </div>)

他にもいろんな書き方できるみたいです
https://emotion.sh/docs/introduction

メリット

TypeScriptと一緒に使ったとき

css構文のサポート受けられる

react書いてるとcss（っぽいの）をかくのめっちゃめんどくさいって思ってました。
これがあればちょっとストレス軽減！！

コンパイル前に間違ったら叱ってくれる

タイポとか。地味に嬉しいやつです。

かぶってるやつ教えてくれる

考えずに書いてるとこんなこともあったりするので…

読みやすさ

styled-componentsを使っていると、React Componentとただのタグにstyleつけてるのが混ざって読みにくく感じていました。
緑ばっかりになっててしんどい


(
  <Header>
　　<SiteTitle> ~~ hotel </SiteTitle>
　　<Navigation>
　　　<NavigationList>
　　　　<NavigationItem><a href="/plan">宿泊プラン</a></NavigationItem>
　　　　<NavigationItem><a href="/price">料金案内</a></NavigationItem>
　　　　<NavigationItem><a href="/reserve">宿泊予約</a></NavigationItem>
　　　　<NavigationItem><a href="/access">交通アクセス</a></NavigationItem>
　　　</NavigationList>
　　</Navigation>
 </Header>
);

emotionを使うといつものhtmlのタグにclassNameっぽくかけるので読みやすいです。
ここにreactComponentが追加されたら、
「あ、これ特別なやつ」ってなるので脳の負担が減るように感じました。


return (
  <header css={Header}>
　　<h1 css={SiteTitle}> ~~ hotel </h1>
　　<nav css={Navigation}>
　　　<ul css={NavigationList}>
　　　　<li css={NavigationItem}><a href="/plan">宿泊プラン</a></li>
　　　　<li css={NavigationItem}><a href="/price">料金案内</a></li>
　　　　<li css={NavigationItem}><a href="/reserve">宿泊予約</a></li>
　　　　<li css={NavigationItem}><a href="/access">交通アクセス</a></li>
　　　</ul>
　　</nav>
 </header>

);

他

メディアクエリが簡単

styled-componentsの時は結構書き方めんどくさかったのですが、
emotionでは下記のようにかけます！


const Pin = css({
    color: 'red',
    '@media(min-width: 420px)': {
    color: 'orange'
    } 
});

デメリット

デメリットもいろいろあるみたいです。

create-react-app --typescriptとの相性の悪さ

emitして設定を書き換えなきゃいけないのですが、無理矢理感があるので、create-react-app --typescriptで進めるならstyled-componentsで進めたほうが良い気がします。
（結構めんどくさかったです）

詳しい解説は以下の方のブログがわかりやすかったです
https://www.dkrk-blog.net/javascript/emotion_css

経験した中では上記だけです
あと、object stylesはTSの恩恵受けられるので書くのですが、書き方めんどくさい（小声）

emotionを使うメリット