🧪
React + Storybook + Chromatic + GitHub Actions でUIの見た目を守る！CI付き導入ガイド
Reactの開発で「UIの見た目が意図せず変わった...」という経験、ありませんか？
この記事では、React + Storybook 環境に Chromatic を導入して、見た目の回帰テスト（Visual Regression Testing）をCIで自動化する手順を丁寧に紹介します。
🎯 ゴール
- ReactにStorybookを導入
- Chromaticと連携してUIのスクリーンショットを記録
- GitHub ActionsでPR作成時にUIの差分をチェック！
github
📦 前提環境
- Node.js（18以上を推奨）
- GitHubリポジトリ
- Reactプロジェクトがあること（Vite推奨）
① React + Storybookの準備
まだプロジェクトがない方はこちらから👇
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
Storybookの追加：
npx storybook@latest init
起動確認：
npm run storybook
ブラウザで http://localhost:6006 にアクセスできればOKです！
② Chromaticの導入
まずはChromatic CLIをインストール：
npm install --save-dev chromatic
次に Chromatic公式サイト にアクセスし、GitHub連携でログイン → プロジェクト作成。
プロジェクトトークン（例: abcd1234efgh5678ijkl）が発行されるので控えておきます。
初回デプロイ：
npx chromatic --project-token=あなたのトークン
成功すると、Chromatic上にStorybookがデプロイされ、UIのスナップショットが保存されます。
③ CI（GitHub Actions）との連携
以下のように chromatic.yml ファイルを作成します。
.github/workflows/chromatic.yml
name: 'Chromatic Deployment'
on:
push:
branches:
- main
pull_request:
jobs:
chromatic-deployment:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '18'
- run: npm ci
- run: npm run chromatic
env:
CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
④ Secretsにトークンを登録
GitHubの対象リポジトリの [Settings] → [Secrets and variables] → [Actions] にて、
CHROMATIC_PROJECT_TOKEN
という名前で、Chromaticのトークンを登録します。
⑤ package.json にスクリプトを追加（任意）
"scripts": {
"chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
}
ローカルでも npm run chromatic でデプロイ可能になります。
🧪 これでできること
- PR作成時に 自動でUI差分を検出
- スクリーンショットで差分が明確に
- デザイナーやPMとの ビジュアル共有もラクラク
- UIの見た目を CIで自動テスト
✅ まとめ
| ツール | 用途 |
|---|---|
| Storybook | UIコンポーネントの開発・管理 |
| Chromatic | UIスナップショット保存・VRT（視覚的回帰テスト） |
| GitHub Actions | 自動化による品質保証 |
UIの品質はチーム全体の信頼に直結します。
Chromaticを使って「壊さないUI開発」を、今すぐ始めてみませんか？
Discussion