AIツールでYouTube風アプリを開発する方法

TL;DR

Claudeで要件を整理し、Bolt.newで画面を生成した後、Cursorへコードを移してNext.js上で修正し、Vimeo APIとの接続を進める。AIにエラー修正も依頼できるが、技術の基礎理解と初期設計、認証情報の正確な設定が必要になる。

Transcript

はいどうも皆さんこんにちはしんです今回 はですねAI駆動開発の入門ということで ですねま最近話題のAIのツールを使って どうやってえアプリ開発をしていくのかに ついてお話をしていきますま実際の エンジニアの方でもえ使えますし非 エンジニアの方ですねまプログラムの経験 があまりないという方でもAIを駆使すれ ばま誰でもWebアプリケーション作れる ような時代なのでまこの動画1本見て いただければですねえまどんな人でも自分 の個人プロダクトっていうのを作ることが できますのでま実際見ていただけたらなと 思いますま僕が個人開発する場合もこの 動画で説明するような流れで開発していく のでま参考にしていただけたらなと思い ますで今回使うAIツールの紹介をまずは しておきます開発する前にねえまずこの ボ... Read More

Key Insights

• ・AI駆動開発の基本手順は、要件定義、UI生成、ローカル環境への移植、外部API接続、エラー修正の順に進める構成である。
• ・Claudeの役割は、必要機能や技術構成を整理し、Bolt.newへ入力する英語のUI生成プロンプトまで作成することである。
• ・Bolt.newの役割は、YouTube風の動画一覧、ヘッダー、サイドバー、ダミーデータを含む画面を自然言語から生成することである。
• ・CursorのComposerは、指定したファイルと指示を基に、コンポーネントや型、ユーティリティーなどのコードを作成、変更できる機能である。
• ・動画管理の設計では、動画本体だけでなく、タイトル、説明、投稿者名、アップロード日、サムネイルの扱いも決める必要がある。
• ・初期設計を固める理由は、保存先、データベースの要否、サムネイルとの関連付けを後から変更する手戻りを減らすためである。
• ・AIが生成したコードには、インポートパス、Tailwind CSS、shadcn/ui、依存パッケージなどの不整合が残る場合がある。
• ・Vimeo API連携にはアプリ作成と認証情報の設定が必要であり、実演では動画取得時に404や401のエラーが発生している。
• 🎬 このチャンネルの他の動画:
  • Claude CodeでUI案を量産する方法
  • Next.jsにClerk認証を導入する方法
  • Figma MCPでAI感のないUIを作る方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: AIでYouTube風アプリを開発する方法は？

Claudeで要件と技術構成を整理し、Bolt.newでYouTube風のUIを生成してから、コードをCursorへ移してNext.js上で動かします。その後、Vimeo APIとの接続、環境変数の設定、依存パッケージの導入、表示や認証エラーの修正を順番に進めます。

Q: AI駆動開発で最初に決める要件は何ですか？

最初に、誰が動画を投稿できるのか、一覧と詳細ページで何を表示するのか、動画とサムネイルをどこへ保存するのかを決めます。実演では管理者だけが投稿し、不特定多数が視聴できる構成とし、認証や決済は時間に応じて省略する方針です。

Q: Claudeはアプリ開発のどの工程で使いますか？

Claudeは主に要件定義と設計の相談に使います。必要な技術スタック、データベースの要否、動画保存サービス、サムネイル設定について質問し、さらにBolt.newへ入力するUI生成用プロンプトも作らせています。ChatGPTを利用してもよいと説明されています。

Q: Bolt.newでYouTube風UIを作る方法は？

Claudeが作成した英語のプロンプトをBolt.newへ貼り付け、YouTube風の動画一覧画面を生成します。出力後は、サイドバーの追加、メインコンテンツとの余白、左寄せなどの問題を自然言語で指示して修正します。ただし、生成直後はダミーデータだけの画面です。

Q: Bolt.newのコードをCursorへ移す方法は？

Next.js 15のひな型を作成してローカルサーバーを起動し、Bolt.newが生成したページ、ヘッダー、サイドバーなどのコードをCursorのComposerへ渡します。必要なファイルやディレクトリの作成を指示し、差分を確認してから変更を一括適用します。

Q: AI生成コードで画面が崩れた場合の直し方は？

インポートパス、Tailwind CSS、shadcn/ui、必要なモジュールが正しく設定されているかを確認します。実演では、壊れた相対パスを手動またはComposerで直し、CSSが適用されていないことを伝えて生成された修正を適用すると、画面の表示が整いました。

Q: Vimeo APIで動画を表示するには何が必要ですか？

Vimeo側でアプリを作成し、アクセストークンやユーザーIDとして使う値を取得して、ローカルの環境変数ファイルへ設定します。CursorにはAPIを呼び出すファイルや型、ユーティリティーの生成を依頼します。無料プランでは動画を3つまでアップロードできると実演中に確認されています。

Q: Vimeo APIで401エラーが出た場合はどうしますか？

まずアクセストークン、ユーザーID、公開範囲などの認証設定を確認し、エラー内容をCursorへ渡して原因候補と修正案を出させます。実演では404の後に401が確認され、エラーハンドリングの改善まで進みましたが、文字起こし内では最終的な解決結果までは示されていません。

Summary & Key Takeaways

• 最初にClaudeのプロジェクト機能を使い、管理者だけが動画を投稿し、不特定多数が一覧や詳細ページから視聴できるYouTube風アプリの要件を整理する。動画本体は外部サービスへ保存し、タイトルや説明などの管理方法、サムネイル設定、無料利用の制限も実装前に検討する。

• 次にClaudeへBolt.new用のプロンプト作成を依頼し、YouTube風の一覧画面を生成する。出力された画面を確認し、左寄せ、余白不足、サイドバーなどを自然言語で修正する。ただし、この段階ではダミーデータが表示されるだけで、動画再生や外部APIとの連携は実装されていない。

• 最後にNext.js 15のひな型を作り、Bolt.newのコードをCursorのComposerへ渡して、コンポーネントや必要ファイルを生成する。Tailwind CSS、shadcn/ui、相対パスの問題を直した後、Vimeoのアクセストークンなどを環境変数へ設定するが、実演はAPI取得時の401エラー確認までで終わる。