【CSS in JS】Qiitaで 👩‍🎤 Emotion を使っている理由

はじめに

Qiita株式会社 Advent Calendar 2022の9日目は、
Qiita 株式会社 プロダクト開発G デザインTMの出口（@degudegu2510）が担当します！

普段の業務は、Qiita, Qiita Team, Qiita Jobsのデザイナーとして、情報設計、体験設計(UX)、UIデザイン、フロントエンドまで携わっています。

この記事では、Qiitaで使っているCSS in JS の👩‍🎤Emotionについて
👩‍🎤Emotionの特徴やQiitaで👩‍🎤Emotionを使っている理由などをまとめました。

CSS in JSは、何がいいんだろうと考えている人や👩‍🎤Emotionを導入しようと検討している人などの参考になれば幸いです。

👩‍🎤Emotion

👩‍🎤Emotionとは？

💅 styled-components・💄glamorous といったCSS-in-JSライブラリにインスパイアされた比較的後発のライブラリです。そのため、非常に多機能であり、他ライブラリの機能の多くを更に洗練させた上で備えているのが特徴です。

また、ReactやVueといったフレームワークに依存することなく、CSS in JSを利用することができるため汎用性が高く、💅 styled-components よりもパフォーマンスが高いのも特徴になります。

主な機能の紹介

① CSS Props と Styled Components

👩‍🎤Emotionが比較的後発のライブラリであるため、他のCSS in JSからインスパイアされ、多くの書き方ができます。

CSS Propsでは、css={paragraph} のように、class名をしているようにでき、DOM構造とスタイルを分けて記述できるのも特徴です。

また、オブジェクト記法とタグ付きテンプレートリテラル記法の2つの書き方ができます。

オブジェクト記法は、厳密な型定義がされるため予測変換しやすいですが、CSSのプロパティがキャメルケースになります。

タグ付きテンプレートリテラル記法は、cssのプロパティをそのまま記載できますが、ストリングのためエラー検知しづらいです。 ※プラグインを入れればなんとかなる

Styled Componentsでは、styled.p…　のようにDOM要素の宣言は、スタイルと一緒に記載するのが特徴です。

また、Styled Componentsでもオブジェクト記法とタグ付きテンプレートリテラル記法の2つの書き方ができます。

オブジェクト記法は、厳密な型定義がされるため予測変換しやすいですが、CSSのプロパティがキャメルケースになります。

タグ付きテンプレートリテラル記法は、cssのプロパティをそのまま記載できますが、ストリングのためエラー検知しづらいです。 ※プラグインを入れればなんとかなる

② @emotion/css

👩‍🎤Emotionは、Reactやvue.js、などのJavascriptのライブラリーに左右されないようにするためのパッケージが用意されています。

それが@emotion/cssになります。

ただ、Reactで最適に使いたい場合や、Styled Componentsを使いたい場合は、以下のように別のパッケージが用意されています。

• @emotion/react
  • React用のEmotionパッケージ
• @emotion/styled
  • Styled Components用のEmotionパッケージ
• @emotion/css
  • フレームワークにとらわれず、Emotionを使用するためのパッケージ

👩‍🎤Emotionを使っている理由

セマンティックなマークアップを実現したかった。

👩‍🎤Emotionを使っている理由の1つ目は、Emotionは楽にセマンティックなマークアップを実現できることです。

💅styled-componentsを使っていた中で課題になったのは、セマンティックなマークアップの実現がやりにくいことです。SEOやアクセシビリティを向上させるためにも、セマンティックなマークアップは必要です。

そこで、💅styled-componentsと👩‍🎤Emotionの違いを見ていきましょう。

💅styled-componentsは、要素の宣言をスタイル側に持たせています。
そのため <Paragraph> のタグを見るためには、<Paragraph>で参照している行まで行く必要があります。

<Paragraph>といったタグを連想しやすい名前をつけていればいいのですが、そんなことは、なくこんな感じのコードが生まれます。

<a> なのに <SampleButton>が使われたり、<list>なのに、<div>が使われたりなど、命名規則などで縛っても難しい部分もあり、セマンティックのマークアップが難しいです。

それに比べてEmotionは、マークアップとスタイルを分けて記述できるという点が、
CSS in JSにEmotionを選んでいる１つ目の理由です。

Emotoinへの移行がやりやすかった。

Qiitaは今年で11年目のプロダクトになり、多くのコンポーネントが作られています。
それらのコンポーネントたちを一斉に変更するだけでも一苦労です。

そのため、ライブラリーの変更がしやすいこともEmotionを選んでいる理由の１つです。

具体的には、以下のようにEmotionを変更していきました。

💅styled-components → 👩‍🎤@emotion/styled → 👩‍🎤@emotion/css

まずは、💅styled-components から 👩‍🎤@emotion/styled に変更します。
スタイリングの部分に関しては、以下のように基本的に変わりません。
そのため、💅styled-components から 👩‍🎤Emotionへの変換はそこまで大変ではありませんでした。

👩‍🎤@emotion/styledに変えたら、他のPJを進めなから、順次@emotion/cssにリファクタリングしていきます。

このように、スムーズに 👩‍🎤Emotion への移行することができる点が
CSS in JSにEmotionを選んでいる２つ目の理由です。

4. まとめ

この記事では、Qiitaで使っているCSS in JS のEmotionについて
Emotionの特徴やQiitaでEmotionを使っている理由などをまとめました。

Emotionは、💅 styled-components よりもパフォーマンスが高く、セマンティックなマークアップが実現でき、
移行するのもスムーズです。

ただ、近年台頭してきているゼロランタイムのCSS in JSの方が、パフォーマンスがいいらしいので、
ゼロランタイムのCSS in JSに移行するのも近いかもしれません。

ゼロランタイムのCSS in JSに移行した際は、また記事にまとめようと思いますのでお楽しみしてください。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。