AI駆動開発入門：たった1時間でYouTubeクローンを作ってみた！

AI駆動開発入門：たった1時間でYouTubeクローンを作ってみた！

はじめに

皆さん、こんにちは！Shinです。今回は、AI駆動開発入門として、最新のAIツールを使ってWebアプリケーションを開発する流れを、実際にYouTubeクローンを作成しながら解説していきます。

プログラミング経験が少ない方でも、AIを効果的に活用すれば、Webアプリケーションの作成が驚くほど簡単にできる時代になりました。本記事では、その方法をステップバイステップで解説し、誰でも自身の個人プロダクトを作成できるようになることを目指します。

私が個人開発を行う際も、本記事で説明する流れで開発を進めていますので、ぜひ参考にしてください。

使用するAIツール

今回の開発で使用するAIツールは以下の3つです。

• Bolt: フロントエンドのUI部分を綺麗に生成してくれるAIツールです。
• Claude 3.5 sonnet: ChatGPTよりも優れた回答をレスポンスしてくれるAIツールです。ChatGPTを使用している方は、そちらを利用しても構いません。
• Cursor Editor: AIとペアプログラミングしながら開発できるエディタです。自然言語（日本語）でプログラムコードを書くことができます。

最近流行しているReplit Agentも試しましたが、今回は有効な使い方が分からなかったため、別の機会に紹介します。

費用について

今回使用したAIツールの料金は、Bolt、Claude、Cursorそれぞれ月額20ドルで、合計60ドル（日本円だと約9000円）となります。 これは決して安い金額ではありませんが、私はこれを 自己投資 と捉え、積極的に活用しています。

AIツールの費用を支払うことに抵抗のある方は、本記事を読んで、その価値を理解していただければ幸いです。この記事を通して、20ドルの価値があると判断してくださった方は、ぜひご自身でも利用してみてください。

YouTubeクローン開発：仕様と要件定義

今回の目標は、YouTubeクローン の作成です。動画をアップロードし、誰でも閲覧できるアプリケーションを目指します。

ただし、YouTubeと完全に同じ機能を作るのは時間的に厳しいので、いくつかの制限を設けます。

• 動画投稿機能: 管理者のみが動画を投稿できます。
• 動画再生機能: 投稿された動画を再生できます。
• UI: YouTubeのような見た目になるようにデザインします。
• 認証/決済機能: 時間的な都合上、今回は実装しません。タイムラインに表示されるYouTubeの認証・決済実績のようなものは、今回のクローンでは確認できません。

要件定義：Claudeを活用

まずは、必要な機能をClaudeを使って要件定義します。Claudeにはプロジェクト機能があるので、それを活用します。

Create Project として YouTube Web Application Developmentと入力します。

次に、プロンプトを作成します。以下のような内容を入力しました。

今から、以下の要件を満たすYouTubeクローンを作成します。必要な技術的要件を提示してください。

* 管理者のみ動画投稿機能
* YouTubeライクな動画一覧表示と詳細ページへの遷移
* 各動画にタイトル、投稿者名、アップロード日時を表示


非エンジニアの方にも分かりやすいように、技術用語を避け、必要そうな技術スタックを提案してください。

非エンジニアの方は、必要そうな技術スタックをAIに尋ねる、もしくは最低限のプログラミング知識を身に付けることが重要です。より詳細な指示を出すためには、基礎的な知識は必要不可欠です。

開発：BoltとCursor Editorの連携

要件定義が完了したら、Boltを使ってUIを作成します。プロンプトは以下のように記述しました。

以下の要件を満たすYouTubeクローンアプリケーションのUIを生成してください。

* 管理者のみ動画投稿機能
* YouTubeのような動画一覧表示
* 各動画はタイトル、投稿者名、アップロード日時を表示する

Boltは、以下のようなレスポンスを返してくれました。（実際に出力されたコードは省略します）

• 動画一覧のレイアウト
• 各動画の表示項目
• サイドバー（今回は機能は実装しないが、見た目として追加）

UI生成後の修正

Boltで生成されたUIをCursor Editorに貼り付けました。しかし、いくつかの問題点がありました。

• 左側に寄っている
• 余白がない

そこで、Cursor Editorで以下のようにAIに修正を依頼しました。

サイドバーを追加し、左右の余白を調整してください。

Cursor Editorは、これらの問題点を自動的に修正し、より洗練されたUIを提供してくれました。

動画管理： Vimeo API の活用

動画のホスティングには、YouTubeではなく、Vimeo を使用することにしました。Vimeoにも無料プランがあり、APIも利用できます。

Cursor EditorでVimeo APIに関する情報を取得し、サムネイル設定と取得が可能かどうかを問い合わせました。

Vimeoでサムネイル設定と取得はできますか？ 動画と関連付ける必要があります。

AIは、Vimeo APIでサムネイル設定と取得が可能であることを確認しました。

バックエンドとの連携

UIが完成したので、バックエンドとの連携を行います。

まず、Cursor EditorでVimeo APIを利用して動画情報を取得するコードを追加しました。

しかし、useEffectで初回レンダリング時に一度だけ発火させているため、Next.jsの良さであるサーバーサイドレンダリングが活かされていませんでした。理想的にはサーバーコンポーネントでサーバーサイドでデータフェッチを行うべきです。

今回は、簡略化のため、useEffectによるクライアントサイドレンダリングのまま進めます。

デプロイ：Vercel を使用

最後に、Vercelを使ってデプロイを行います。VercelはNext.jsアプリケーションのデプロイに最適なサービスです。

Cursor Editorで、Vercelへのデプロイ手順をAIに問い合わせました。

Vercelへデプロイする手順を教えてください。

AIは、GitHubリポジトリを作成し、コードをプッシュするだけで自動デプロイが行われることを示してくれました。

エラーへの対応

開発過程では、いくつかのエラーが発生しました。

• 型宣言が見つかりません： 相対パスが間違っていたため修正しました。
• getStaticParamsエラー：静的生成ではなく動的生成が必要なため、修正しました。
• Vimeo APIのレート制限：無料プランでは1分間に25リクエストまでしかできないため、動画投稿数は3本に制限しました。

エラー解決のポイント

エラーが発生した際には、公式ドキュメントを参照し、エラー内容を理解することが重要です。そうすることで、修正すべき箇所を的確に特定できます。

私は、AIにエラー内容を説明し、修正方法を尋ねることが多かったです。AIは多くの場合、適切な修正方法を提案してくれました。

開発を終えて

AIを活用することで、短時間でYouTubeクローンを作成できました。もちろん、高度な機能を実装するには多くの知識と経験が必要です。しかし、AIは開発の初期段階、特にUI設計やコード生成において、非常に強力なツールとなります。

非エンジニアの方でも、AIを活用すれば、自身のアイデアを形にすることが可能です。ぜひ、AIの力を借りて、Webアプリケーション開発に挑戦してみてください！

まとめ：AI駆動開発のメリットと注意点

AI駆動開発は、開発速度の向上や開発コストの削減に繋がる素晴らしいアプローチです。しかし、以下の点に注意する必要があります。

• AIへの依存: AIに過度に依存せず、基礎的な知識を身に付けることが重要です。
• エラー対応: エラーが発生した際は、公式ドキュメントを参照し、エラー内容を理解する必要があります。
• セキュリティ: セキュリティに配慮した開発が必要です。

AIの力を活用して、より効率的で創造的な開発をしていきましょう！ 本記事が、皆さんにとってAI駆動開発への第一歩となることを願っています。

今後の展望

このYouTubeクローンは、まだまだ発展途上です。 今後は、以下の機能を追加していく予定です。

• 関連動画の表示
• いいね機能
• チャンネル登録機能
• 댓글機能
• 決済機能

さらに、AIを活用した開発手法についても、継続的に研究し、皆さんと共有していきたいと思います。

そして、Next.jsの更なる理解を深め、より高度なアプリケーション開発にも挑戦していきます。

Shinコードキャンプの紹介

より深くAI駆動開発やNext.jsを学びたい方は、私の運営するオンラインプログラミングスクール「Shinコードキャンプ」をご検討ください。

基本的な知識から実践的なアプリケーション開発まで、丁寧に指導します。 Udemyでもコースを提供していますので、そちらもご確認ください。

おわりに

本記事では、AI駆動開発入門として、YouTubeクローンの作成を通して、その流れとポイントを解説しました。AIは強力なツールですが、適切な知識と理解を伴って活用することが重要です。 皆様のAI駆動開発への挑戦を応援しています！