Storybook

Storybook とは

Storybook は、UI コンポーネントをアプリケーションから独立して開発・テスト・ドキュメント化するツールである。各コンポーネントの様々な状態 (Story) をカタログとして一覧でき、デザイナーとの協業やビジュアルリグレッションテストに使われる。

Story の書き方

// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
  tags: ['autodocs'],
};
export default meta;

type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: { variant: 'primary', children: 'Click me' },
};

export const Secondary: Story = {
  args: { variant: 'secondary', children: 'Cancel' },
};

export const Disabled: Story = {
  args: { variant: 'primary', children: 'Submit', disabled: true },
};

export const Loading: Story = {
  args: { variant: 'primary', children: 'Saving...', loading: true },
};

メリット

API やルーティングなしでコンポーネントを独立して開発でき、正常・エラー・ローディング・空状態を一覧で確認できる。Props の自動ドキュメント生成、スクリーンショット比較によるビジュアルテスト、Chromatic を使ったデザイナーとの協業も可能だ。

インタラクションテスト

import { within, userEvent } from '@storybook/test';

export const Submitted: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.type(canvas.getByLabelText('Email'), 'alice@example.com');
    await userEvent.click(canvas.getByRole('button', { name: 'Submit' }));
    await expect(canvas.getByText('送信完了')).toBeInTheDocument();
  },
};

Chromatic (ビジュアルリグレッションテスト)

# GitHub Actions で Chromatic を実行
- uses: chromaui/action@v11
  with:
    projectToken: ${{ secrets.CHROMATIC_TOKEN }}

PR ごとにスクリーンショットを比較し、意図しない UI の変更を検知する。

テストピラミッドでの位置づけ

テスト	ツール	対象
単体テスト	Vitest	ロジック
コンポーネントテスト	Storybook	UI コンポーネント
E2E テスト	Playwright	ユーザーフロー

実務での活用方法は関連書籍にも詳しい。