
関連するソリューション

業務改革

AI
AIスマートソリューション部
テクニカルスペシャリスト
松尾 大輔 
Vibe Codingとは
Vibe Codingとは、OpenAIの共同設立者であるアンドレイ・カーパシー氏が2025年2月に提唱したもので、AI(特に大規模言語モデル:LLM)を活用して、直感的かつ「雰囲気」でソフトウェア開発を進める新しいプログラミング手法となります。<Vibe Codingの特徴>
- 自然言語による指示:開発者は、具体的なコードを書くのではなくて、実現したい機能をAIに対して自然言語で伝えます。「こんな感じのWebアプリを作ってほしい」といった抽象的な要求からスタートします。
- AIによるコード生成:AIがその指示を解釈してコードを生成します。関数やクラスなどもAIが判断して生成します。
- 「ノリ」と反復:開発者は生成されたコードを実行して、意図通りに動作するか確認します。エラーが発生した場合や期待した動きではない場合は、そのフィードバックをAIに伝え、AIが修正を行います。この「生成 → 実行 → フィードバック → 修正」というサイクルを、AIと「ノリ」で会話しながら進めるように繰り返します。
- 詳細へのこだわりを減らす:細かい技術的な仕様や実装の詳細にこだわるのではなく、AIに任せるところは任せて、開発者はより高レベルなアイデアや設計に集中します。
例えば、チャットアプリを作りたい場合、従来型の開発だとプログラミング言語の知識はもちろんですが、UIデザインやバックエンドとのAPI連携の知識なども必要になってくると思います。これに対して、Vibe Codingでは、「チャットアプリを作って」とAIに伝えるだけで、AIがコードを生成してアプリの基本機能が完成します。その後、開発者はAIに「チャット履歴を残す機能を作って」といった追加指示を出すことで、アプリを機能拡張していくことができます。
このように、Vibe Codingを用いることによって、開発スピードの向上やプログラミングの専門知識がない人でもアイデアを形にできる可能性が高まります。

Vibe Codingを行うためのツール
Vibe Codingで使用されるツールとしては、「IDE」、「CLI」、「チャット」の3種類のツールがあります。代表的なものをいくつか紹介します(ツールの詳細については各公式サイト等をご参照ください)。IDE型ツール
Vibe Codingのツールとして最も一般的なのはIDE型ツールではないでしょうか。従来の開発体験の延長としてVibe Codingを行うことができます。多様な生成AIモデルを使えることも特徴です。どれもVisual Studio Code(以降、VS Code)系のツールであるため見た目は似ていますが、実際に操作してみるとそれぞれ個性があることが分かります。■GitHub Copilot (+ VS Code)
AI駆動開発の先駆けであるのがGitHub Copilotです。Agentモードが実装されたことにより、コード一式を確認してREADME.mdを作成することも可能になりました。

■Cursor
VS CodeからフォークされたAIエディターで、こちらも非常に人気があります。@Symbolsという機能があり、チャット画面で@の後にコードやドキュメントを指定して、AIに参照させる対象を細かく指定できます。

■Windsurf
こちらもVS CodeからフォークされたAIエディターです。Cursorと比べるとシンプルなUIが特徴です。プランモードを使用すると、コードを実装するためのタスクをplan.mdに記載します(このタスクは人間が自分で手直しすることも可能です)。

CLI型ツール
ターミナル環境で軽量かつ高速にVibe Codingを実行できることが、CLI型ツールの特徴です。以降に掲載するスクリーンショットのような対話形式だけでなく、スクリプト等による自動実行が可能である点も特徴です。■Claude Code
非常に多くの開発者に利用されているツールです。Windsurfと同じくタスクを整理するところから開始します。Claude Code SDKを用いて、別のプログラムからClaude Codeを用いてコードを生成させるといったことも可能です。

■Gemini CLI
Gemini CLIは、Googleのアカウントでログインすれば使用できます。Google Cloudを使用している方は、代わりにGoogle AI StudioやVertex AIのAPIキーをそのまま使用することもできます。自動化する場合は、パイプや引数(--promptなど)を用いてシェルスクリプトに組み込みます。

チャットツール
チャットツールの場合、チャットのやり取りとAIによる生成物を分離して表示させる機能を使用します。そうすることによって、前のバージョンに戻すといったことが可能になります。使い勝手に大きな違いはないので、個々のコメントは割愛します。
■ChatGPTのCanvas


■GeminiのCanvas

Vibe Codingを使ったアプリケーション作成例
以下は、弊社の新入社員向けAI研修の際に使用したルーレットアプリです。
人間が作成すると丸1日かかっても完成できるかどうかだと思いますが、Vibe Codingを用いると30分程度で作成することができました。ちなみに下記のようなプロンプトを入力し 、生成AIの出力をチェック し、修正内容を入力するというように、Try and Errorを繰り返して完成させました(下記例では12ターン入力しています)。
1. 研修のグループワークで発表するチームを決めるためのルーレットアプリを作ってください
2. そうではなくて、例えば5チームあって、発表をそのうちの1チームにしたいといった使い方です。
3. ルーレットの表示と抽選結果のチームが合っていません
4. ルーレットが黒は地味なので、上にあるチーム名の〇の色と統一したい
5. ルーレットは黒いままですが。。。
6. 生成された成果物の実行中にエラーが発生しました。
getCSSColor is not defined
Can you fix this error in team-roulette?
7. 以下のエラーが再発しました。
ルーレットの表示と抽選結果のチームが合っていません
8. まだ、ずれることがあります。
9. ただしく動かないので、円形ホイールに戻してください。下部の抽選結果のテキストは不要です
10. バージョン9から下部の抽選結果のテキストを削除したものを最新バージョンにしてください
11. ありがとうございました。これをHTMLファイルに埋め込んでください
12. エラーがでました。
Warning: You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
Uncaught Error: Uncaught ReferenceError: lucide is not defined
(その後、12のエラーが解消されたので、最終版としました。)
このアプリは、あくまで研修を盛り上げるための小道具なので、こういったツール類をVibe Codingでさっと作れてしまうのがいいですね。
Vibe Codingの課題と今後の展望
このように「ノリ」でアプリを作れてしまうVibe Codingですが、当然課題もあります。- AIが生成したコードの品質保証やレビューをどうするか
- 生成されたコードはセキュリティ的に問題ないのか
- 複数人で開発している場合、自分以外の開発者が作成したコードや外部連携との整合性は問題ないのか
- AIに完全に依存しすぎると、開発者のコード理解力やデバッグ能力が低下する可能性がある
- 作成したシステムに関する仕様書がないので、保守性が下がる
1~4においては、「AIの生成物に関する責任は人間が持つ」という考え方に則り、AIはあくまでツールの一つと捉え、開発者自身のスキルを維持・向上していることが重要になります。5においても同様に開発者による対応が考えられますが、AWSがKiroというAIエディターで実現している「仕様駆動開発(Spec-Driven Development)」を用いることも一案です。仕様駆動開発とは、コードを生成する前に、要件を定義し、要件から設計書を作成し、設計書から実装のためのタスクを整理して、実装を行うという、AIを設計パートナーとして扱う手法となります。
Kiro
https://kiro.dev/
本記事執筆時点では、ウェイトリストへの登録による順番待ちの状態となっており、試すことができませんでしたが、今後のAI駆動開発のレベルをさらに一段階上げる可能性を秘めていると感じています。
以上、最後までお読みいただきありがとうございました。弊社では、AIに関する研修やコンサルティングも行っておりますので、ご興味がありましたら、ぜひお問い合わせいただければ幸いです。
AIリテラシー教育研修
https://www.dx-consul.co.jp/business/ailiteracykenshu.html
AIソリューション
https://www.idnet.co.jp/service/ai-service-consulting.html
エンジニアによるコラムやIDグループからのお知らせなどを
メルマガでお届けしています。