React 用 CSS-in-JS とデザインシステムライブラリの比較：Emotion, Styled-Components, Theme-UI, Rebass

React エコシステムにおいて、スタイルの管理方法はアーキテクチャの根幹に関わる重要な決定です。emotion と styled-components は CSS-in-JS の二大巨頭として知られていますが、theme-ui や rebass はそれらの上に成り立つデザインシステム層として機能します。これら 4 つのパッケージは、一見似ていますが、その役割、保守状況、そして適するユースケースは明確に異なります。

🏗️ 基本的な役割とアーキテクチャ

まず、これらを 2 つのグループに分けて理解する必要があります。

1. スタイリングエンジン: emotion, styled-components
2. デザインシステム/テーマ層: theme-ui, rebass

emotion と styled-components は、CSS を JavaScript で記述し、スコープされたスタイルを生成する「エンジン」です。これらは単独で完結しており、特定のデザイン言語を強制しません。

theme-ui と rebass は、上記のエンジン（主に Emotion や styled-system）の上に構築された「部品」です。これらは、色やフォントなどのテーマ設定を標準化し、すぐに使えるコンポーネントを提供します。

// emotion: スタイリングエンジン
import { css } from '@emotion/react';
const style = css({ color: 'hotpink' });

// styled-components: スタイリングエンジン
import styled from 'styled-components';
const Button = styled.button`color: hotpink;`;

// theme-ui: テーマ層 (Emotion ベース)
import { Box } from 'theme-ui';
// テーマの設定値を自動的に参照する
<Box sx={{ color: 'primary' }} />

// rebass: デザインシステム (styled-system ベース)
import { Button } from 'rebass';
// 制約に基づいたプリセットコンポーネント
<Button variant="primary">Click</Button>

🎨 スタイルの記述方法：タグベース vs クラスベース vs SX Props

スタイリングのアプローチは、開発体験（DX）に直結します。

styled-components は「タグベース」です。コンポーネント定義そのものにスタイルを埋め込みます。スタイルとロジックが同じファイルにまとまるため、コンポーネントの独立性が高まります。

// styled-components
const Title = styled.h1`
  font-size: 1.5em;
  color: ${props => props.theme.color};
`;

// 使用時
<Title />

emotion は「クラスベース」と「タグベース」の両方をサポートします。css 関数でスタイルオブジェクトを作成し、クラス名として適用する方が、パフォーマンス面で有利な場合があります。

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

const titleClass = css`
  font-size: 1.5em;
  color: hotpink;
`;

// 使用時
<h1 className={titleClass}>Hello</h1>

theme-ui は、sx プロパティを使用します。これはテーマオブジェクトの値を直接参照できるショートハンドです。インラインスタイルのように書けますが、テーマの一貫性が保たれます。

// theme-ui
import { Box } from 'theme-ui';

// テーマの color.primary を参照
<Box sx={{ bg: 'primary', p: 3 }}>Content</Box>

rebass は、プリセットされたコンポーネントを使用します。スタイルを記述するのではなく、既存のコンポーネントに props を渡して調整します。

// rebass
import { Heading } from 'rebass';

// フォントサイズをテーマのスケールから選択
<Heading fontSize={3}>Title</Heading>

🛠️ テーマ設定と一貫性の管理

大規模プロジェクトでは、色やスペースの一貫性が重要です。

emotion と styled-components は、ThemeProvider を提供しますが、使い方は自由です。自分でテーマ構造を設計する必要があります。

// styled-components ThemeProvider
const theme = { colors: { primary: 'blue' } };
<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

theme-ui は、テーマ仕様（Theme Specification）を厳格に定義しています。colors.primary や space.3 などのキーが標準化されているため、チーム間での認識齟齬が減ります。

// theme-ui theme object
const theme = {
  colors: { primary: '#00f' },
  space: [0, 4, 8, 16],
  fonts: { body: 'system-ui' }
};

rebass も同様に styled-system に依存しており、スペースやフォントサイズのスケールを数値インデックスで管理します。しかし、カスタマイズ性はやや制限されます。

// rebass / styled-system
// space[2] が自動的に padding として適用される
<Box p={2} />

⚠️ メンテナンス状況と将来性

アーキテクトとして最も注意すべき点は、パッケージの保守状況です。

• styled-components: 活発にメンテナンスされており、v6 などでモダンな機能（コンポーネントスタイルの最適化など）が追加されています。長期サポートが期待できます。
• emotion: 非常に安定しており、React 18 や SSR 環境でのパフォーマンスに優れています。Next.js などのフレームワークでも広く採用されています。
• theme-ui: 開発ペースは以前より緩やかになっています。主要なコントリビューターが他のプロジェクトに移っているため、新規採用には慎重な評価が必要です。
• rebass: 事実上のメンテナンス終了状態にあります。GitHub のアクティビティは低く、新規プロジェクトでの使用は避けるべきです。代わりに、よりモダンなコンポーネントライブラリや、Tailwind CSS などの検討が推奨されます。

🚀 パフォーマンスと SSR

サーバーサイドレンダリング（SSR）を行う場合、スタイリングエンジンの選択が重要です。

emotion は SSR におけるスタイルの抽出（extraction）が非常に優れており、Critical CSS の生成が容易です。

// emotion SSR
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';

// サーバー側でキャッシュを作成し、スタイルを抽出
const cache = createCache({ key: 'css' });

styled-components も StyleSheetManager を通じて SSR をサポートしていますが、設定がやや複雑になる場合があります。

// styled-components SSR
import { ServerStyleSheet } from 'styled-components';

// レンダリング時にスタイルを収集
const sheet = new ServerStyleSheet();

theme-ui と rebass は、それぞれ基盤とするエンジン（Emotion や styled-components）の SSR 性能に依存します。追加のオーバーヘッドはほとんどありませんが、基盤エンジンの設定を正しく行う必要があります。

📊 実装比較サマリー

💡 結論：どれを選ぶべきか

新規プロジェクトでスタイリングエンジンを選ぶなら： emotion または styled-components の一択です。チームがオブジェクト指向のスタイルを好むなら emotion、CSS 記述に近い直感的な記述を好むなら styled-components が適しています。どちらも成熟しており、性能差は微々たるものです。

デザインシステムを構築するなら： theme-ui は依然として有用ですが、メンテナンスのリスクを理解しておく必要があります。より制御性を高めるなら、emotion を基盤に自社でデザインシステムを構築するか、Tailwind CSS などのユーティリティファーストなアプローチを検討する方が現代的です。

rebass について： 残念ながら、rebass は新規プロジェクトでの使用を推奨しません。代替となるライブラリが多く登場しているため、既存の資産維持以外での採用メリットはほぼありません。

最終的には、チームのスキルセットと、プロジェクトが求める「制約の強さ」で決定するのが賢明です。