ストーリー（ストーリー）
UI コンポーネントを個別に開発・確認できる単位。Storybook の中核概念で、各コンポーネントの状態（Props 違い）を独立した「ストーリー」として記述しビジュアル + 動作確認する。
概要
ストーリー（Story）は、Storybook の中核概念で、UI コンポーネントの個別状態を独立した単位として記述したものを指す。1 つのコンポーネント（例: Button）に対し、状態違い（Default / Hover / Disabled / Loading 等）を別々のストーリーとして記述し、コンポーネントカタログとしてブラウザで確認できる。Component-Driven Development の中核ツールで、デザイナー連携・Visual Regression Testing・アクセシビリティテスト・ドキュメント生成を統合する。2026 年現在、Storybook 9 が業界標準、Histoire（Vue 派生）/ Ladle（Vite 高速代替）も台頭している。
主要ツール（2026 年）
| ツール | 形態 | 特徴 |
|---|---|---|
| Storybook 9 | OSS | 業界標準、React / Vue / Angular / Svelte / Solid 全対応 |
| Histoire | OSS | Vue / Vite 系、Storybook 軽量代替 |
| Ladle | OSS | Vite ベース、最速級 |
| Chromatic | SaaS（Storybook 開発元） | $149/月- Visual Regression |
| Storybook Composition | OSS | 複数 Storybook を統合 |
ストーリーの記述例（Component Story Format 3.0）
// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
title: 'Components/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 Disabled: Story = {
args: {
variant: 'primary',
disabled: true,
children: 'Disabled',
},
};
export const Loading: Story = {
args: {
variant: 'primary',
loading: true,
children: 'Loading',
},
};
Storybook 9 の主要機能（2026 年）
- 自動ドキュメント生成: TypeScript 型定義 + JSDoc から自動生成
- Controls Panel: ブラウザで Props 動的変更
- Actions Panel: イベントログ表示
- Viewport: モバイル / タブレット / デスクトップ切替
- Backgrounds: 背景色変更
- Accessibility（a11y）: WCAG 違反チェック
- Interactions: ユーザー操作の自動再生 + テスト
- Visual Tests: Chromatic 統合でデザイン差分検出
- Test Runner: Playwright 統合、E2E 自動化
- Composition: 複数 Storybook（デザインシステム + 製品）統合表示
Component-Driven Development の流れ
1. デザイナー: Figma で UI コンポーネント設計
2. 開発者: ストーリー定義（状態別）
3. 開発者: コンポーネント実装、Storybook で確認
4. デザイナー: Storybook で実装確認 + フィードバック
5. テスター: Visual Regression 自動チェック
6. アプリ統合: コンポーネントを画面で組合せ
Visual Regression Testing（Chromatic）
ストーリー単位でスクリーンショット → デザイン変更時の差分を自動検出。
# .github/workflows/chromatic.yml
- name: Publish to Chromatic
uses: chromaui/action@latest
with:
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
アクセシビリティ（a11y）テスト
@storybook/addon-a11y で WCAG 2.1 AA 準拠を自動チェック。コントラスト比 / キーボード操作 / スクリーンリーダー読み上げ等を検証。
自作.com（jisaku.com）でのストーリー運用
- 総ストーリー数: 100+（Button / Card / Modal / Form 等）
- 設計システム: design-system/ 配下にトークン + コンポーネント
- CI 統合: GitHub Actions で Chromatic 自動デプロイ
- デザイナー連携: Figma → Storybook の双方向確認
PC スペック要件
- Storybook 開発: Ryzen 7 7700X / 16-32 GB RAM
- 大規模設計システム（500+ ストーリー）: Ryzen 9 9950X / 64 GB RAM
- CI/CD（Chromatic 並列）: GitHub Actions runner
主要 Addons
| Addon | 用途 |
|---|---|
| @storybook/addon-essentials | Controls / Actions / Viewport 統合 |
| @storybook/addon-a11y | アクセシビリティチェック |
| @storybook/addon-interactions | ユーザー操作自動化 |
| @storybook/addon-themes | ダーク / ライトモード切替 |
| @storybook/addon-designs | Figma 埋込 |
| @storybook/addon-coverage | テストカバレッジ |
| msw-storybook-addon | API モック |
関連用語との違い
| 用語 | 違い |
|---|---|
| コンポーネント | 実装、ストーリーは表示単位 |
| プレイグラウンド | 自由実験、ストーリーは定義済み |
| Snapshot | テスト結果、ストーリーは入力 |
| デザインシステム | 全体、ストーリーは個別単位 |
よくある質問
Q1: Storybook と Histoire / Ladle、どう選ぶ？ A: 業界標準・機能網羅・OSS コミュニティ最大なら Storybook 9。起動速度重視・Vite 中心なら Ladle。Vue 専門なら Histoire。
Q2: Storybook はオーバーエンジニアリング？ A: 個人プロジェクトでは過剰、3 人以上のチーム or 設計システム必要なら投資価値大。設計と開発の分業 + バージョン管理が圧倒的に楽になる。
Q3: Visual Regression は必要？ A: 大規模 / 長期プロジェクトで必須。CSS リファクタや Tailwind バージョンアップで意図しない見た目変化を検出、Chromatic $149/月の価値あり。
まとめ
- UI コンポーネントの 個別状態を独立記述 する Storybook の単位
- 2026 年は Storybook 9 が業界標準、Histoire / Ladle が代替
- Component-Driven Development + Visual Regression がプロ開発の定番