フロントエンド - CSS・スタイリング

Emotion いもーしょん

CSS-in-JSstyled-componentsReactスタイリングランタイムCSSシリアライズ

Emotionについて教えて

簡単に言うとこんな感じ！

EmotionはJavaScriptのコードの中にCSSを直接書けるライブラリだよ！「このボタンは赤くして」ってコンポーネントのすぐ隣に書けるから、スタイルが散らかりにくいんだ。Reactと一緒に使われることが多くて、MUIなどの有名UIライブラリの裏側でも動いてるんだって！

Emotionとは

Emotionは、JavaScript（またはTypeScript）のコード内に直接CSSを記述できるCSS-in-JSライブラリです。通常のWeb開発では .css ファイルや .scss ファイルにスタイルを書きますが、EmotionではJSファイルの中にスタイルを書けるため、コンポーネントとスタイルを同じ場所で管理できます。

Reactをはじめとするコンポーネント指向のフレームワークと相性がよく、動的なスタイリング（props・状態に応じてスタイルを変える）が得意です。たとえば「ボタンが押されたら背景色を変える」「エラー時に文字を赤くする」といった処理をJavaScriptの条件分岐と組み合わせて自然に書けます。

MUI（Material UI） や Chakra UI など、人気のUIコンポーネントライブラリの内部エンジンとしても採用されており、直接意識しなくてもEmotionが裏で動いているケースは非常に多くあります。

Emotionの2つの書き方

Emotionには主に2つのAPIがあり、プロジェクトのスタイルや好みによって使い分けます。

API	書き方	特徴
`css` prop	JSX要素に直接 `css={...}` を渡す	既存コンポーネントへの追加が簡単
`styled` API	`styled.div` のような構文でコンポーネントを作る	styled-componentsと似た書き味

css prop の例

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'

const buttonStyle = css`
  background: #3b82f6;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
`

function Button({ children }) {
  return <button css={buttonStyle}>{children}</button>
}

styled API の例

import styled from '@emotion/styled'

const Button = styled.button`
  background: ${(props) => props.primary ? '#3b82f6' : '#e5e7eb'};
  color: ${(props) => props.primary ? 'white' : '#111827'};
  padding: 8px 16px;
  border-radius: 4px;
`

// 使う側
<Button primary>送信</Button>
<Button>キャンセル</Button>

✅ どちらを使えばいい？

新規プロジェクト・細かい制御が必要なら css prop が柔軟
styled-componentsから移行・チームに馴染みがあるなら styled APIが取っつきやすい

歴史と背景

2017年ごろ — CSS-in-JS の先駆けである styled-components が普及し始め、「JavaScriptでスタイルを書く」という概念が広まる
2017年 — Emotion が登場。styled-components と同様の機能を提供しつつ、パフォーマンスと柔軟性を重視した設計で注目を集める
2018年〜 — @emotion/core（後の @emotion/react）と @emotion/styled にパッケージが分割され、用途に応じて使い分けできる構造に整理される
2019年 — MUI（Material UI）v4 がスタイリングエンジンとして Emotion を採用。一気に普及が加速
2021年 — MUI v5 が完全に Emotion ベースにリニューアル。国内外の多くのプロジェクトに間接的に導入される
現在 — Next.js・Remix などのSSR（サーバーサイドレンダリング）フレームワークとの統合が整備され、本番環境での利用が安定している

styled-components との比較

Emotion の最大のライバルは styled-components です。どちらも CSS-in-JS ライブラリですが、いくつかの違いがあります。

CSS-in-JS vs 従来のCSS管理

方式	例	メリット	デメリット
通常のCSSファイル	`.css` / `.scss`	ツール不要・シンプル	クラス名の衝突・管理が大変
CSS Modules	`styles.module.css`	スコープが自動で分離	動的スタイルが書きにくい
CSS-in-JS (Emotion)	`css` prop / `styled`	動的スタイルが得意・コンポーネントと一体管理	ランタイムコストが発生する場合あり
Tailwind CSS	`className="..."`	ビルドサイズ小・デザイン統一	クラス名が長くなりがち