AI DLCのConstructionを Cursorでプロトタイプ・検証する

Cursor Meetup Osaka #2 AI DLCのConstructionを Cursorでプロトタイプ・検証 する 岡本秀高 / @hidetaka_dev CircleCI Senior Field Engineer

INTRODUCTION 岡本 秀高 / Hidetaka Okamoto CircleCI Senior Field Engineer CI/CDの中の人。普段はパイプラインの話をしています AWS Community Builder (Serverless) AWS Samurai 2017 / Alexa Champion hidetaka.dev / wp-kyoto.net 年間100本ペースで技術記事を書いています JP_Stripes / Workers Tech Talk / AWS Startup Community コミュニティイベントの主催側もやります 2

BACKGROUND 実は、開発者歴より和太鼓歴のほうが長い 中学の頃から和太鼓を趣味で継続 自宅に合計３台所有 ソロの作曲をしてみたいが、構成が作れない 「断片を録って、構成に当てはめて曲にする」 道具がずっと欲しかった。 → ないなら、自分で作る。 3

SUBJECT 和太鼓ソロの作曲支援アプリを開発中 • 断片（フレーズ）を録音 • 構成原理に当てはめ • 1曲に組み上げる 構成原理：序破急（雅楽・能）、 テーマと変奏、 Peshkar型（タブラソロ）…… 4

AI-DLC 開発には AI DLC を採用し、 Claude と設計 Inception 要件定義 ユーザーストーリー Unit分解 Construction → 設計 コード生成 ビルド & テスト Operations（まだ） → ネイティブビルド デプロイ・運用 今回は Claude Code + AI-DLC プラグインで実施。人間の仕事は「承認」「検証」「意思決定」。 6

AI-DLC 開発には AI DLC を採用し、 Claude と設計

AI-DLC ドキュメントが残るので、エージェント依存しにくい

AI-DLC AI DLCでは会話や判断が audit.md に残る aidlc-docs/audit.md 全インタラクションが記録される ## Workflow Planning - Approval User Input: " モックアップは参考資料。 planはいいと思う " ADR のような判断記録で、 後続フェーズの AI も参照する ## Unit 1 Functional Design - Approval User Input: "ok" ## Unit 1 NFR Design - Approval User Input: "ok" audit.mdに何を残すかの 判断も同時に求められる 7

• http://audit.md

PROBLEM 1 ドキュメントだけでは判断が難しくなる > ok • ドキュメントの確認と承認をひたすら繰り返す > ok • 本来はチームでやるべきものを一人で実践 > ok • 「本当にそれってOKなんですか？」 > approve • 判断疲れによって、承認ゲートが形骸化していく > ok 「実際に動くものがあったら、フィードバックしやすいのでは？」 8

PROBLEM 2 「今すぐ触って確かめたい」がフローを汚す Constructionで固めた設計、本当に思った通りに動く？ → プロトタイプを触って体感検証したくなる。 9

PROBLEM 2 「今すぐ触って確かめたい」がフローを汚す Constructionで固めた設計、本当に思った通りに動く？ → プロトタイプを触って体感検証したくなる。 AI-DLC のセッション内で雑な試行錯誤をやると、auditにノイズが混入する。 後続フェーズの AI がプロトタイピングの入力を読み、 AI の判断材料そのものが汚れる ブラウザ動作チェックも、手作業 or MCP サーバー構築になって効率が悪い 9

PROBLEM 2 「今すぐ触って確かめたい」がフローを汚す Constructionで固めた設計、本当に思った通りに動く？ → プロトタイプを触って体感検証したくなる。 AI-DLC のセッション内で雑な試行錯誤をやると、auditにノイズが混入する。 後続フェーズの AI がプロトタイピングの入力を読み、 AI の判断材料そのものが汚れる ブラウザ動作チェックも、手作業 or MCP サーバー構築になって効率が悪い 検証は本質的に「汚れる」作業。正史と同じ場所でやってはいけない。 9

STRUCTURE 正史と実験場を分離する 正史（本流） 実験場（フロー外） Claude Code + AI-DLC 承認ゲート / audit trail クリーンに保つ プロトタイプ / スモークテスト 試行錯誤・雑な操作 OK 使い捨てる 実験場に必要な 3要件： ① 本流と別セッション ② ブラウザ操作込み ③ 雑にやって捨てられる 10

STRUCTURE 実験場として Cursor を選んだ理由 チャットを分けて「プロトタイピング役」を常設。 ① 本流と別セッション → 並列で機械的チェックも走らせられる ② ブラウザ操作込み → MCPサーバーの登録などが不要 ③ デバッグモードの存在 → 自力でのデバッグが困難と判断。 ブラウザツールが標準装備。 初めて使うツールやAPIが多いアプリのため、 11

HANDS-ON 現状を共有しつつ、調査の依頼を出す AI DLCスキルを使って。今このフェーズにいます。 Build and Test 完了（ng build / lint / unit 6/6 PASS） 残り: 手動スモークテスト チェックリスト: build-and-test-summary.md これを実施してください。 ざっと見ただけでも、録音ができない様子でした 12

HANDS-ON 録音できない原因を Cursor が切り分けて修正 1 wasm は 200 配信 → でも LinkError 2 jeep-sqlite × sql.js の互換不整合と推定 3 ブラウザツールで 12 actions 自走 4 原因: WAL PRAGMA がトランザクション内で失敗 13

HANDS-ON Cursor の「動いた」を自分で検証する Cursorが報告するまで、 アプリはあまり触らない 基礎的なミスは Cursor が潰す。 途中からは自分のChromeで触り、 スクショを貼って状況を共有しながら デバッグを進める。 15

HANDS-ON プロトタイピングのフィードバックや変更を反映 ## Manual Smoke Test (agent-run) Code changes: - index.html: <jeep-sqlite> 追加 - angular.json: wasm asset 配信 Outcome: UI シェル到達 / 環境制約で DBフローは実機ブラウザ確認へ Docs updated: aidlc-state.md, build-and-test-summary.md AI DLC 側へは「結果」だけを 反映させる auditや Constructionには 「何を変えたか」 「何を確認したか」 のサマリだけを反映 16

PAYOFF Cursor によって助かったこと セットアップ デバッグの往復 プロセスの清潔さ ブラウザ検証のための MCPサーバー構築・接続が まるごと不要に 再現手順の文章化が 「スクショ貼るだけ」に 短縮された auditは承認と結果だけ。 試行錯誤のノイズが 正史に残らない 18

CYCLE 仕様を詰める方法だからこそ、プロトタイプを ok連打のループ 使い捨てのループ 読む → ok → Code Generation → 動かして初めて気づく → 後悔 作る → 触る → 捨てる → また作る 失敗と使い捨てコードを大量に許容 生成AI によって、プロトタイプによる実験コストが安くなった 文章と議論でまとまらない時は、とりあえず動くものを作らせてみる 19

CLOSING 「今この瞬間、誰も答えを持っていない。だから全員が同じ出発点にいる」 — Kent Beck 「AIは増幅器。使う側の知識を超えられない」 — 和田卓人 (t-wada) 正史は規律のために。実験場は速度のために。判定はあなたの仕事。 Thanks! hidetaka.dev / wp-kyoto.net

岩崎学園情報科学専⾨学校 | JR 横浜駅すぐ