AIとモブプロ：フロント・バック・インフラ全部書かせてみた

Transcript

1. AIとモブプロ：フロント・バック・インフラ全部書かせてみた
 @kyappamu

2. 自己紹介
 • @kyappamu (Yoshiki Takamatsu)
 • 株式会社Voicy
 • フルスタックエンジニアーAndroid・iOS アプリ 開発をメイン
 • 最近AIチームに移動して色々なAIツールを 検証中
 • ちょっと前からサウナに行ってます

3. 背景・狙い
 • すべてのメンバーがAIを当たり前に使いこなし、仕事そのものを進化させる文化を 創る
 • AIをペアプロ・モブプロのメンバーとして使ったらどうなるか知りたい

4. ルール説明
 • 役割分担
 ◦ ドライバー(私)：AIへのプロンプト入力係
 ◦ ナビゲーター(チーム)：設計・仕様を考える、プロンプト指示
 ◦ AI(Claude Code)：プログラミング
 • 出てきたコードはその場でレビュー、必要があればAIに修正指示

5. やったこと
 • フロント
 ◦ Angular でページ・コンポーネント・ルーティングモジュールを作成
 ◦ Figma MCPを使いデザインからコード生成
 • バックエンド
 ◦ PythonでDynamoDBとつないでデータCRUDを行うlambda関数を作成
 ◦ APIルーティング処理
 • インフラ
 ◦ API Gateway, DynamoDB 環境構築を行う Terraform コードを作成

6. プロンプト例
 インプット
 アウトプット

7. 成果物
 https://voicy.jp/feedback-voice25
8. 良かったポイント
 • チームの会話が設計・仕様検討に集中できた
 • その場で議論するので設計・仕様の合意形成が早い
 • プロンプトさえうまく投げれるとかなり早い
 • 他の人の工夫から学べた
 ◦ プロンプトの書き方、内容
 ◦ 便利コマンドやツール
 ◦ mdファイル設定

9. 苦労したポイント
 • フロントデザイン系の実装はけっこうムズかしい
 ◦ Figma MCPつないで一発で実装完了・・とはいかなかった（スタイルが異なる、 ウィンドウの伸縮で画像が崩れる等）
 • インフラコードわからん
 ◦ 別ディレクトリの定義を参考としてAIに提示し実装させた
 ◦ レビューに時間を割けた＆動作確認

10. まとめ
 • モブプロ×AIは、設計・レビューベースの開発に向いている
 ◦ コードはAI、チームは「何を作るか・どう作るか」に時間を使える
 • 他の人の工夫からの学び
 • 強制的にプロンプトエンジニアリングを磨くきっかけになる

11. 今後の野望
 • ナビゲーターもAIに任せて、フルAIプロジェクト
 • 人間はお茶🍵を飲んでるだけ

12. ご清聴ありがとうございました