はじめに
実際に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をとても気に入っているので、皆さんにも是非導入して試してもらいたいと思いました！