はじめに

社内で開催したフロントエンド開発勉強会の資料を公開します。

今回のテーマは 「Storybookをテスト仕様として使う」 です。

【資料PDF】Storybookをテスト仕様として使う（2026年3月13日）

Storybook は UI カタログとして使われることが多いですが、play function と @storybook/addon-vitest を活用することで、テスト仕様書としても機能します。 本資料では、操作シナリオの記述方法から CI/CD 連携まで、実践的な活用方法をまとめています。

資料の主な内容

  • Storybook の「UI カタログ」「ドキュメント」「テスト仕様」という3つの役割
  • Story で表現すべき「ユーザーにとって意味のある UI 状態」の考え方 （例：入力前／入力後、処理中／完了、正常／エラー）
  • play function を使ったユーザー操作シナリオと合格条件の記述方法
  • @storybook/addon-vitest によるテストの自動実行と CI 組み込み
  • IDE（VS Code・JetBrains）との連携イメージ
  • Story を1つ書くと「ドキュメント・インタラクションテスト・アクセシビリティ確認・CI 実行」に再利用できる再利用性の高さ

関連記事

本資料と合わせてご覧ください。

① 生成AI時代のフロントエンドテスト戦略：なぜ Storybook 10 + Vitest 4 を選ぶのか 

Storybook と Vitest の組み合わせをテスト戦略として選択した理由と実践内容を解説しています。勉強会資料の続編・発展版として参照ください。

② 生成AI時代のSIerのためのデザインシステム【Figma + Storybook】

Figma と Storybook を組み合わせたデザインシステムの構築事例です。デザイン・開発連携の文脈で Storybook を活用するアプローチを紹介しています。

③ Storybook を導入してみてわかった、開発しやすくするためのプロジェクトの工夫  

Storybook をプロジェクトに導入した際の知見をまとめた記事です。コンポーネント設計の観点から Storybook の活用方法を解説しています。

④ MagicPod とフロントエンドテスト：Testing Trophyに基づく境界設計ガイド 

E2Eテストツール「MagicPod」とコンポーネントテストの使い分けを「Testing Trophy」の考え方に基づいて整理しています。本資料で扱うフロントエンドテスト設計の考え方と合わせてご参照ください。

おわりに

本サイトFintan では、さまざまなコンテンツを公開しております。
ぜひ興味あるコンテンツを探してみてください。