StorybookによるコンポーネントライブラリをClaudeと整備する

UIコンポーネントライブラリの整備は地道な作業です。Storiesを一つひとつ書き、ドキュメントを充実させ、ビジュアルテストを維持する——これをClaude Codeと組み合わせることで、大幅に効率化できます。

StoriesファイルをClaudeに自動生成させる

まずはコンポーネントのStoriesを生成してみましょう。たとえばButtonコンポーネントに対して、Claude Codeのチャットで次のように依頼します。

以下のButtonコンポーネントを読み込んで、
Primary / Secondary / Disabled / Loading の4バリアントをカバーする
Storybook 8のCSF3形式のStoriesファイルを生成してください。
src/components/Button.tsx

Claude Codeはコンポーネントの型定義やpropsを読み取り、Button.stories.tsxを生成してくれます。手書きだと見落としがちなエッジケース（disabled状態やisLoadingの組み合わせなど）も漏れなく網羅してもらえます。

ArgTypesとドキュメントをまとめて整備する

Storybookの強みはドキュメントとしての側面です。Claude Codeに次のように指示しましょう。

# 既存のStoriesファイルを対象にドキュメントを強化する
claude "src/components/**/*.stories.tsx を読み込み、
ArgTypesのdescriptionとdefaultValueが不足しているものをすべて補完してください。
MDXではなくCSF3のmeta.argTypesとして出力してください。"

これにより、Storybook上のControlsパネルが充実し、デザイナーや他の開発者がpropsの意味をすぐ把握できるようになります。コンポーネント数が多いプロジェクトでは、この作業だけで数時間の節約になります。

Tip

Claude Codeにまとめて依頼するときは、対象ファイルのglobパターンを明示すると精度が上がります。src/components/**/*.stories.tsxのように範囲を絞り込みましょう。

ビジュアルテスト用のplay関数を追加する

Storybook 7以降はInteraction Testとしてplay関数でユーザー操作をシミュレートできます。Claude Codeに次のように依頼してみてください。

// Claudeに追加させるplay関数の例（Modal.stories.tsx）
export const OpenAndClose: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.click(canvas.getByRole('button', { name: '開く' }));
    await expect(canvas.getByRole('dialog')).toBeVisible();
    await userEvent.click(canvas.getByRole('button', { name: '閉じる' }));
    await expect(canvas.queryByRole('dialog')).not.toBeInTheDocument();
  },
};

「このModalコンポーネントに、開閉の操作を検証するplay関数を追加してください」と依頼するだけで、上記のようなインタラクションテストを生成してくれます。Chromatic連携と組み合わせれば、ビジュアルリグレッションの防止にも直結します。

Claude Codeをストーリー設計からテストまでの一連のフローに組み込むことで、コンポーネントライブラリの品質を継続的に高められます。まずは既存コンポーネント1つからお試しください。