生成AIではじめるテスト駆動開発

https://findy-inc.connpass.com/event/369691/

Transcript

1. ⽣成AIではじめる テスト駆動開発 1 2025/11/13 Findy AI Meetup #3 ファインディ株式会社 フロントエンド テックリード 新福 宜侑 @puku0x
3. 3 ⽣成AI 活⽤していますか？
4. 4 ファインディでは昨年から⽣成AI導⼊ https://tech.findy.co.jp/entry/2025/07/23/070000 https://tech.findy.co.jp/entry/2024/12/25/070000 1. ⽣成AIツールの導⼊ 2. カスタムインストラクション等の整備 3. 開発フローのアップデート
5. 5 ⽣成AI 完全に理解した #ai_fukuoka_findy でポストしよう！
7. 7 うまく動かない
8. 8 うまくいかない時あるある • 思ったような出⼒結果が得られない • コード量が多く把握しきれない • 関係の無い箇所が変更される • 動かないコードが出⼒される
9. 9 動かないソフトウェア が⽣まれるのを防ぐ
10. 10 テスト駆動開発（TDD）
11. 11 テスト駆動開発 • 期待される動作をリストアップする • Red-Green-Refactorを繰り返す ◦ Red: テストを⼀つ書いて失敗させる ◦ Green: コードを変更して成功させる ◦ Refactor: コードを整理する https://shop.ohmsha.co.jp/shopdetail/000000004967/
12. 12 ⽣成AI × テスト駆動開発
14. 14 どこから⼿を付ければ...?
15. 15 GitHubコミュニティの知⾒を活かす https://github.com/github/awesome-copilot
16. 16 https://github.com/github/awesome-copilot/tree/main/chatmodes
17. 17 VS Code/GitHub CopilotのChat Mode https://code.visualstudio.com/docs/copilot/customization/custom-chat-modes • AIチャットを特定の機能に特化させる • Claude Codeでいうところの「Sub Agents」
18. 18 内容を⾒てみよう https://github.com/github/awesome-copilot/blob/main/chatmodes/tdd-red.chatmode.md • それっぽい感じのことが書かれてある • GitHub Issueを参照し、最初のテストを書く想定
19. 19 使いやすく⼯夫 • 元のプロンプトはC#⽤なので利⽤⾔語に合わせて差し替え • スラッシュコマンドからの起動にも対応 --- description: 'TDD Red Phase - Write Failing Tests First' mode: 'tdd-red' tools: ['edit', 'search', 'runCommands', 'github/*', 'problems', 'changes', 'testFailure'] --- # TDD Red Phase - Write Failing Tests First Write front end tests using Jest and React Testing Library that describe the desired behavior from GitHub issue requirements before any implementation exists. When finished, prompt the user to enter `/tdd-green` to proceed to the next phase.
20. 20 やってみよう
21. 21 元のコード（Viteのテンプレから抜粋） export function App() { const [count, setCount] = useState(0); return ( <> <button type="button" onClick={() => setCount((count) => count + 1)}>increment</button> <p>count is {count}</p> </> ); }
22. 22 元のテスト（任意） describe('App', () => { it('should increment when increment button is clicked', async () => { const { user } = setup({}); expect(screen.getByText('count is 0')).toBeInTheDocument(); await user.click(screen.getByRole('button', { name: 'increment' })); expect(screen.getByText('count is 1')).toBeInTheDocument(); }); });
23. 23 Issueにリストを書く https://github.com/puku0x/gen-ai-tdd-test/issues/1
24. 24 あとはよろしく！
25. 25 Redフェーズ • テストを⼀つ書いて失敗させる
26. 26 Greenフェーズ • コードを変更して成功させる
27. 27 Refactorフェーズ • コードを整理する
28. 28 よさそう 今回のサンプル https://github.com/puku0x/gen-ai-tdd-test/tree/main/.github/chatmodes
29. 29 ⽣成AI時代のTDD • インクリメンタルな開発⼿法として相性が良さそう • 「動かないソフトウェア」が⽣まれるのを防ぐのに有効
30. 30 OpenAI DevDay 2025 https://www.youtube.com/watch?v=Gr41tYOzE20 • 約7時間のコード⽣成 ◦ ⼈間の指⽰は最⼩限 • 考え⽅はTDDと同じ ◦ 計画を作成 ◦ テストを書く ◦ 実装＆テストを通す ◦ 計画を更新
31. 31 まとめ • TDDの考え⽅が⽣成AIの活⽤に繋がるかも • ⽣成AIでうまくいかない時は開発プロセスの⾒直しを • テストを書く基礎⼒は今後も⼤事 ◦ テストを書きましょう！
32. 32 ⽣成AI時代の新サービスも開発中！ https://findy.co.jp/3146/
33. We’re hiring! https://careers.findy.co.jp/ 33