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

by puku0x

Slide 1

Slide 1 text

⽣成AIではじめるテスト駆動開発 1 2025/11/13 Findy AI Meetup #3 ファインディ株式会社フロントエンドテックリード新福宜侑 @puku0x

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

3 ⽣成AI 活⽤していますか？

Slide 4

Slide 4 text

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. 開発フローのアップデート

Slide 5

Slide 5 text

5 ⽣成AI 完全に理解した #ai_fukuoka_findy でポストしよう！

Slide 6

Slide 6 text

Slide 7

Slide 7 text

7 うまく動かない

Slide 8

Slide 8 text

8 うまくいかない時あるある ● 思ったような出⼒結果が得られない ● コード量が多く把握しきれない ● 関係の無い箇所が変更される ● 動かないコードが出⼒される

Slide 9

Slide 9 text

9 動かないソフトウェアが⽣まれるのを防ぐ

Slide 10

Slide 10 text

10 テスト駆動開発（TDD）

Slide 11

Slide 11 text

11 テスト駆動開発 ● 期待される動作をリストアップする ● Red-Green-Refactorを繰り返す ○ Red: テストを⼀つ書いて失敗させる ○ Green: コードを変更して成功させる ○ Refactor: コードを整理する https://shop.ohmsha.co.jp/shopdetail/000000004967/

Slide 12

Slide 12 text

12 ⽣成AI × テスト駆動開発

Slide 13

Slide 13 text

Slide 14

Slide 14 text

14 どこから⼿を付ければ...?

Slide 15

Slide 15 text

15 GitHubコミュニティの知⾒を活かす https://github.com/github/awesome-copilot

Slide 16

Slide 16 text

16 https://github.com/github/awesome-copilot/tree/main/chatmodes

Slide 17

Slide 17 text

17 VS Code/GitHub CopilotのChat Mode https://code.visualstudio.com/docs/copilot/customization/custom-chat-modes ● AIチャットを特定の機能に特化させる ● Claude Codeでいうところの「Sub Agents」

Slide 18

Slide 18 text

18 内容を⾒てみよう https://github.com/github/awesome-copilot/blob/main/chatmodes/tdd-red.chatmode.md ● それっぽい感じのことが書かれてある ● GitHub Issueを参照し、最初のテストを書く想定

Slide 19

Slide 19 text

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 ﬁnished, prompt the user to enter `/tdd-green` to proceed to the next phase.

Slide 20

Slide 20 text

20 やってみよう

Slide 21

Slide 21 text

21 元のコード（Viteのテンプレから抜粋） export function App() { const [count, setCount] = useState(0); return ( <> setCount((count) => count + 1)}>increment

count is {count}

); }

Slide 22

Slide 22 text

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(); }); });

Slide 23

Slide 23 text

23 Issueにリストを書く https://github.com/puku0x/gen-ai-tdd-test/issues/1

Slide 24

Slide 24 text

24 あとはよろしく！

Slide 25

Slide 25 text

25 Redフェーズ ● テストを⼀つ書いて失敗させる

Slide 26

Slide 26 text

26 Greenフェーズ ● コードを変更して成功させる

Slide 27

Slide 27 text

27 Refactorフェーズ ● コードを整理する

Slide 28

Slide 28 text

28 よさそう今回のサンプル https://github.com/puku0x/gen-ai-tdd-test/tree/main/.github/chatmodes

Slide 29

Slide 29 text

29 ⽣成AI時代のTDD ● インクリメンタルな開発⼿法として相性が良さそう ● 「動かないソフトウェア」が⽣まれるのを防ぐのに有効

Slide 30

Slide 30 text

30 OpenAI DevDay 2025 https://www.youtube.com/watch?v=Gr41tYOzE20 ● 約7時間のコード⽣成 ○ ⼈間の指⽰は最⼩限 ● 考え⽅はTDDと同じ ○ 計画を作成 ○ テストを書く ○ 実装＆テストを通す ○ 計画を更新

Slide 31

Slide 31 text

31 まとめ ● TDDの考え⽅が⽣成AIの活⽤に繋がるかも ● ⽣成AIでうまくいかない時は開発プロセスの⾒直しを ● テストを書く基礎⼒は今後も⼤事 ○ テストを書きましょう！