Storybook Practical Guide with Claude Code

Storybook開発をClaude Codeで効率化する

StorybookはUIコンポーネントを独立して開発・テスト・ドキュメント化できるツールです。Claude Codeを使えば、ストーリーの作成からインタラクションテストまで効率よく進められます。

ストーリーの作成

Buttonコンポーネントのストーリー

> Buttonコンポーネントの全バリエーションをStorybookに登録して。
> サイズ・カラー・状態の組み合わせを網羅して。

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

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'outline', 'ghost'],
    },
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg'],
    },
    disabled: { control: 'boolean' },
    loading: { control: 'boolean' },
  },
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'ボタン',
  },
};

export const Secondary: Story = {
  args: {
    variant: 'secondary',
    children: 'ボタン',
  },
};

export const AllSizes: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
      <Button size="sm">小</Button>
      <Button size="md">中</Button>
      <Button size="lg">大</Button>
    </div>
  ),
};

export const Loading: Story = {
  args: {
    loading: true,
    children: '送信中...',
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
    children: '無効',
  },
};

インタラクションテスト

ユーザー操作のテスト

> フォームコンポーネントのインタラクションテストを追加して。
> 入力→バリデーション→送信のフローを検証。

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

export const FormSubmission: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    // フォーム入力
    await userEvent.type(
      canvas.getByLabelText('名前'),
      'テストユーザー'
    );
    await userEvent.type(
      canvas.getByLabelText('メールアドレス'),
      '[email protected]'
    );

    // 送信
    await userEvent.click(canvas.getByRole('button', { name: '送信' }));

    // 成功メッセージの確認
    await expect(canvas.getByText('送信が完了しました')).toBeInTheDocument();
  },
};

アクセシビリティチェック

Storybookの @storybook/addon-a11y を活用すると、各コンポーネントのアクセシビリティ問題を自動検出できます。Claude Codeに「a11yアドオンを設定して」と依頼するだけで導入完了です。

ドキュメント自動生成

Storybookの autodocs 機能で、コンポーネントのProps情報やサンプルコードを含むドキュメントを自動生成できます。JSDocコメントを適切に書くと、より詳細なドキュメントが生成されます。

interface ButtonProps {
  /** ボタンのバリエーション */
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
  /** ボタンのサイズ */
  size?: 'sm' | 'md' | 'lg';
  /** 読み込み中の状態 */
  loading?: boolean;
  /** クリック時のコールバック */
  onClick?: () => void;
}

Chromatic連携

ビジュアルリグレッションテストにはChromaticが便利です。Claude Codeに「Chromaticを導入して、PRごとにビジュアルテストを実行する設定をして」と依頼すれば、GitHub Actionsとの統合設定も含めて生成してくれます。

Summary

Claude Codeを使えば、Storybookのストーリー作成からインタラクションテスト、ドキュメント生成まで効率よく進められます。デザインシステム構築やアクセシビリティ対応も合わせて参考にしてください。

Storybookの詳細はStorybook公式ドキュメントを参照してください。