React×Emotionで学ぶ、スッキリしたスタイリングの始め方

フロントエンド開発•2025/1/24

はじめに

Reactでのスタイリングといえば、CSS ModulesやStyled Componentsを思い浮かべる方が多いかもしれません。一方で、Emotionという選択肢も注目を集めています。 Reactと併用することでコードをスッキリと書けるうえ、デザインの柔軟性が増すのが魅力です。皆さんは「コンポーネントごとにスタイルを管理したい」「デザインをより把握しやすくしたい」と考えていないでしょうか。そういったニーズを持っているなら、Emotionはとても便利なツールになりそうです。

CSS in JSのアプローチは、これまでのスタイル管理を大きく変えました。そしてEmotionは、その中でもシンプルで扱いやすいライブラリとして知られています。この記事では、React×Emotionの基本的な仕組みやメリットをわかりやすく説明し、実務でどう活用できるのかを見ていきたいと思います。

React Emotionとは

React Emotionは、CSS in JSのライブラリの一つです。 Reactコンポーネントの中でスタイルを直接定義できるため、コンポーネント単位で管理がしやすくなります。 JavaScript内でスタイルを定義することに抵抗があるかもしれませんが、慣れると仕組みが理解しやすく感じるはずです。

また、SCSSやLessといったプリプロセッサを使わなくても、ネストや変数の利用などが行いやすい点も特徴です。スタイルを書く場所が明確に分かれていない分、デザインの変更時に迷いにくくなるというメリットがあります。こうした管理のしやすさによって、開発チームでの共通ルールを作成しやすくなり、保守性が向上しやすいとも言えるでしょう。

React Emotionの基本

Emotionでは、styled APIとcss APIという2つの書き方が用意されています。たとえば、styled APIを使うと、まるでStyled Componentsを使うときのようにコンポーネントを定義できます。一方、css APIを使う場合は、より柔軟にクラス名を付与したり、複数の要素にスタイルを適用したりできます。 ReactのJSXと相性が良く、慣れれば自分の好みに応じて使い分けることも十分に可能です。

スタイリングの仕組み

Emotionは、コンポーネントをレンダリングするときに、必要なCSSを動的に生成してHTML内に埋め込みます。このアプローチにより、スコープの衝突が起きにくくなり、名前の衝突で悩まされることが少なくなるでしょう。さらに、コンポーネントが破棄されれば、そのスタイルも不要になるので、必要なCSSだけが読み込まれるメリットがあります。

EmotionはオプションとしてBabelプラグインを使うこともできます。 Babelプラグインを導入すると、より効率よく動作し、クラス名をわかりやすく自動生成してくれます。このような仕組みのおかげで、デバッグの際もコンポーネント名などがわかりやすくなりやすいと言えるでしょう。

プロジェクトでのメリット

Emotionを使うと、デザインとロジックを分ける境界がはっきりするように思えるかもしれません。しかし、実際にはコンポーネントごとにスタイルを管理しやすくなるので、リファクタリングのときにも理解しやすい構造ができます。色や余白など、共通で使いたい定義を変数化できるため、要素ごとにスタイルのコピー＆ペーストを繰り返す手間も減らせるでしょう。

また、JavaScriptの変数や関数を使った動的なスタイルを簡単に書けるのは大きな利点です。たとえば、特定の条件に応じて背景色を切り替えたり、画面サイズに応じてフォントサイズを変えたりする場合も、コンポーネント単位でスムーズに書けます。この柔軟性が大きな魅力なのです。

導入手順とシンプルなサンプル

Emotionは、まずnpmやyarnでインストールして使います。 React 18以上を使っている環境であれば、以下のコマンドでセットアップできます。


npm install @emotion/react @emotion/styled

ここでは、簡単にstyled APIを使ったサンプルを紹介します。コンポーネントを作成するとき、まるでHTMLタグを拡張するように書ける点がポイントです。


import React from "react";
import styled from "@emotion/styled";

// ボタンをstyled APIで作成
const StyledButton = styled.button`
  background-color: ${props => props.primary ? "blue" : "gray"};
  color: white;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  &:hover {
    opacity: 0.8;
  }
`;

function App() {
  return (
    <div>
      <StyledButton primary>プライマリボタン</StyledButton>
      <StyledButton>デフォルトボタン</StyledButton>
    </div>
  );
}

export default App;

上記の例では、primaryというpropsを受け取って色を切り替えています。このように動的に背景色を指定できるので、必要なロジックを組み合わせやすくなります。また、CSSファイルへのインポートが不要になるのもわかりやすいポイントですね。

EmotionはReact 18でも問題なく利用できるので、最新のReactアプリケーションでも採用しやすいです。

活用シーンと実務的なポイント

プロダクションレベルの開発では、デザイナーやフロントエンドエンジニアが共同作業を行うケースが多いですよね。 Emotionを使うとコンポーネント単位でスタイルを定義できるため、担当者ごとに領域を切り分けやすくなります。さらに、UI要素の一部をチーム全体で共有する場合にも、スタイルの変数化やテーマ化が役立ちます。

コンポーネント指向のメリット

コンポーネント指向で開発していくと、同じデザインパターンを複数の画面で使うことが多いでしょう。 Emotionは、コンポーネントにスタイル情報を閉じ込められるので、画面同士での依存が少なくなる傾向があります。ある部分のデザインを変更する場合でも、直接そのコンポーネントだけを修正すれば済むケースが増えるため、保守コストを抑えられます。

また、Emotionの中でテーマ設定を行うことで、アプリ全体の色やフォントなどを集中的に管理できます。季節ごとに色味を変えたいEコマースサイトなどで、デザイン変更を一括して反映できるのは便利ではないでしょうか。プロジェクトの規模が拡大しても、同じテーマ設定を基に拡張していけば、デザインを再利用しやすくなります。

動的スタイリングとユースケース

例えば、ユーザーの操作によってボタンの色が変わる場面を考えてみてください。従来のCSSファイルならクラスを切り替える必要がありましたが、Emotionならコンポーネント内のロジックで色をスッと変更できます。また、メディアクエリなどを組み合わせれば、レスポンシブ対応もわかりやすく書けるでしょう。

以下の例は、画面幅に応じて文字サイズを変更するイメージです。画面が狭いときにフォントをやや小さくしたい、というニーズを想定しています。


import React from "react";
import styled from "@emotion/styled";

const ResponsiveText = styled.p`
  font-size: 16px;
  @media (max-width: 600px) {
    font-size: 14px;
  }
`;

function Sample() {
  return (
    <ResponsiveText>
      画面サイズに応じて文字の大きさを変えてみるサンプルです。
    </ResponsiveText>
  );
}

export default Sample;

CSSとJavaScriptが密接に連携しているので、実務でも扱いやすいかもしれません。フロントエンドのUIが複雑化するほど、こういった柔軟性は助かる場面が多くなります。

チームでEmotionを使うときは、コンポーネント名の付け方やフォルダ構成などのルールを共有しておくと、混乱を減らせます。

SSRとCSRにおける考慮点

Reactを使ったアプリケーションでは、クライアントサイドレンダリング（CSR）だけでなく、SSR（サーバーサイドレンダリング）を取り入れるケースも増えています。 SSRを行うフレームワークを使う場合でもEmotionは利用できますが、設定によってはサーバー側でCSSを生成してクライアント側に送る必要があります。このとき、サーバーで生成したCSSを適切に挿入することで、初回表示を少しでも速くしようとする狙いがあるからです。

もしSSRを採用するなら、Emotion専用のSSRサポート機能を使うことを検討するとよいでしょう。たとえば、Next.jsなどのフレームワークと組み合わせる場合は、初期ロード時にSSR済みのCSSを埋め込み、クライアント側ではそのまま再利用するような仕組みを作れます。これにより、ページの一部だけでなく全体的にスタイルが安定した状態で表示されるため、ユーザーが読み込み中のスタイル崩れを感じにくくなります。

また、CSR主体のSPA（Single Page Application）であれば、特別な設定なしでもEmotionを取り入れることができます。クライアント上で生成されたスタイルがそのまま適用されるので、SSRを行わなくても大きな問題は生じにくいです。ただし、大規模なプロジェクトでは、読み込み速度やSEOの観点からSSRを検討するケースもあるかもしれません。 Emotionはその両方に対応できるため、開発チームの方針に合わせて導入する形がおすすめです。

まとめ

ReactとEmotionを組み合わせると、CSS in JSのシンプルさを活かしながら、デザインとロジックを一体化して管理できます。単純な静的サイトだけでなく、動的なUIやレスポンシブにも柔軟に対応しやすいのがメリットです。初心者でも、コンポーネントごとにスタイルを定義すれば構造を把握しやすくなるでしょう。

コンポーネント単位で開発を進めると、画面ごとのデザインの一貫性を保ちやすくなります。また、SSRを活用するプロジェクトでもEmotionは利用できるので、適切な設定を行えばユーザーへの表示速度やSEOにも良い影響が期待できるかもしれません。

最初はCSSファイルとJavaScriptが混ざった形に慣れない部分もあるかもしれません。しかし、それを乗り越えると、スタイルの保守管理が効率的になりやすいと感じることが多いです。皆さんもReactでの開発にEmotionを取り入れてみて、コンポーネントベースのスタイリングがどのように役立つのか体感してみてはいかがでしょうか。