18
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

emotionを使うメリット

この記事について

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

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

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

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(っぽいの)をかくのめっちゃめんどくさいって思ってました。
これがあればちょっとストレス軽減!!
スクリーンショット 2020-05-01 15.54.25.png

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

タイポとか。地味に嬉しいやつです。
スクリーンショット 2020-05-01 15.53.49.png

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

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

スクリーンショット 2020-05-01 16.07.35.png

読みやすさ

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


(
  <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で進めたほうが良い気がします。
(結構めんどくさかったです)

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
18
Help us understand the problem. What are the problem?