2021-02-25

巡りめぐってemotionを使ってみた

MaterialUIからemotionに移行した話

開発を初めて、最初はMaterialUIで書いていたが、色々モヤモヤしてたので移行した。その中でモヤモヤした点、移行する際に気にしてた点をまとめる。

Material UIからemotionに移行

当初Material UIで書いていたけど、なんか色々気に入らない。気に入らない点は２つだった。

CSS-in-JSの書き方が気に入らない
Material UIのデフォルトのスタイルが邪魔

CSS-in-JSの書き方が気に入らない

.text {
  text-align: center;
  font-size: 2rem;
  color: red;
}

こんな感じのCSSをMaterialUIを使って、Componentにスタイルを当ててみる。

Hooks式

@material-ui/core/styles の makeStyles を使う。 styleを定義したfunctionを、Componentで呼び出してclassNameに渡してあげる。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  text: {
    textAlign: center,
    fontSize: 2rem,
    color: red
  }
});

export default function StyledText() {
  const classes = useStyles();
  return (
    <p className={classes.text}>
      Test
    </p>
  );
}

Styled Component式

@material-ui/core/styles の styled を使う。

import React from 'react';
import { styled } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';

const CustomText = styled(Typography)({
  text: {
    textAlign: center,
    fontSize: 2rem,
    color: red
  }
});

export default function StyledText() {
  return (
    <CustomText>Test</CustomText>
  );
}

個人的にスタイルのためのComponentを作るのは好きじゃないのでHooks式の書き方を採用。それで書いてはいたけど、CSS プロパティ名をキャメルで書くのにすごい違和感&不便だった。。ネットで調べた このスタイル良さそう！コピペしよう ができない。レスポンシブの対応も簡単にできるのか@mediaとかではないので若干の違和感がある。

Material UIのデフォルトのスタイルが邪魔

これは良いところでもあり、悪いところでもあるかも。 Material-UIは単純にCSS-in-JSのライブラリーではないからこれで怒るのは自分が悪いきもするけど、まぁ色々邪魔だった。確かにあまり気にしなくても簡単に綺麗な画面が作れるのは確かにそうだけど、もうちょっと細かくスタイルをいじるときが問題になっていた。 Material-UIはかなり大きいフレームワークだから思ったよりスタイルを頑張ってくれてたので個人的に今回のブログは自分の勉強目的もあったから自分でスタイルも頑張ってみたいから他のライブラリーを選ぶとした。

emotionを採用する

そこで色々調べて、何個か候補を出してみて選ぶとした。

諦めてMaterial-UIを使い続ける
かの有名なStyled Component
emotion
tailwind css

そこで1はまぁないでしょと思ってそもそも除外。上にも書いているが、スタイルだけのためのComponentは個人的に好きじゃないので2も除外した。 4のtailwind cssも一瞬考えたけど、スタイルの勉強にもならないし、これも他プロジェクトでスタイルを共有したりするときに再利用性もないので諦めた。

消去法に見えるが、emotionは結構気に入ったので採用。それでこのブログは現在emotionでスタイルが書かれている。

emotionの書き方

emotionの場合、cssのブロックにしてあげてcomponentのcssに渡してあげる。 Sassで書けるので非常に書きやすい。 cssのpropsはReactにはないので色々設定しないといけないけど、他のCSS-in-JSのライブラリーとあまり差はないので気になるほどではなかった。 Styled Componenet見たいにCompoenetを作る方法もあるが、好みじゃないので使ってない。

import React from 'react';
import { css } from "@emotion/react";

const text = css`
  text-align: center;
  font-size: 2rem;
  color: red;
`

export default function StyledText() {
  return (
    <p css={text}>
      Test
    </p>
  );
}

vscodeだとStyled Component用のプラグインを入れたらスタイルの補完もしてくれるので非常に満足しなが楽しく書いている。