はじめに

実際にEmotionを使ってみて、良かったと感じた部分をまとめて、Emotionを布教できればなーと思い記事を書いて見ました。
この記事を読んで、Emotionを導入する際の参考にしてもらえればありがたいです！

Emotionの導入・使い方についてはこちらで解説しているので、是非参考にしてください。
Next.js 10 + TypeScriptでEmotionを使う
 Emotionを使いこなす

Emotionの良い点

全てのクラス名が一意になっている

全てのクラス名に一意なhashが付加されているので、ほかのCSSライブラリやグローバルなクラス名と衝突する心配がありません。

開発時はcssをバインドした変数名やコンポーネント名などがクラス名の後ろに付加されて、css-11z9jyx-hogeのようなクラス名になり、本番ビルドではcss-11z9jyxのようなクラス名になります。

CSS設計を行う上で、クラス名がかぶらないようにというのを様々な方法で実現しようとすると思いますが、Emotionを使っていればクラス名がかぶることがないので安心して使うことができます。

参考: https://emotion.sh/docs/@emotion/babel-plugin#labelformat

CSSがどこで生成されたのかわかりやすい

コンポーネント名や変数名が生成されるクラス名に含まれているので、どこで生成されたCSSかが分かりやすくなっています。
設定によってはファイル名やディレクトリなどもクラス名に含むようにできるので、必要に応じて設定することもできます。

全てのCSSが一意であるという特徴と合わさって、一意かつ分かりやすいクラス名が生成されているのでデバッグのしやすさとバグの起こりにくさが両立されていると思います。

CSSの定義する順番に左右されずに実装できる

場合によってはCSSに記述順や詳細どなどによってどれが適応されるか考慮しなければならないことがあります。
しかし、Emotionでは全て一つのクラスとしてCSSの内容を合成して生成するので、クラスの定義順などには左右されずに、そのcssテンプレート文字列の中の記述の順番だけを気にすれば良くなります。

このリンクの解説でとてもわかりやすく解説してあるので、読んでみてください。

参考: https://emotion.sh/docs/composition

TypeScriptで補完が効く

css modulesだと、importしたら型が

const styles: {
    readonly [key: string]: string;
}

になっていて何のクラスがあるのかわかりません。

Emotionだと変数にバインドするだけなので、こう言った問題は起こりません。

const classes = {
  hoge: css``,
  fuga: (theme: Theme) => css``,
}

const classes: {
    hoge: SerializedStyles;
    fuga: (theme: Theme) => SerializedStyles;
}

CSSを定義したファイルと行き来しながらクラス名をコピペしてみたいな作業をしなくてよく、VSCodeの定義にジャンプできる機能なども使えるので、作業の効率が上がります。

過去のCSSをコピペで流用できる

CSS in JSのライブラリではオブジェクト形式で記述するものもありますが、Emotionはテンプレート文字列にCSSをかけるので、コピペで流用することができます。

css modulesからの移行をする場合でも、ある程度コピペするだけで移行できるので、オブジェクトに修正しないといけないCSS in JSライブラリなどと比較すると簡単にできます。

Emotionの良くない点

SSRの環境での導入の仕方が少しややこしい

SSR環境に導入する方法が少しややこしいです。

また、Emotionを使っている記事などがまだそこまで多くないので、少しニッチな使い方をしたい場合に検索しても出てこない場合があります。

Next.jsをTypeScriptで使ってそこにEmotionを入れるというだけでも日本語の記事はほとんどないので、導入やトラブルシューティングには少し苦労するかもしれません。

どんどんアップデートされていく

これは良い点でもあるのですが、どんどんアップデートされて改善されていきます。

Emotion 10からEmotion 11に上がったときに導入の方法も少し変わっていたりするので、数ヶ月時間が経つだけでいろいろ変わってベストプラクティスも変わってくる可能性があります。

当然その分使いやすくなっていたりはするのですが、古い記事などを参考にできなくなって行ったりするので自分で調べたりドキュメントを読む能力が必要になるかもしれません。

まとめ

最後まで読んでいただきありがとうございます。

いかがだったでしょうか？
個人的にはEmotionをとても気に入っているので、皆さんにも是非導入して試してもらいたいと思いました！

Emotionはいいぞ