【AI共同開発｜お弁当予約システム｜テスト編】設計書×実装×テストを同時更新！現役エンジニアがCursor×Codex×Claude Codeでライブコーディング＆トラブルもそのまま実況😱
1. プロジェクトの概要と復活宣言
結論: お弁当予約システムのテストフェーズ実装をライブコーディングで行う
背景:
以前に要件定義、設計、実装の動画を制作済み
しばらく間が空いていたが、AIツールが大幅に進化したため復活
今回はテストフェーズに焦点を当てる
具体例:
過去にドメイントラブル（10-20年前のサイトが出現）などの問題があった
Cursor、Claude Code、Codex AIなど複数のツールが大幅にレベルアップ
2. 使用AIツールの紹介と特徴比較
結論: 3つのAIツール（Cursor、Claude Code、Codex）を並行使用し、それぞれの得意分野を活用
背景: 各AIツールには異なる特性と得意分野がある
具体例:
Claude Code: 日本語ドキュメント作成が得意、詳しく分かりやすい表現
Codex: テストコード実装が特に優秀、長時間の作業継続が可能
Cursor: 実装作業全般、エラー修正
GPT-5: 短時間で簡潔だが、使用回数制限（月500回）あり
例え話: 「GPT-5は短く答える傾向、Claude Codeは優しく詳しく書いてくれる先生のような違い」
3. AI協調開発の新しいワークフロー
結論: 実装・テスト・仕様書を同時並行で更新する革新的な開発手法
背景: 従来のエンジニアリングでは実装が先行し、テストと設計書が後回しになる課題があった
具体的なワークフロー:
Cursorで実装開発
Codexでテスト更新
Claude Codeで仕様書更新
3つを同時並行で進行
例え話: 「左手でテスト、右手で実装、頭で仕様書を同時に考えるような感覚」
4. テスト実装の具体的手順
結論: プロンプト設計により、包括的なテスト環境を自動構築
具体的なテスト種類:
Jest: 単体テスト（個別機能の動作確認）
Playwright: E2Eテスト（結合テスト、画面操作からバックエンドまでの一連の流れ）
実行コマンド:
npm run test: Jestによる単体テスト
npm run test:e2e: PlaywrightによるE2Eテスト
数値結果: テスト実行結果で130個のテストがパスし、1個のみエラー（カバレッジ80%目標）
5. リアルタイムバグ修正とエラーハンドリング
結論: AIツールを使ったリアルタイムデバッグにより、効率的な問題解決が可能
具体的な修正事例:
401認証エラー（お知らせ管理、売上管理）
422 Unprocessable Entityエラー（設定画面）
ステータス表示の不整合（英語/日本語）
デバッグ手法:
ブラウザの検証ツールでエラー確認
ネットワークタブでAPI通信状況をチェック
エラーコードとレスポンス内容をAIに送信
修正提案を受けて実装
6. AI時代のエンジニアリング文化の変化
結論: AIとの協働により、開発者の厳しさと効率性が向上
背景の変化:
従来: 人間に対して厳しく指摘しにくい
AI時代: AIに対して遠慮なく厳格な指示が可能
具体例:
「やり直し」「普通そうはならない」など直接的な指示
複数タスクの同時依頼
永続的な作業継続（「永遠に繰り返して」という指示も可能）
将来への懸念: AIネイティブ世代が人間に対しても同様の厳しさを求める可能性
7. 実際の機能実装と動作確認
結論: ライブで注文管理システムの各機能を実装・テストし、実用的なシステムを構築
実装した主要機能:
注文管理画面（ステータス: 調理開始→配達中→配達完了）
設定画面（店舗名、営業時間、パスワード変更）
商品管理（画像アップロード、価格設定）
注文履歴表示
動作確認結果:
ハンバーグ弁当（450円）の注文が正常に処理
ステータス更新が適切に反映
AI生成画像（nanobanana）の活用成功
8. コスト効率性と実用性の評価
結論: AI活用により大幅なコスト削減と開発速度向上を実現
具体的なコスト比較:
Claude Code: 月200ドル（Opusのみ）
ChatGPT: 月200ドル（GPT-5のみ）
Cursor: 月200ドル（複数モデル利用可能）
効率性の向上:
従来: 要件定義→設計→実装→テストの順次処理
AI活用: 全工程の同時並行処理
現場での即座の修正・改善が可能
例え話: 「お客さんとエンジニアが一緒にワイワイガヤガヤしながら一日で完成させる感覚」
この動画は、AI協働開発の実践的な手法と、それがもたらす開発プロセスの革新を具体的に示した貴重な記録となっています。
本動画では、3つの最先端AI開発ツール「Cursor」「Codex」「Claude Code」を同時並行で活用し、お弁当予約システムのテストフェーズを完全ライブコーディングでお届けします。
エラー対応やツールのトラブルもそのまま実況！現場のリアルな開発プロセスを包み隠さず公開します。
▼目次
00:00 オープニング＆配信概要説明
02:28 テスト設計の開始＆AIツール設定
06:08 システム復活確認＆エラー対応開始
09:47 AIツールの使い分けとコスト解説
13:35 401エラー解決＆機能実装
18:57 AI時代の働き方について議論
22:30 カーソル落ちる問題＆継続実装
27:38 UIの改善と注文管理機能
33:46 テスト実装の詳細解説
41:14 設定項目の検討＆最適化
48:21 注文機能の実装＆ステータス管理
56:36 なのバナナで商品画像生成
1:11:08 注文フローのテスト実行
1:19:44 配達業務の実装検討（CSV/PDF出力）
1:24:32 Jest＆Playwrightテストの実行
1:31:17 デバッグ＆トラブルシューティング
1:42:27 最終確認＆まとめ
▼この動画のポイント
・3つのAIツールを同時並行で活用する革新的開発手法
・設計書更新×実装×テストコードを完全自動化
・130個のテストを1時間で実装する驚異的な効率
・現場で発生するリアルなエラーと解決プロセスを完全公開
・月額200ドルで実現する最強のAI開発環境
▼この動画の要約
◻︎ 使用AIツールの特徴
・Cursor：GPT-5とClaude両方使える統合開発環境
・Codex：テストコード生成に特化、永続的な実行が可能
・Claude Code：日本語仕様書作成に最適
◻︎ 実装した機能
・Jest（単体テスト）の設定と実装
・Playwright（E2Eテスト）の設定と実装
・注文管理システムの完成
・設定画面の実装
・エラー処理（401、422、500エラー対応）
◻︎ 開発効率の実績
・従来：5人×5日（200時間）の作業
・今回：1人×1時間で130テスト実装
・カバレッジ：80%達成
▼環境構築手順
1. Cursor Pro Plus（月額$20）の契約
2. Codex拡張機能のインストール
3. Claude Codeの設定
4. プロジェクトフォルダの構成
5. npm/yarn環境の準備
▼料金プラン比較
・Cursor Pro Plus：月額$20（GPT-5＋Claude使い放題）
・Claude Code Max：月額$200（Claudeのみ）
・ChatGPT Plus：月額$20（GPT-5のみ）
・最適解：Cursor $200プランで全AI使い放題
▼参考リンク
・Codex | OpenAI
https://openai.com/ja-JP/codex/
・Cursor – Welcome
https://docs.cursor.com/en/welcome
・Claude Code概要 - Anthropic
https://docs.anthropic.com/ja/docs/cl...
▼本動画で学べること
・3つのAIツールの最適な使い分け方法
・エラー解決の実践的アプローチ
・テスト自動化の具体的な実装手順
・現場で使える効率的な開発フロー
・コストパフォーマンス最大化の戦略
【お願い】
👍チャンネル登録＆高評価をお願いします！
🎬最新のAI開発技術やライブコーディング配信を今後も発信していきます。
▼あきらパパとダイチのSNSをフォローしよう！
・あきらパパ
X: https://x.com/akira_papa_IT
note: https://note.com/akirapapa/
・だいち
X: https://x.com/LxGtUGtlRSh8yXW
note: https://note.com/daichi_mu
🌟AIエンジニアコミュニティ「RIDE ON AI」
・最新AI開発ツールの検証
・エンジニア視点でのAI活用
・ライブコーディング勉強会
参加はこちら：

/ discord
▼関連動画
・要件定義編：
【AI駆動開発｜お弁当予約システム｜要件定義編】現役エンジニアがAI活用してお弁当屋さんのリアルなお悩みを解決するために開発してみた結果。。。「結局は人間の目でレビューは必要、それでもAI効果すご！」 - YouTube
URL:

• 【AI駆動開発｜お弁当予約システム｜要件定義編】現役エンジニアがAI活用してお弁当屋...
・設計編：
【AI駆動開発｜お弁当予約システム｜設計編】要件を設計に落とし込むプロセス全公開！UI・DB・API設計も…現役エンジニアがAIと設計した結果「いやAI以前は5人x5日(80h)が1人で2.5hて笑」 - YouTube
URL:

• 【AI駆動開発｜お弁当予約システム｜設計編】要件を設計に落とし込むプロセス全公開！U...
・実装編：
【AI駆動開発｜お弁当予約システム｜実装編①-環境構築】現役エンジニアが設計通りにAI(RooCode)とNext.js環境構築してみた！Github&Vercel連携トラブル発生シーンもそのまま収録 - YouTube
URL:

• 【AI駆動開発｜お弁当予約システム｜実装編①-環境構築】現役エンジニアが設計通りにA...
【AI駆動開発｜お弁当予約システム｜実装編②-ドメイン・サーバー紐付けとDNS設定】現役エンジニアがドメイン・サーバー紐付けで激レアトラブルに遭遇！問い合わせ対応から解決までの全プロセスを収録 - YouTube
URL:

• 【AI駆動開発｜お弁当予約システム｜実装編②-ドメイン・サーバー紐付けとDNS設定】...
【AI駆動開発｜お弁当予約システム｜実装編③-認証周り】Next.js x MongDBで2時間でログイン・メール認証機能を実装する全手順公開！「正直、このスピードは、自分でも若干引いてます...笑」 - YouTube
URL:

• 【AI駆動開発｜お弁当予約システム｜実装編③-認証周り】Next.js x Mong...
【AI駆動開発｜お弁当予約システム｜実装編④-住所CRUD管理】Cursor x 3.7sonnetでも解決できないバグ発生！どうするあきらパパ!?＆理解が進む「シミュレーションドラマ学習法」も大公開 - YouTube
URL:

• 【AI駆動開発｜お弁当予約システム｜実装編④-住所CRUD管理】Cursor x 3...
#AI共同開発 #Cursor #CodexAI #ClaudeCode #テスト自動化
#Jest #Playwright #ライブコーディング #お弁当予約システム
#バイブコーディング #AIエンジニア #プログラミング
#エラー解決 #現役エンジニア #開発効率化
※この動画の内容は2025年9月時点のものです。
AIツールのアップデートにより機能が変更される可能性があります。
