GPT-5とCodexを使い分けてAI開発する方法

TL;DR

GPT-5で要件を固め、Codexでフロントエンドとバックエンドを実装し、Claude CodeでUIを磨くのが、話者の推奨する開発手順である。YouTubeトレンド検索アプリを題材に、環境構築、API連携、動作確認、Vercelへの公開まで進めている。

Transcript

はい、どうもです。今回はですね、最も 賢いAIコーディングワークフローについ て紹介していきたいと思います。ま、爆速 でアプリ開発するためには皆さん今まで クロードコード使ってたと思うんですけど も、ま、最近はGPT5とかCDEXとか 新しいですね、CLIが登場しましたので 、え、ま、私も実際に使ってみて、あ、 この流れが1番賢いな、え、正確にね、 アプリガズ作れるなっていうところをです ね、え、実感しましたので、それをね、皆 さんにシェアしていきたいなと思います。 ま、今回実際に実用的なアプリケーション 作りながら、ま、クロードコードと比べて どれくらいすごいのかっていうところもお 見せしたいと思いますので、ま、 是非コデxとクロードコードの比較とかし たい方はですね、是非最後まで見て い... Read More

Key Insights

• 要件定義は、GPT-5に目的と技術候補を伝え、不足情報を質問させながらMVP、構成、検索ロジック、画面要素を固める工程である。
• 役割分担は、GPT-5で要件定義書を作り、Codexでアプリ全体を実装し、Claude CodeでUIを改善する流れが話者の推奨である。
• Codexの評価は、ロジックとコーディングに強く、比較的小規模なアプリなら細かなタスク分割なしでもMVPを任せやすいという話者の体感である。
• Claude Codeの評価は、人間に寄り添う対話とUIのブラッシュアップに強みがあり、機能を維持したまま画面を整える用途に向くという話者の見解である。
• WindowsでのCodex利用は、話者の環境では通常のbashターミナルで動作せず、WSLのターミナルからグローバルインストールして起動した。
• 要件の保持は、プロジェクトを初期化してAGENTS.mdを作成し、要件定義書や開発条件を記録してCodexに参照させる方法で行われた。
• 作例の検索機能は、登録者数に対して再生数が多いYouTube動画を抽出し、期間や最低再生数などを設定して企画候補を探す仕組みである。
• デプロイ先は、Cloudflare Workersでビルドと公開が通らなかったためVercelへ変更されたが、問題の一般的な原因や再現条件までは示されていない。
• 🎬 このチャンネルの他の動画:
  • Google StitchでアプリUIを作る方法
  • Claude Codeでアプリを高速開発する方法
  • Claude CodeにMCPを導入する方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: GPT-5とCodexを使ってAI開発する方法は？

最初にGPT-5との対話で要件を整理し、完成した要件定義書をCodexへ渡してMVPを実装します。その後、動作確認とAPI設定を行い、UIの改善はClaude Codeへ任せます。動画では最後にGitHubリポジトリを作り、Vercelへデプロイしています。

Q: GPT-5には要件定義で何を伝えればよいですか？

作りたいサービスの目的、対象データ、必要な機能、利用したい技術、未決定事項を伝えます。動画の例では、YouTube Data API、Next.js、Cloudflare、D1を候補に挙げ、認証方式などに推奨案を求め、不足情報があれば質問するよう依頼しています。

Q: 非エンジニアがAIで要件を固める方法は？

AIに必要事項をヒアリングしてもらい、その質問へ順番に答える方法が示されています。技術構成の知識がなければ候補の提案も求め、目的、MVP、検索条件、画面要素などが固まった段階で、内容を要件定義書としてまとめるよう依頼します。

Q: Codexで要件定義書からアプリを作る方法は？

Codexを対象プロジェクトで起動し、要件定義書を渡して、まずセットアップだけを依頼します。初期状態を確認した後、要件をAGENTS.mdへ記録し、それを参照してフロントエンドとバックエンドを含むMVPの完成まで進めるよう指示します。

Q: WindowsでCodex CLIを使う方法は？

動画内の話者の環境では、通常のbashターミナルでは動作しなかったため、WSLのターミナルを利用しています。そこでOpenAI Codexをグローバルインストールし、codexコマンドで起動しています。ただし、すべてのWindows環境で同じ対応が必要かは実証されていません。

Q: CodexとClaude Codeはどう使い分ければよいですか？

話者は、ロジックやアプリ全体の実装をCodexへ任せ、UIのブラッシュアップをClaude Codeへ任せています。これは動画内の制作例と話者の体感に基づく使い分けであり、両者の一般的な性能差を網羅的に検証した結果ではありません。

Q: Claude Codeで既存アプリのUIを改善する方法は？

最初にプロジェクト構成を確認させ、既存機能を変更しないという条件を明示して、サービス内容に合う画面へ修正するよう依頼します。動画では詳細設定、期間の切り替え、グリッド表示とテーブル表示などが追加され、検索画面が段階的に改善されました。

Q: AIにUIを変更させる前に何をすべきですか？

大規模なUI変更に備え、現在の状態をGitHubへコミットしてプッシュし、別ブランチで作業する方法が紹介されています。変更結果が期待に合わなければ保存済みの状態へ戻せるため、既存の実装を保護しながら複数のデザイン案を試せます。

Q: YouTubeトレンド検索アプリはどのように動画を探しますか？

YouTube Data APIを利用し、登録者数が少ないにもかかわらず再生数が伸びている動画を検索します。期間、最低再生数、検索件数などを設定し、登録者数に対する再生数の比率が高い動画を見つけ、企画やサムネイルの参考候補として確認します。

Q: 作成したNext.jsアプリを公開する方法は？

動画では当初Cloudflare Workersへのデプロイを試しましたが、手動で始めた初期設定とWindows環境の影響により、ビルドとデプロイが通りませんでした。そのためGitHubリポジトリを作成し、Vercelへデプロイして本番環境でAPI検索を確認しています。

Summary & Key Takeaways

• 最初にGPT-5との対話で、目的、MVP、技術構成、検索ロジック、画面要素を整理する。題材は、登録者数が少ない一方で再生数が伸びている動画をYouTube Data APIで探すサービスである。不明点はAIから質問させ、合意した内容を要件定義書として出力する。

• 次に要件定義書をCodexへ渡し、プロジェクトのセットアップ後、フロントエンドとバックエンドを含むMVPを実装させる。要件はAGENTS.mdへ記録し、YouTube APIキーやCloudflare D1などを準備する。実装後は検索結果やレート制限への配慮を確認する。

• 最後にClaude Codeへ既存機能を変えないよう指示し、検索画面、詳細設定、期間切り替え、グリッド表示とテーブル表示などのUIを改善させる。大規模な変更前はGitで状態を保存する選択肢があり、動画内ではCloudflareへのデプロイが通らず、Vercelへ公開した。