React+ViteでEmotionを導入する方法を解説！

Viteで作成したReactプロジェクトに、強力なCSS-in-JSライブラリであるEmotionを導入し、css propを使って柔軟にスタイリングする方法を徹底解説します。

Emotion とは？

Emotion は、JavaScript内にCSSを記述する「CSS-in-JS」のライブラリです。 パフォーマンスが高く、軽量で、特に css prop を使ったスタイリングが非常に便利です。css prop を使うことで、HTML要素に直接スタイルオブジェクトや文字列を渡す感覚で記述でき、従来の className の管理から解放されます。

インストール

まずは、プロジェクトに必要なパッケージをインストールしましょう。 基本となる @emotion/react をインストールします。

npm install @emotion/react @emotion/styled

Styled Components 記法を使いたい場合は @emotion/styled もインストールします。

npm install @emotion/react @emotion/styled

設定

Vite プロジェクトで Emotion を快適に使うためには、少し設定が必要です。 この設定を行わない場合、css prop を使うファイルごとにファイルの先頭に /** @jsxImportSource @emotion/react */ という「JSXプラグマ」を記述する必要があります。これは非常に手間なので、ビルド設定で自動化してしまいましょう。

vite.config.ts の設定

Vite の設定ファイルで、React プラグインのオプションを変更します。 これにより、ビルド時に自動的に Emotion の JSX 変換が適用されるようになります。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react({
    // 各ファイルで jsxImportSource を指定しなくて済むように設定
    jsxImportSource: '@emotion/react'
  })],
})

tsconfig.json の設定

TypeScript を使用している場合、コンパイラにも「JSX の変換元として Emotion を使う」ことを伝える必要があります。これを設定しないと、css プロパティが存在しないという型エラーが発生する可能性があります。

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
    // ...その他の設定
  },
  // ...
}

使い方

設定が完了したら、実際に Emotion を使ってみましょう。 Emotion には主に「String Styles（文字列などのテンプレートリテラル）」「Object Styles（オブジェクト）」「Styled Components」の3つの書き方があります。

1. css prop (String Styles)

テンプレートリテラルを使って、CSSファイルと同じような感覚でスタイルを記述できます。Sassのようなネスト記法もサポートされています。

import { css } from '@emotion/react'

const style = css`
  color: hotpink;
  background-color: #f0f0f0;
  padding: 32px;
  border-radius: 4px;
  &:hover {
    color: darkorchid;
  }
`

function App() {
  return (
    <div css={style}>
      Hover to change color.
    </div>
  )
}

2. css prop (Object Styles)

オブジェクトとしてスタイルを記述する方法です。 TypeScript との相性が非常に良く、プロパティ名の補完が効くのが最大のメリットです。型安全に開発したい場合はこちらの記法がおすすめです。キャメルケース（backgroundColor など）で記述します。

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

const containerStyle = css({
  backgroundColor: 'aliceblue',
  padding: '24px',
  borderRadius: '8px',
  display: 'flex',
  justifyContent: 'center',
  // ネストもオブジェクトとして記述可能
  '&:hover': {
    backgroundColor: 'lightblue'
  }
})

const textStyle = css({
  fontSize: '20px',
  fontWeight: 'bold',
  color: '#333'
})

function App() {
  return (
    <div css={containerStyle}>
      <p css={textStyle}>
        Object Styles are type-safe!
      </p>
    </div>
  )
}

3. Styled Components

styled-components ライブラリと同じように、スタイル付きのコンポーネントを作成して再利用する方法です。HTMLタグとスタイルがカプセル化されるため、マークアップがセマンティックに保ちやすいです。

import styled from '@emotion/styled'

const Button = styled.button`
  padding: 10px 15px;
  color: turquoise;
  background-color: transparent;
  border: 2px solid turquoise;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background-color: turquoise;
    color: white;
  }
`

function App() {
  return <Button>This is a hotpink button.</Button>
}

まとめ

Vite + React 環境への Emotion の導入は非常に簡単ですが、vite.config.ts と tsconfig.json の設定をしておくことで、開発体験が格段に向上します。 特に Object Styles は TypeScript 環境下で非常に強力ですので、ぜひプロジェクトの要件やチームの好みに合わせて使い分けてみてください。