Claude Codeを使ったAI駆動開発の実践的プラクティス

Transcript

1. Claude Codeを使った AI駆動開発の実践的プラクティス 山口 歩夢 1 2025.12.17 KGDC#12
2. KDDIに入社、 現在は KAG × ベンチャー 自己紹介 2 山口 歩夢 ソフトウェアエンジニア、スクラムマスター 󰝊 ⚔ KDDIアジャイル開発センター AWS-CB(‘24,’25) 🧳 @ayumun_jp
3. 3 引き出しを増やす！ モチベーション
4. 4 自分のClaude Codeの使い方 ・要件定義、設計、実装、テスト、レビュー、仕様調査、バグ調査、壁打ち ・MCP連携で効率化 ・CommandsとAgentsの活用 ・Claude Code Github Actionの活用
5. 5 そもそもClaude Codeってなに？ ターミナルや IDEから指示を与えることで、 コーディングや調査・ツール連携をしてくれる AI開発パートナー ログイン機能作って
6. 紹介すること 6 基本 開発を加速させる 質を高める ・トークン数を節約する ・MCP ・agents/commands ・git worktree ・ルールの定義 ・要件定義 ・レビュー ・良いアウトプット 　出すための考え方
7. 紹介すること 7 基本 開発を加速させる 質を高める ・トークン数を節約する ・MCP ・agents/commands ・git worktree ・ルールの定義 ・要件定義 ・レビュー ・良いアウトプット 　出すための考え方
8. トークン数を節約する 8 Claude Codeはプランごとにトークン数の制限がある 😇 工夫でカバーできる！ １：Serena MCPを使う ２：リフレッシュタイミングを操作する ３：指示の仕方を工夫する
9. トークン数を節約する 9 Claude Codeはプランごとにトークン数の制限がある 😇 工夫でカバーできる！ １：Serena MCPを使う ２：リフレッシュタイミングを操作する ３：指示の仕方を工夫する
10. 10 AIに自然言語で指示するだけで外部ツールや データベースを操作できるようにする仕組み MCPとは？ MCPってなに？ 外部ツール MCPサーバー 10分あれば設定可能！
11. 11 コードを効率的かつ深く理解するための 補助ツール Serenaとは？ Serena MCPを連携してトークン節約 MCPサーバー Serenaなし： Serenaあり： 期待できること ・提案レベルの向上 ・約60〜80%のトークン削減
12. リフレッシュタイミングの操作 ・Claude Codeのトークンリフレッシュは 5hごと 　→使い始めてから5h後にトークンのHPが全回復する ・業務時間から逆算して PCにClaude Codeを起動するcronを仕込む 12 例： 業務時間：9:00-17:30 (昼 12:00 - 13:00)の場合 cronを仕込まない　1回目9:00-14:00、2回目14:00-19:00 cronをAM7:00に仕込む　1回目7:00-12:00、2回目12:00-17:00、3回目17:00-22:30 業務時間内で3回フルHPで使える！
13. 紹介すること 13 基本 開発を加速させる 質を高める ・トークン数を節約する ・MCP ・agents/commands ・git worktree ・ルールの定義 ・要件定義 ・レビュー ・良いアウトプット 　出すための考え方
14. 紹介すること 14 基本 開発を加速させる 質を高める ・トークン数を節約する ・MCP ・agents/commands ・git worktree ・ルールの定義 ・要件定義 ・レビュー ・良いアウトプット 　出すための考え方
15. 15 Claude Code × MCPで開発を効率化 外部ツール MCPサーバー Figma Github Asana Chrome dev tools Playwright Serena Vibe Kanban 　　　 ・ ・ ・MCP連携できるツールはたくさんある（ https://mcp.so/）
16. ・デザインから実装をする際の課題 → AIなしの実装は時間がかかる → 単にClaude Codeに作らせたとしても、デザイン通りになるとは限らない Figma MCPを使って、デザインから実装させる (1/3) 16 MCPサーバー Figma Figma MCPを使って、デザインを ClaudeCodeに参照させる Figmaで指定してる コンポーネントを実装して
17. Figma MCPを使って、デザインから実装させる (2/3) １：デザインだけを見せたバージョン 17 ・ほぼデザイン通り ・手直し箇所は少しある →入力欄 →戻るボタン デザイン 実装
18. Figma MCPを使って、デザインから実装させる (3/3) 18 ２：デザイン + 細かい仕様を伝えたバージョン よりデザインに忠実な 実装になった！ デザイン 実装
19. ある専門領域に閉じた ”専門家”として振る舞うエージェント機能 →コンテキストが独立してるので、他のコンテキストを汚染しない agents(サブエージェント )を使う 19 例1：セキュリティエージェント 　　　→PR前にセキュリティチェック 例2：レビューエージェント 　　　→PRのレビューや要約の実行
20. git worktreeを使って並列開発をする ・複数のブランチを “同時チェックアウト状態 ”で扱える仕組み ・1リポジトリ内で複数の開発作業を “並列”で進めることができ、 　AI駆動開発の高速サイクルを実現 20 worktreeなし feature/AAA feature/BBB BBBブランチで開発するために AAA→BBBに切り替える必要 worktreeあり feature/AAA 同時に複数ブランチに チェックアウトできる feature/BBB feature/CCC
21. 紹介すること 21 基本 開発を加速させる 質を高める ・トークン数を節約する ・MCP ・agents/commands ・git worktree ・ルールの定義 ・要件定義 ・レビュー ・良いアウトプット 　出すための考え方
22. 紹介すること 22 基本 開発を加速させる 質を高める ・トークン数を節約する ・MCP ・agents/commands ・git worktree ・ルールの定義 ・要件定義 ・レビュー ・良いアウトプット 　出すための考え方
23. ルールを定義する Claude Codeに守って欲しい実装のルールや仕様は、ドキュメント化することで実現！ 常にコードとドキュメントは同期しておくことが大切！ 23 ・守るべき設計原則や約束事、禁止事項などを定義 　/CLAUDE.md ・仕様や設計などのドキュメント 　/docs/ 　┗ design 　┗ 仕様書 etc ・分野ごとの実装方針や責務を整理した仕様・設計ガイド 　src/xxx/README.md
24. 要件定義からタスクを実行させる 要件定義は、ClaudeCodeからこちら側にヒアリングさせて過不足をなくしましょう！ 24 要望と詳細条件を伝えて ヒアリングを促す 開発者 Claude Code 要望と詳細条件に沿って ヒアリングを開始する 質問事項に回答する 要件定義書に基づいて タスク分割を依頼する タスクの実行を依頼する 要件定義書を作成す る タスクを分割する タスクを実行する
25. 25 ちなみに、 commandsとかagents使って自動でできます Commands Agents Agents
26. Claude Codeにレビューさせる 26 レビューして ええで 直接呼び出す ・人が気付けないミスや考慮漏れを検知できる！ ・レビュアーの認知負荷を削減できる！
27. 27 ターミナルでレビュー結果をチェック
28. Claude Code Github Actions 28 @claude レビュー頼むうぅ ・Claude CodeとGithub Actionsを連携することで、 AI駆動の自動化を実現 ええでぇ Github Actions 例：GithubのPRからClaudeをメンションするだけでレビューをしてくれる
29. 29 Github上でレビュー結果をチェック
30. 30 良いアウトプットを出すためには？ 質の高いインプットを心がける！ （目的, 制約, 参照, 評価基準） 常にコードとドキュメントの 同期を取る！ 高速試行する！ 試行回数 × フィードバック = 質 エラーは切り分けて考える！ 　→What？ 　　　→Where？ 　　　　　→Scope？ ① ② ③ ④
31. おわりに 本発表の内容は Qiitaに投稿しています！ もっと良いアイデア・活用方法あったら教えてください！ 31 Qiitaの記事にアクセス ☝