Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Storybook 駆動開発で実現する持続可能な Vue コンポーネント設計 #vuefes

Avatar for Ryutaro Yako Ryutaro Yako
November 05, 2025
26

Storybook 駆動開発で実現する持続可能な Vue コンポーネント設計 #vuefes

2025年10月25日(土)に開催された「Vue Fes Japan 2025」での発表資料です。

セッションタイトル: Storybook 駆動開発で実現する持続可能な Vue コンポーネント設計
https://vuefes.jp/2025/sponsors/uniquevision#ryutaro-yako

Avatar for Ryutaro Yako

Ryutaro Yako

November 05, 2025
Tweet

Transcript

  1. 自己紹介 Profile 名前: 矢光 隆太郎 所属: ユニークビジョン株式会社 役割: エンジニア Experience

    チーム: 7 名のエンジニアが所属するチーム プロジェクト: 業務系 Web アプリ開発で Storybook 駆動を実践
  2. 今日お話しすること 1. Storybook 駆動開発とは何か 2. なぜ Storybook から始めるのか 3. 1

    年間の実践で得た知見 4. チームでの運用方法 5. まとめと次の一歩
  3. Storybook 駆動開発とは アプローチ Story を先に書いてから実装する開発手法 明確化する内容 コンポーネントの見た目 どんな props を渡すとどんな見た目になるのか

    コンポーネントの振る舞い どんなインタラクションをするとどんな反応をする のか 開発フロー Story で期待値定義 その通りになるように実装
  4. Storybook 駆動ワークフロー 2 ステップアプローチ 設計フェーズ コンポーネント一覧を設計 コンポーザブル一覧を設計 Story を作成 実装フェーズ

    Story に沿って実装とテストを整備 // コンポーネント - 設計時は props だけ定義 defineProps<{ items: CartItem[]; update: (id: string, quantity: number) => void; }>(); // Story - インタラクションも記述 export const CartWithItems: Story = { play: async ({ canvasElement, args }) => { const canvas = within(canvasElement); const button = canvas.getByRole("button", { name: "Add 1" }); await userEvent.click(button); await expect(args.update) .toHaveBeenCalledWith("item-1", 2); }, };
  5. なぜ Storybook から始めるのか 実装忘れと認識ずれを防ぐ 従来のアプローチ 実装 → Story → テスト

    手戻りが後から発覚 Storybook 駆動アプローチ Story でテストケースをコード化 実装忘れや認識ずれが減少 既存の開発フローとの適合 社内でもともと Story 作成が推奨されていたため、前フェーズに移動しても無駄な作業が発生しない 別の仕様書を作るとメンテナンス対象が増加するが、Story なら既存フローに適合
  6. props ファースト設計が促すもの 整理された設計 インターフェイス定義が最初に固まる → 依存関係や責務が整理される 問題の早期発見 Story を書く段階で曖昧な props

    設計や責務の混在に気付きやすい 関心の分離 複雑なコンポーネントでも「表に出す情報」と「裏で処理するロジック」を区別して考えられる
  7. 1 年間の実践で得た知見 新規開発ケーススタディ 理解しやすい開発フロー 先に Story を書く → 開発時に自動テストを通すというフローが分かりやすく、すぐにチームに浸透した 書きやすさの改善

    チーム内に Story 作成の知見があまりなかったが、汎用的なモック作成・ユーティリティ関数整備・お手本 となる書き方の決定により、抵抗感を解消した
  8. それでも残っている課題 テストパターンの漏れ 各パターンを自動テスト化できていると思いきや、確認できていないパターンがあるときに UI バグが発生 Story作成コスト 開発の 1/4 程度の時間を Story

    作成にかけている実績があり、コストは決して軽くない UI がリッチなほど、そのインタラクションを模倣するのに時間がかかる 実装がない状態で Story を書くため、要素の取得方法などを想像で書く必要がある