kiroとCodexで最高のSpec駆動開発を！！数時間で web3ネイティブなミニゲームを作ってみたよ！

10月14日に開催されたAI駆動開発勉強会【Codex Meetup Japan #1】の登壇資料です！！！

https://aid.connpass.com/event/369420/

https://github.com/mashharuki/PizzaDaoMiniHackathon

https://zenn.dev/mashharuki/articles/web3_ai_vibecoding

Transcript

1. 最高のSpec 駆動開発環境を 〜Kiro × CodeX 〜
2. Who are you? 名前: Haruki (OSS Developer) Web3 エンジニアコミュニティを運営してます！ ETH Tokyo などのハッカソンに出場してます！ Toban の X @haruki_web3 UNCHAIN の X 自分 の X
3. 今日のゴール Kiro とCodeX を使って実践した Spec 駆動開発で得た学びを共有すること
4. こんなことありませんか？ ・的外れな実装された... ・修正が増えて結局作り直すことに... ・動くけど保守性が...
5. 何をしたら防げる？？
6. 最高のSpec 駆動開発環境を整えよう！
7. Spec 駆動開発の全体像 Step 1 Step 2 Step 3 ・ゴール設定 ・情報収集 ・コンテキスト準備 ・要件定義書作成 ・仕様書生成 ・タスクリスト作成 👤が主役 🤖と👤が協調 ・タスクを実行 ・コードレビュー ・都度修正 🤖と👤が協調
8. 必要なこと ・プロンプトエンジニアリング ・コンテキストエンジニアリング ・MCP 等の設定のチューニング ・要件定義書、設計書、タスクリストの作成 ・テンプレートプロジェクトの用意
9. 必要なこと ・コンテキストエンジニアリング 背景情報を丁寧に まとめました！
10. 必要なこと ・MCP 等の設定のチューニング 便利なMCP はぜひ 設定しよう！！！！
11. 必要なこと ・要件定義書、設計書、タスクリストの作成 Kiro の機能を 活用して生成！！
12. 必要なこと ・テンプレートプロジェクトの用意 ⇨ 新しめのライブラリ 技術を使う時に有効！ 事前に最低限の機能を 実装したものを用意
13. いざ実践！ 9 月12 日〜15 日に渋谷で開催された ETH Tokyo のサイドトラックの ミニハッカソンにチャレンジ！ お題：ピザに関するもの 時間：数時間
14. ピザ🍕をテーマにした Web3 ミニゲームを作ろう！
15. いざ実践！ ・Farcaster やMiniAppKit に関する情報収集 ・テンプレートプロジェクトの用意 ・Steering ファイルやAGENTS.md の準備 ・MCP の設定 ・要件定義書、設計書、タスクリストの作成
16. いざ実践！ ・テンプレートプロジェクトの用意 　template フォルダにコード一式を格納 　それをベースに実装するように指示！
17. いざ実践！ ・Steering ファイルやAGENTS.md の準備 ・全体的な方針 ・コーディング規則 ・プロジェクト構成 ・技術スタック
18. いざ実践！ ・Steering ファイルに記載したもの product.md structure.md tech.md ・開発哲学 ・ファイル命名規約 ・コーディング規約 ・README 要件 ・品質基準 ・開発プロセス　等 ・プロジェクト構造 ・構造規約 ・技術スタック 　・開発ツール 　・フレームワーク 　・ライブラリ 　・言語 　・CI/CD
19. いざ実践！ ・AGENTS.md ファイルに記載したもの ・Kiro で作成した要件定義書を読み込む設定 ・コーディング規約 ・パッケージマネージャー ・Formatter & linter ・プロジェクト構造 ・技術スタック ・README 要件
20. いざ実践！ ・MCP の設定 ・serena ・context7 ・sequential-thinking ・OpenZeppelin ・GitHub
21. いざ実践！ ・要件定義書、設計書、タスクリストの作成
22. 結果は... ？？
23. ほぼイメージした通りにできた！
26. 実践して感じたこと
27. これから必要なマインドセット ・継続してインプットする環境を整える ・とにかく手を動かす ・便利なツールを使って調査効率up ・プロジェクトマネジメントの勉強もする
28. これから必要なマインドセット ・継続してインプットできる環境を整える ...etc
29. これから必要なマインドセット ・とにかく手を動かす 　 　- 実際に触れてわかることが沢山あります！ 　- 良いテンプレを作るのにこの過程は必須
30. これから必要なマインドセット ・便利なツールを使って調査効率up
31. これから必要なマインドセット ・プロジェクトマネジメントの勉強も必要 ゴール設定 タスクの洗い出し タスク管理
32. ( 参考)GitHub のZenn の記事 GitHub Zenn
33. THANK YOU!
34. 補足資料
35. 技術スタック Web3 Web2 ・AI Hardhat Solidity OpenZeppelin Farcaster SDK OnChainKit MiniAppKit Base Sepolia viem 、wagmi Kiro CodeX MCP Next.js TypeScript Tailwind CSS Shadcn/ui prettier
36. プロジェクト構造の指定