AIハッカソンで1人雰囲気SDDをした学びの共有

Transcript

1. AIハッカソンで 1人雰囲気SDDをした学びの共有 2025/12/17
2. yoko Twitter： @_cityside 名前： Naoki Yokomachi / 横町 直樹 所属： KDDIアジャイル開発センター株式会社 ロール： ソフトウェアエンジニア 好きなAWSサービス： AWS Lambda 出身： 青森県八戸市 好きなコーディングエージェント： Claude Code
3. yoko Twitter： @_cityside Zennも書いています
4. yoko Twitter： @_cityside 触ったことあるもの コーディングエージェント： GitHub Copilot, Claude Code, Codex, Kiro, Antigravity, Cursor, Windsurf V0, Bolt.new, Lovable MCP： GitHub, AWS Documentation, Serena, PlayWright, Context7, Atlassain LLM App： Claude, ChatGPT, Gemini, NotebookLLM, Perplexty, Consensus エージェントフレームワーク： LangGraph, Mastra, Strands Agents インフラ： AWS Bedrock, Bedrock AgentCore
5. Agenda KAG AIハッカソン Spec-Driven Development つくったもの 学び
6. 2025年8月、K AG社 内ハッ カ ソンが 開 催 ・個人／チーム混合 ・1人あたり10時間 ・成果物はプロダク ト／エ レ ベータ ピ ッ チ資 料 ／紹 介 動画 KAG AIハッカソン KAG AIハッカソン AI駆動開発であるこ と AIを組み込んだ成果 物 で あるこ と
7. Spec-Dr ive n Dev elo pm ent （ 仕様 駆 動 開 発） Not Vi be-Codi ng 最初に仕様（Speci fi cati on）を詳細に定義・文書化し、 AIがそれらを具体化するように実装する開発手法 ある意味ではこれまでの開発手法と大きく変わらない 言葉の定義の前に実践していた人も多いのでは 観測範囲ではKi roが初出 Gi tHubのSpec-ki tで周知された印象 Specの作成 Specの作成
8. 雰囲気SDD をやっ ていき ま す ※ ハ ッ カ ソ ン 直 後 、 G it H u b の S pe c -K i t や O S S の cc - sd d が リ リ ー ス さ れ る Specの作成 Specの作成
9. Claudeア プリ とや りと りし つつ M VPを 決 定 す る ・やらかしを共有す る匿名 SN S ・投稿機能 ・タイムライン機能 ・URL共 有 ・画像共有 ・カテゴリ分け ・センシティブ投稿 の 検 知 MVPの定義 MVPの定義
10. Claudeア プリ とや りと りし つつ M VPを 決 定 す る ・やらかしを共有す る匿名 SN S ・投稿機能 ・タイムライン機能 ・URL共 有 ・画像共有 ・カテゴリ分け ・センシティブ投稿 の 検 知 ここがAI使えそう MVPの定義 MVPの定義
11. 以下の内容をM ark d ow nフ ァイル に 整 理 ・プロダクトの概要 ・実装フロー ・MVP ・余裕があれば実装 す るもの ・技術スタック ・成果物の提出方法 Specの作成 Specの作成
12. 技術要素 技術要素 アプリ使用技術スタック フロントエンド Next.j s Tai l wi nd CSS TypeScri pt インフラ・バックエンド AWS Ampl i fy Gen2 AWS AppSync Amazon DynamoDB エージェントフレームワーク Mastra LLM Cl aude Sonnet 4 コーディング Cl aude Code(Sonnet 4) ツール/MCP Ge mi ni CLI Serena MCP Pl ayWri ght MCP エレベーターピッチ作成 Marp 動画作成 Ki te 開発ツール
13. AI駆動開発ツール AI駆動開発ツール ・ C l a u d e C o d e 　 A n t h r o p i c 公 開 の コ ー デ ィ ン グ エ ー ジ ェ ン ト 　 2 0 2 5 年 2 月 プ レ リ リ ー ス 　 2 0 2 5 年 5 月 公 式 V S Co de 拡 張 リ リ ー ス 、 Cl a ud e C ode A ct ion リ リ ー ス 　 2 0 2 5 年 1 0 月 W e b 版 リ リ ー ス ・ G e m i n i C L I 　 G o o g l e G e m in iの C L I エ ー ジ ェ ン ト 　 今 回 は 検 索 ツ ー ル と し て C l a ud e Co d eに 使 わ せ る ・ S e r e n a M C P 　 コ ン テ キ ス ト 管 理 M CP 　 コ ー ド ベ ー ス の 検 索 、 コ ン テ キ ス ト の 圧 縮 ・ 管 理 を し 、 効 率 的 な コ ー デ ィ ン グ を 補 助 ・ P l a y W r i g h t M C P 　 ブ ラ ウ ザ 操 作 M CP 　 レ ン ダ リ ン グ 結 果 を 画 像 と し て エ ー ジ ェ ン ト の コ ン テ キ ス ト に 読 み 込 ま せ 、 　 U I の 修 正 ・ テ ス ト を 補 助
14. 開発フロー 開発フロー ０ ． S p e c を コ ン テ キ ス ト に 取 り 込 む 　 C l a u d e C o d e に S p e c フ ァ イ ル を 読 み 込 む よ う 指 示 　 同 時 に S e r e n a M CP を 使 用 し て オ ン ボ ー デ ィ ン グ を 指 示 １ ． A W S A m p l i f y の 初 期 構 築 　 A m p l i f y C L I（ N ex t . js ） を C la ud e Co d eに 実 行 さ せ て デ ィレ ク ト リ の 作 成 、 　 ラ イ ブ ラ リ の イ ン ス ト ー ル 、 N ex t . js ア プ リ ケ ー シ ョ ン の 初 期 化 ２ ． フ ロ ン ト エ ン ド の 構 築 　 C l a u d e C o d e で フ ロ ン ト エ ン ド を 実 装 。 適 宜 P l a y W rig h t M C Pで U Iの 調 整 　 エ ー ジ ェ ン ト が 動 い て い る 間 に ロ ゴ や ア イ コ ン な ど を 手 動 で 作 成 し た り ダ ウ ン ロ ー ド し て く る ３ ． バ ッ ク エ ン ド の 実 装 　 C l a u d e C o d e を 使 用 し て 、 A P Iは A m p lif y の C DK 、 エ ー ジ ェ ン ト は M a st r a で 実 装 　 ・ 投 稿 内 容 の 保 存 ・ 取 得 A P I 　 ・ 投 稿 内 容 を 審 査 す る A I エ ー ジ ェ ン ト 　 ・ 投 稿 を カ テ ゴ リ 分 け す る A I エ ー ジ ェ ン ト ４ ． ピ ッ チ 資 料 、 動 画 の 作 成 　 M a r p の コ ー ド を C l a ud e C o de に 書 か せ て ス ラ イ ド を 作 成 　 K i t e を 使 用 し て 画 面 キ ャ プ チ ャ を も と に 動 画 作 成
15. やらかし共有SN S「F ailN e t」 ・匿名SNS ・ワンクリックでU RL 、 画像を 共 有 ・ 投稿はAIが自動でカ テ ゴリ分 け ・ 非倫理的な投稿はAIが 修 正案を 提 示 つくったもの つくったもの
16. つくったもの つくったもの
17. つくったもの つくったもの
18. エレベーターピッチ エレベーターピッチ
19. 紹介動画 紹介動画
20. 構成図 構成図
21. 2時間：最初手動でAmplifyの環境構築しようとして謎にハマる １ ． A W S A m p l i f y の 初 期 構 築 （ A I ） 　 A m p l i f y C L I（ N ex t . js ） を C la ud e Co d eに 実 行 さ せ て デ ィレ ク ト リ の 作 成 、 　 ラ イ ブ ラ リ の イ ン ス ト ー ル 、 N ex t . js ア プ リ ケ ー シ ョ ン の 初 期 化 ２ ． フ ロ ン ト エ ン ド の 構 築 （ A I ） 　 C l a u d e C o d e で フ ロ ン ト エ ン ド を 実 装 。 適 宜 P l a y W rig h t M C Pで U Iの 調 整 　 エ ー ジ ェ ン ト が 動 い て い る 間 に ロ ゴ や ア イ コ ン な ど を 手 動 で 作 成 し た り ダ ウ ン ロ ー ド し て く る ３ ． バ ッ ク エ ン ド の 実 装 （ A I ） 　 以 下 を C l a u d e C o d e で 実 装 　 A P I は A m p l i f y の C D K 、 エ ー ジ ェ ン ト は M a s t r a で 実 装 　 ・ 投 稿 内 容 の 保 存 ・ 取 得 A P I 　 ・ 投 稿 内 容 を 審 査 す る A I エ ー ジ ェ ン ト 　 ・ 投 稿 を カ テ ゴ リ 分 け す る A I エ ー ジ ェ ン ト ４ ． ピ ッ チ 資 料 の 作 成 （ A I ） 　 M a r p の コ ー ド を C l a ud e C o de に 書 か せ て ス ラ イ ド を 作 成 ５ ． 動 画 作 成 （ ツ ー ル ） 　 K i t e を 使 用 し て 画 面 キ ャ プ チ ャ を も と に 動 画 作 成 3時間：ほんとのベース自体はかなり早めにできる。ダークモードや、投 稿の画像化など、細かい機能を作りこもうとして長くなる 3時間：API、エージェントはめちゃくちゃ早く実装できた。DBの設計 に修正が入ったため、既存コードの修正で時間がかかった。 30分：ベースは実装方針として実装時にAIに読ませたMarkdown を使用。AIで生成後はほぼ修正なし 30分：キャプチャや音声録音などを含めて 開発フロー 開発フロー
23. 1 . 最初のSpecのレビューが足りていない 2 . AI駆動開発でもリーダブルコードは大事 3 . SDD×アジャイルはまだ五里霧中 学び 学び
24. 1 . 最初のSpecのレビューが足りていない 2 . AI駆動開発でもリーダブルコードは大事 3 . SDD×アジャイルはまだ五里霧中 学び 学び
25. 勝 っ た わ 😏
26. 勝 っ た わ 😏 ※負けました ※ そ も そ も 勝 敗 は な い
27. なぜ・・・ なぜ・・・ 優しさに溢れたフィ ードバ ッ ク
28. なぜ・・・ なぜ・・・ 優しさに溢れたフィ ードバ ッ ク 🤔 で も A I の 話 が 全 然 な い
29. 非倫理的な投稿じゃないとAIが表に出てこない なぜ・・・ なぜ・・・
30. 地味すぎる 敗因 敗因
31. Claudeア プリ とや りと りし つつ M VPを 決 定 す る ・やらかしを共有す る匿名 SN S ・投稿機能 ・タイムライン機能 ・URL共 有 ・画像共有 ・カテゴリ分け ・センシティブ投稿 の 検 知 この時点でＭＶＰのレビュー や 完成物への想像力が足りて いな かった MVPの定義 MVPの定義
32. 1 . 最初のSpecのレビューが足りていない 2 . AI駆動開発でもリーダブルコードは大事 3 . SDD×アジャイルはまだ五里霧中 学び 学び
33. リーダブルコード 人 が 読 み や す い コ ー ド は 人 が 直 し や す い → 人 が 読 み や す い コ ー ド は A I も 読 み や す い 　 → A I が 読 み や す い コ ー ド は A I が 直 し や す い 　 　 → コ ン テ キ ス ト が 抑 え ら れ る 　 　 → ト ー ク ン 消 費 も 節 約 で き る → 人 が 読 み や す い コ ー ド は A I に 直 さ せ や す い 学び 学び
34. 人が読みやすいコード 例）関数・変数名が自明 学び 学び 「 投 稿 情 報 の カ テ ゴ リ プ ロ パ テ ィ の 持 ち 方 を 変 え た か ら 、 カ テ ゴ リ を 更 新 す る 関 数 も 更 新 し て お い て 」 「 カ テ ゴ リ の デ ー タ っ て p o s t . ca t eg or y か 。 カ テ ゴ リ 更 新 関 数 は u p d a t eP o s t C a t eg o ry ( )っ て 関 数 が あ る か ら そ れ の こ と か な 、 O K ！ 」
35. 人が読みやすいコード 例）関数・変数名が自明 学び 学び 「 投 稿 情 報 の カ テ ゴ リ プ ロ パ テ ィ の 持 ち 方 を 変 え た か ら 、 カ テ ゴ リ を 更 新 す る 関 数 も 更 新 し て お い て 」 「 カ テ ゴ リ の デ ー タ っ て p o s t . ca t eg or y か 。 カ テ ゴ リ 更 新 関 数 は u p d a t eP o s t C a t eg o ry ( )っ て 関 数 が あ る か ら そ れ の こ と か な 、 O K ！ 」 コ ー ド そ の も の に 説 明 性 が あ る か ら 、 指 示 に 説 明 が 不 要
36. 人が読みにくいコード 例）関数・変数名がわかりづらい 学び 学び 「 p o s t . h o g e っ て い う 投 稿 情 報 の カ テ ゴ リ を 保 持 す る プ ロ パ テ ィ が あ っ て 、 そ の 構 成 を 変 え た か ら 、 投 稿 情 報 の カ テ ゴ リ を 編 集 す る f o ob a r ()っ て い う 関 数 を 更 新 し て お い て 」 「OK」
37. 人が読みにくいコード 例）関数・変数名がわかりづらい 学び 学び 「OK」 コ ー ド に 説 明 性 が な い か ら 何 が ど う い う コ ー ド か を 指 示 に 含 め な き ゃ い け な い 。 ＆ そ の た め に 読 み 解 く 時 間 が 増 え る 「 p o s t . h o g e っ て い う 投 稿 情 報 の カ テ ゴ リ を 保 持 す る プ ロ パ テ ィ が あ っ て 、 そ の 構 成 を 変 え た か ら 、 投 稿 情 報 の カ テ ゴ リ を 編 集 す る f o ob a r ()っ て い う 関 数 を 更 新 し て お い て 」
38. 1 . 最初のSpecのレビューが足りていない 2 . AI駆動開発でもリーダブルコードは大事 3 . SDD×アジャイルはまだ五里霧中 学び 学び
39. SDD×アジャイル S D D は 最 初 に S p e c （ 仕 様 ） を 決 め る 性 質 上 、 ウ ォ ー タ ー フ ォ ー ル 的 な 考 え が な じ む 逆 に ア ジ ャ イ ル 的 な 、 開 発 し な が ら 変 え て い く 開 発 フ ロ ー の 場 合 に ど う 導 入 し て い く か に は ま だ 課 題 を 感 じ る 学び 学び
40. SDDの課題① ド キ ュ メ ン ト を ど う 追 従 さ せ て い く か ・ 段 階 的 に 追 加 さ れ る M V P ・ 日 々 状 況 が 変 わ る P B I を ど う S p e c に 反 映 さ せ る か ・ リ フ ァ ク タ リ ン グ ・ 設 計 変 更 に よ る コ ー ド 変 更 を ど う コ ン テ キ ス ト に 載 せ る か 学び 学び M V P は チ ー ム で 共 有 す る と し て 、 P B I は メ ン バ ー 個 別 に S p e c を 作 る ？ 終 わ っ た P B I を S p e c に 残 す 必 要 は ？ ペ ア プ ロ の と き と か ど う す る ？
41. SDDの課題② チ ー ム 内 で S p e c や シ ス テ ム プ ロ ン プ ト を ど う 共 有 し 同 期 す る か ・ S p e c フ ァ イ ル ・ m c p . j s o n な ど の M C P 設 定 ・ C l a u d e . m d の よ う な カ ス タ ム プ ロ ン プ ト ・ S l a s h C o m m a n d や S k i l l の よ う な カ ス タ ム ツ ー ル → ど の 範 囲 で ど の よ う に 共 有 す る ？ 学び 学び
42. SDDの課題③ チ ー ム で S D D を 進 め る と き 、 S M ま た P O レ ベ ル で S D D の 知 識 共 有 が 必 要 か も ？ ・ P B I を S p e c に 取 り 込 む に は P B I の 粒 度 に 留 意 ・ 仕 様 や 設 計 の 変 更 を 最 小 限 に 抑 え る ・ ド キ ュ メ ン ト の 更 新 を 欠 か さ ず 、 コ ン テ キ ス ト の 汚 染 を 防 ぐ 学び 学び
43. 社内のAI駆動開発エバンジェリストチームにアサインされたので… AI駆動開発×アジャイルの方法論や、 SDDを発展させた開発手法を模索していきたい まとめ まとめ
44. Thank You !!