Storybook v9 の新機能まとめ

こんにちは、Gaji-Labo フロントエンドエンジニアの下條です。
Gaji-Labo では、スタートアップ支援・プロダクトチーム支援の事業の中で、Storybook を利用したコンポーネントの整備やデザインシステムの運用支援を手掛けてきました。

2025 年 6 月、Storybook v9 が latest リリースされました。今回のアップデートでは、テスト機能の拡充やバンドルサイズの削減が盛り込まれています。この記事では Storybook v9 の新機能についていくつか紹介しようと思います。

テスト機能の強化

Storybook v9 の変更点の１つとして、 Vitest と Playwright との統合により、コンポーネントのテストの機能が強化された点が挙げられます。

Storybook v8 では、インタラクションテスト、アクセシビリティテスト、ビジュアルテストはそれぞれ独立したツールとして提供されていました。開発者は各 Story の個別ページへ移動し、手動でテストを実行する必要がありました。
v9 では、これらのテスト機能が統合され、サイドバーのウィジェットの中で一括実行できるようになりました。

Vitest addon による統合テスト環境

Vitest addon の導入により、以下の 3 つのテストを統合的に実施することができます。

• インタラクションテスト
• アクセシビリティテスト
• ビジュアルテスト

これらのテストは、Storybook UI 上、CI での実行 、CLI での実行が可能です。

インタラクションテスト

Story の play 関数の中で、ユーザー操作をシミュレートして機能を検証できます。
通常のテスト環境（Vitest + Testing Library）との最大の違いは、実ブラウザ環境での実行が可能な点です。これにより、JSDom の制約から解放され、より信頼性の高いテスト結果が得られます。

// Page.stories.ts のインタラクションテストの例
export const LoggedIn: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const loginButton = canvas.getByRole("button", { name: /Log in/i });
    await expect(loginButton).toBeInTheDocument();
    await userEvent.click(loginButton);
    await expect(loginButton).not.toBeInTheDocument();
    const logoutButton = canvas.getByRole("button", { name: /Log out/i });
    await expect(logoutButton).toBeInTheDocument();
  },
};

Storybook UI 上で視覚的に実行過程を確認することができます。

インタラクションテストの導入の詳細は公式ドキュメントを参照ください。

また、storybook-addon-test-codegen アドオンを導入することで、コーディングなしでのテスト作成をすることも可能です。
これにより、技術的な詳細を知らないデザイナーや PM でも、実際のユーザーシナリオに基づいたテストケースを作成することが可能になりそうです。

アクセシビリティテスト

axe-core ライブラリをベースにした WCAG 準拠の検証を設定することができます。

// .storybook/preview.ts での設定例
const preview: Preview = {
  parameters: {
    a11y: {
      test: "error",
      config: {
        rules: [
          { id: "region", enabled: false },
          { id: "color-contrast", enabled: true },
          { id: "keyboard-navigation", enabled: true },
        ],
      },
    },
  },
};

export default preview;

こちらのテストも Storybook UI 上で実行が可能で、テスト結果やエラー内容をタブ上で確認することが可能です。

アクセシビリティテストの導入の詳細は公式ドキュメントを参照ください。

ビジュアルテスト

Storybook には VRT（Visual Regression Testing）の機能があります。変更前と後を比較し、ピクセル単位でのUI変更を確認することができる回帰テストです。

Storybook v9 から、Chromaticとの統合により、Storybook の UI 上で差分のハイライト表示を確認し、承認をすることが可能になりました。

UI駆動の開発体験

前章でもいくつか紹介しましたが、Storybook v9では、コードを修正せずに Storybook UI上で直接修正・編集できるものが増えました。

例えば、新しい Story ファイルを作成することが UI 上で可能です。

また、Story の編集についても、既存 Story の引数やプロパティを Controls タブで指定したものに修正することができたり、設定した引数やプロパティの値で新しい Story を作成することも可能です。

これにより、デザイナーやPMがデザインシステムの微調整を直接実施したり、ビジネス要件に基づいてストーリーのバリエーションを追加することが可能になりそうです。

その他

• 軽量化: v9では依存関係構造の抜本的な見直しにより、バンドルサイズが48%削減され、パフォーマンスが向上しました。
• React Native や Vite を使用した Next.js などのフレームワーク の サポートが追加されました。

まとめと所感

Storybook v9 の新機能まとめ

• テスト機能の強化: VitestとPlaywrightとの統合による実ブラウザ環境でのテスト実行が可能になり、一括実行が可能になりました。
• UI駆動の開発体験: Story の作成・編集をUI上で可能になりました。
• パフォーマンス改善: バンドルサイズが48%削減され軽量化されました。
• フレームワークサポート拡張: React Native や Vite ベースの Next.js のサポートが追加されました。

テスト統合により、開発効率の向上していると感じます。テストやストーリー生成を UI 上から実行できることにより、コンポーネント開発のワークフローが改善されたと感じています。

また、別の観点として、Storybook の一般的によく言われる「メンテナンスコストが高い」というデメリットについて、昨今の生成 AI を利用することでデメリットを解消することを期待できると感じています。
生成 AI を利用した開発がスタンダードになりつつある現代において、テストはより必要不可欠なものであるため、Storybook と相性よく活用できるかどうか、引き続き検証していきたいと思います。

Gaji-Labo Culture Deck