Storybookでコンポーネント駆動開発を始める方法

Web開発

Storybookは、UIコンポーネントを独立した環境で開発・確認できるツールです。デザインシステムの構築・ドキュメント化・ビジュアルテストなど、コンポーネント駆動開発（CDD）に欠かせない選択肢になっています。本記事では、Storybookの始め方と基本的な使い方を解説します。

Storybookとは

Storybookは、コンポーネント単体をアプリ本体から切り離して表示・操作できる開発環境です。React・Vue・Svelte・Angular・Web Componentsなど主要フレームワークすべてに対応します。デザイナーとエンジニアの認識合わせや、UIライブラリの公開ドキュメント化にも使えます。

導入手順

# 既存プロジェクトに追加
npx storybook@latest init

# 起動
npm run storybook

自動でフレームワーク・ビルドツール（Vite/Webpack）を検出し、サンプルストーリーを生成してくれます。

ストーリーの書き方（Reactの例）

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

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  args: { label: 'クリック' },
};
export default meta;

export const Primary: StoryObj<typeof Button> = {
  args: { variant: 'primary' },
};

export const Danger: StoryObj<typeof Button> = {
  args: { variant: 'danger' },
};

主な機能

  • Controls：propsをUIから動的に変更
  • Actions：イベント発火をログ表示
  • Viewport：レスポンシブ表示確認
  • A11y：アクセシビリティ自動チェック
  • Docs：MDX/コメントから自動ドキュメント生成
  • Test Runner：ストーリーを使ったテスト自動化

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

Chromatic（Storybook公式）やPercyと連携することで、コンポーネントの見た目変化を自動検知できます。プルリクごとに変更があった箇所だけレビューできるため、UI回帰の検出が劇的に楽になります。

デプロイ・公開

npm run build-storybook
# storybook-static フォルダができる
# Vercel / Netlify / Chromaticにデプロイ可能

社内デザインシステムのドキュメントサイトとして公開すれば、デザイナーとの共通言語になります。

導入のメリットと注意点

  • UIライブラリ単位の開発がアプリの影響を受けず行える
  • デザイナー・QA・PMとの共通プレビュー環境に
  • ストーリーが増えると保守コストが嵩む（必要な範囲に絞るのが吉）
  • 初期セットアップ後はチームの運用ルールが重要

まとめ

Storybookは、コンポーネント駆動開発の中核ツールです。UI部品を独立して育てる文化を支え、ドキュメント・テストまで一気通貫で扱えます。デザインシステムを作るチーム、複数人で長く運用するプロダクトには特に有効です。