Vibe Codingを体験してみた - AIエージェントと一緒にウェブアプリを作ろう
GMOメディアでSREを担当している安保です。
今回はDeepLearning.AIが提供する「Vibe Coding 101 with Replit」というコースを受講し、実際にAIエージェントと一緒にサンプルアプリを作ってみた体験をシェアしたいと思います。
Vibe Codingとは？
「Vibe Coding」とは、AIコーディングエージェントに大部分のコーディング作業を任せながら、自分はアプリケーションのアーキテクチャや機能の設計に集中するという新しいコーディングスタイルです。単に一度プロンプトを投げて全ての提案を受け入れるだけではなく、作業を構造化し、プロンプトを洗練させ、より効率的なコードにつなげるフレームワークを使用するプロセスが含まれています。
コースの概要
このコースはReplit（オンラインのコーディング環境）と提携して作られており、ReplitのPresidentであるMichele Catasta氏とHead of Developer RelationsのMatt Palmer氏が講師を務めています。約1時間34分の動画レッスンを通じて、AIコーディングエージェントを活用して2つのウェブアプリケーションを構築し、デプロイする方法を学びます。
コースは以下の7つのモジュールで構成されています：
-
イントロダクション（3分）
- コースの概要と目標
- Vibe Codingの基本コンセプト
-
エージェント開発の原則（18分）
- AIエージェントとの効果的な協働方法
- エージェントを活用するための5つのスキルフレームワーク
-
SEOアナライザーの計画と構築（23分）
- 製品要件書（PRD）とワイヤフレームの作成
- AIエージェントを使ったプロトタイプの開発
-
SEO分析機能の実装（12分）
- UIの改善と機能の追加
- エラー処理とデバッグの方法
-
投票アプリの計画と構築（26分）
- データモデルの設計
- 比較投票システムの実装
-
国立公園投票アプリの機能強化（7分）
- 完全なデータセットの統合
- データの永続化と保存機能の実装
-
次のステップとベストプラクティス（4分）
- より複雑なプロジェクトへの応用
- Vibe Codingを活用するためのヒントとコツ
実際に作ったアプリケーション
今回コースで紹介されている2つのうち、SEOアナライザーを実際にReplitで作成してみたので、そのプロセスを詳しく紹介します。
SEOアナライザー
URLを入力するとそのウェブサイトのSEO関連の情報を分析するツールです。
アプリの主な機能：
- ウェブサイトのSEO関連の情報を分析するツールです。
- メタタグやSEO要素のチェック
- モバイルフレンドリーネスの評価
- 改善提案の提示
このプロジェクトでは、AIエージェントに要件を伝え、基本的なプロトタイプを作成してもらいました。その後、UIの改善やフィーチャーの追加など、段階的に指示を出しながら完成度を高めていきました。
Replitでの開発
AIエージェントに以下のような具体的なプロンプトを与えることで、数分間でアプリケーションを作成することができました。
Help me create an interactive app that displays the SEO (meta) tags for ANY website in an interactive and visual way to check that they're properly implemented.
The app should fetch the HTML for a site, then provide feedback on SEO tags in accordance with best practices for SEO optimization.
The app should give google and Social media previews.
完成したアプリは、入力されたURLからメタタグを取得し、Google検索結果やSNSでの表示プレビューを視覚的に表示してくれます。また、SEOに関する重要なポイントをチェックし、改善点があれば提案してくれる機能も実装しました。
スマホなどに対応したレスポンシブデザインではなかったので、下記のプロンプトを伝えて、修正してもらいました。
make my app fully responsive and mobile friendly
このようにシンプルなプロンプトから始めて、AIエージェントとの対話を通じて機能を追加・改良していくプロセスがVibe Codingの醍醐味です。
Vibe Codingで必要な5つのスキル
コースでは「Vibe Coding」をうまく行うための5つのスキルが紹介されました：
- 考える（Thinking）
- フレームワークを使う（Using Frameworks）
- チェックポイント（Checkpoints）
- デバッグ（Debugging）
- コンテキスト提供（Providing Context）
なぜこのコースをオススメするのか
このコースを受講して、AIエージェントと協働してアプリを開発する体験は非常に価値があると感じました。いくつかの理由を挙げます：
1. 効率的な学習曲線
従来のプログラミング学習では、言語の文法やフレームワークの使い方などを先に学ぶ必要がありましたが、Vibe Codingでは「何を作りたいか」というアイデアからすぐに始められます。AIエージェントが実装の詳細を担当してくれるため、より高いレベルの概念に集中できます。
2. 実装の理解が深まる
意外かもしれませんが、AIにコードを書いてもらうことで、そのコードがどのように動作するかを理解する機会が増えました。「このコードは何をしているの？」と聞くと、AIが詳細に説明してくれるので、学習ツールとしても効果的です。
3. プロトタイピングの加速
アイデアからプロトタイプまでの時間が劇的に短縮されます。通常なら何日もかかるプロジェクトが数時間で形になるため、より多くのアイデアを試すことができます。
4. プロンプトエンジニアリングのスキルアップ
AIに効果的に指示を出す能力は、現代のプログラマーにとって非常に重要なスキルになっています。このコースでは、具体的なプロンプト戦略を学ぶことができます。
実際のコース体験
コースを受講しながら、指示に従ってSEOアナライザーを作成してみました。最初はシンプルなUIで基本機能だけを実装し、徐々に機能を追加していきました。
特に印象的だったのは、エラーが発生した際のデバッグプロセスです。エラーメッセージとコードの状態をAIに伝えると、問題の原因と解決策を迅速に提案してくれました。従来のデバッグ方法と比べて、初心者にとってはるかに分かりやすいアプローチだと感じました。
また、Replitを使うことで環境構築の手間がなく、すぐにコーディングに集中できるのも大きなメリットでした。Replitはエディタ、パッケージマネージャー、デプロイツールが統合されているため、ワンストップで開発からデプロイまで完結できます。
まとめ
「Vibe Coding 101 with Replit」コースは、AIエージェントとの効果的な協働方法を学ぶ絶好の機会です。プログラミング初心者から経験者まで、AIを活用した新しい開発アプローチを実践的に学べます。
特に、プロジェクトの構想からプロトタイピング、リファインメント、デプロイまでの一連のプロセスを体験できるのが素晴らしいポイントです。このコースで学んだスキルは、実際の業務プロジェクトにも応用可能で、開発効率の向上に直結すると感じました。
今後のプログラミングはAIエージェントとの協働がスタンダードになっていくと思います。このトレンドに先駆けて「Vibe Coding」のスキルを身につけることで、より創造的で高度なプロジェクトに集中できるようになっていきそうです。
AIの力を借りながら、人間はより高次の問題解決や創造性に集中する—そんな新しいプログラミングの形を、このコースを通じて体験してみてはいかがでしょうか。
Discussion