AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例

レバテックLAB「型定義＆インタラクションテストでAIフロントエンド開発のガードレールを整備する」で発表した資料です。
https://levtechlab.connpass.com/event/379346/

Transcript

2. @tonkotsuboy_com 鹿野 壮
3. 1. AIコーディング時代の課題 2. ガードレールという解決策 3. Storybookを用いたガードレールづくり 4. まとめ 本日の構成
4. 01 AIコーディング時代の課題
5. Claude Code定額プラン発表で爆発的な普及 弊社でも各種AIエージェントを導入し、開発速度が向上 2025年はAIコーディングが現場に浸透した
6. 4人エンジニアチームのClaude Code導入後のリリース数推移 AIエージェントにより、開発の速度と量は加速した
7. 大量のコード目視レビューによる人間の疲弊 コンテキスト不足による意図しないバグの発生 AIによる速度と量の向上の弊害
8. AIの速度と共に、質も担保したい。 そのために人間がやるべきことが 「ガードレールづくり」である
9. 02 ガードレールという解決策
10. AIが高速に開発しても、品質を担保するための仕組み テスト CI/CD スキーマ定義 型システム 「ガードレール」とは
11. AIにテストも書かせて効率化 コードレビューでは、まずテストをレビュー テストが通らなければマージできない仕組み テストによるガードレール
12. フロントエンド開発では、UIの見た目や挙動をテストする必要 がある テストコードを見て、そこからUIを想像するのは厳しい TypeScript test("ボタンをクリックするとモーダルが表示される", () => { render(<UserProfile />); fireEvent.click(screen.getByRole("button", { name: "詳細" })); expect(screen.getByRole("dialog")).toBeInTheDocument(); expect(screen.getByText("ユーザー情報")).toBeVisible(); }); フロントエンド開発におけるテストの辛さ
13. Storybookを使い、 見た目を確認しながらテストで品質担保
14. 03 Storybookを用いたガードレールづくり
15. UIコンポーネントを 単体で開発・テスト・ドキュメント化するツール コンポーネントを分離して表示・確認 様々な状態（props）を切り替え可能 チーム間での共有にも活用 Storybookとは
16. ユーザー操作をシミュレートし、結果を検証するテスト 要素が正しく表示されているかを検証 クリック、入力、フォーム送信などをシミュレート 実際のブラウザで確認しながらテストできる Interaction Test
17. AIが書いたコードの品質をテストで担保 見た目を確認しながらテストを書ける テストコードだけでは想像しにくいUIを可視化 なぜStorybookをガードレールに使うか
18. 同じレイアウトの大量のページを作成するチケット 各ページで異なる内容とリンク先がある 目視確認・手動チェックでは必ずミスが出る → Interaction Testで自動検証する 課題: 大量ページのテストは目視では限界
19. 実例: 要素の表示テスト
20. TypeScript export const Default: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); // 見出しの文言が正しく表示されているかを確認 expect(canvas.getByRole("heading", { level: 3 })).toHaveTextContent( "頭痛外来で待たない診察はこちらから", ); }, }; コード例: 見出し文言が正しく表示されているかのテスト
21. プレビューと成功テスト結果を同時に見る
22. プレビューと失敗テスト結果を同時に見る
23. TypeScript await expect( canvas.getByText(/頭痛外来で処方できるお薬の例/) ).toBeVisible(); TypeScript await expect( canvas.getByText(/生活習慣病外来で処方できるお薬の例/) ).toBeVisible(); TypeScript await expect( canvas.getByText(/皮膚科で処方できるお薬の例/) ).toBeVisible(); ページを量産しつつ、storybookで見出し文言のテスト
24. TypeScript expect( canvas.getByRole("link", { name: "ズキンズキンと痛む" }) ).toHaveAttribute( "href", "/telemedicine/headache" ); TypeScript expect( canvas.getByRole("link", { name: "生活習慣病外来" }) ).toHaveAttribute( "href", "/telemedicine/lifestyle" ); ページを量産しつつ、storybookでリンク先のテスト
25. 実例: モックの活用
26. 自分で作ったモジュールやライブラリをモック化できる テストに応じて振る舞いを変えられる 日付取得フックをモックして、常に固定日付でテスト ルーターをモックして、実際にページ遷移せずにテスト カスタムフックをモックして、正常系・エラー系を自由に再現 モジュールのモック https://storybook.js.org/docs/writing-stories/mocking-data-and-modules/mocking-modules
27. TypeScript import type { Preview } from "@storybook/react"; import { sb } from "storybook/test"; sb.mock(import("../hooks/useReceptionVerificationCode")); sb.mock(import("../hooks/useCurrentDate")); sb.mock(import("next/navigation")); const preview: Preview = {}; export default preview; preview.tsでモジュールをモック対象に設定
28. APIから受付コードを取得するカスタムフックをモック 受付コードが必ず「'123456' 」を返すように TypeScript export const Default: Story = { beforeEach() { mocked(useReceptionVerificationCode).mockReturnValue({ receptionVerificationCode: "123456", errors: [], }); }, }; 例: 受付確認コードを正常に取得できた状態をモック
29. APIがエラーを返すようにする TypeScript export const WithError: Story = { beforeEach() { mocked(useReceptionVerificationCode).mockReturnValue({ receptionVerificationCode: "", errors: ["受付番号が見つかりませんでした。"], }); }, }; 例: エラー状態をモック
30. v9まではNode.jsのSubpath importsを使っていた（コード参照） v10からautomockでラクになった JSON { "imports": { "#hooks/useReceptionVerificationCode": { "storybook": "./src/hooks/useReceptionVerificationCode.mock.ts", "default": "./src/hooks/useReceptionVerificationCode.ts" } } } Storybook 10からモックの方法がラクになった
31. Storybookの実践的な活用
32. PRごとにGitHub PagesでStorybookを発行 エンジニア・デザイナー・関係者が最新UIを確認可能 1. PRごとにStorybookを閲覧できるようにする https://zenn.dev/ubie_dev/articles/8c34b08626aa88
33. Vitest AddonでStoryファイルをそのままテスト実行 以前はcomposeStories で別途テストファイルを作成 play関数で定義したテストをCIで自動実行し品質担保 2. CIでInteraction Testを実行する
36. Storybookを完璧に育てようとしない テストのために必要な分だけ書く メンテナンスが面倒なら捨てる 「今のテスト」に集中することでメンテナンスコストを削減 3. Storybookを育てずに使い捨てる
37. Agent Skillを使って、プロジェクトのパターンに沿ったStoryを 自動生成 とくにモック周りは新しく、ちゃんとAIエージェントに教える必 要がある 手動で書くより高速で、書き方も統一される AIにパターンを覚えさせることで、品質の高いStoryを量産 4. Agent Skillで自動生成
38. 導入結果
39. 1日50ページを高速作成、レイアウト崩れやリンクミスをゼロに React Nativeでログイン状態・課金状態による複雑なコンポーネ ントを高速開発 管理画面のクリティカルな操作をテストしながら開発 実績
40. Storybookのインタラクションテストはあくまで一例 5,000件の顧客情報をスプシからDBに移行するプロジェクト スプシ関数を使って移行SQLをスプシ上に構築 移行後、スプシのデータとDBのデータを比較するスプシ関数 を作成 1週間で5,000件のデータを移行し、移行ミスもなかった ガードレールを作る仕組みはいろいろある
41. 04 まとめ
42. AIの速度は無限に早くなった 人間がやるべきは「ガードレールづくり」 Storybookで品質を担保する仕組みを構築 まとめ
43. AIに無限の速度を出してもらうために 人間はガードレールを作ろう
44. XでもフロントエンドとAI情報を発信しています @tonkotsuboy_com