【ITニュース解説】Vibe Coding!

最近、「Vibe Coding」という言葉が開発者の間で話題だ。これは、AIツールを最大限に活用し、これまでとは異なる新しい感覚で開発を進める手法を指す。システムエンジニアを目指す初心者も、この概念とAIツールの具体的な活用方法を理解することは重要だ。

記事の筆者は、数多くのAIツールを実際に試し、その真の価値と適切な使い方を探求した。目的は、チーム全体の効率を向上させ、AIを開発プロセスに本格的に組み込むことであった。筆者はまず、主要なAIツールを機能別に分類した。

まず、GeminiやChatGPTといった生成AIは、まるで新しい検索エンジンのように機能する。これらは、疑問を解決したり、新しいアイデアを探したり、既存のアイデアを改善したりするのに役立つ。開発の初期段階での情報収集やブレインストーミングに非常に有効だ。

次に、CursorやGitHub Copilotは、開発者の強力なアシスタントとなる。これらは、コードの自動補完や提案、特定の指示に基づくコード生成を行い、開発者が手作業で記述するコード量を削減する。これにより、開発者はより複雑な問題解決や設計に集中できる。

さらに、Figma Make、Webflow builder、Firebase Studioのようなツールは、主にプロトタイピングやフロントエンドの構築に特化する。これらは、デザインから実際のユーザーインターフェース（UI）を素早く作成し、アイデアを視覚的な形にするのを助けるツールだ。

そして、Claude Codeは、より広範な開発タスクを自動化する強力なツールだ。このツールはプロジェクトファイル全体をスキャンし、必要なコンソールコマンドの実行など、開発作業の多くを代行できる。Dockerの稼働状況やNode.jsのバージョンなども認識し、状況に応じた処理を行う能力を持つ。

筆者はこれらのツールを実世界のタスクで検証するため、チームの課題リストから4つのタスクを選んだ。

最初のタスクは、5年前のAPIプロジェクトのAWS-SDKをバージョン2から3にアップグレードし、新しいドキュメントを作成することだった。この種のタスクは創造性をほとんど必要としないが、システムの安定稼働のために避けられない重要な作業だ。筆者はこのタスクにClaude Codeを用いた。Claude Codeはプロジェクトファイルを読み込み、わずか5分で詳細なドキュメントを生成した。さらに、AWS SDKのアップグレード作業も、関連する複数のファイルを自動的に修正し、必要なパッケージのインストールまでを30分で完了させた。これは手作業であればはるかに多くの時間を要する作業で、AIがいかに非創造的ながらも重要なタスクを効率化できるかを示している。

二つ目のタスクは、Node.jsとHandlebarsで開発された社内ツールの、再現性の低いバグを修正することだった。筆者はここでもClaude Codeを活用し、バグの状況をツールに伝えた。Claude Codeは関連ファイルを修正するが、最初は別の問題を引き起こすこともあった。そのため、筆者は変更点をテストし、フィードバックをAIに返すという反復的なプロセスを繰り返した。結果的に1時間でバグは修正され、筆者は一行もコードを書くことなく問題解決に貢献できた。筆者はこの作業を自分で行う場合と比較したが、AIなしでは1時間で解決できなかっただろうと結論付けている。この事例は、AIが単独で全てを解決するのではなく、人間と協力することで、より複雑な課題にも対応できることを示す。

三つ目のタスクは、クライアント向けの製品カタログAPIのデモを開発することだった。これには、既存のAPIと連携するCRUD機能を持つフロントエンドと、小売店のような見た目の製品詳細ページが必要とされた。筆者はこのタスクに少なくとも40時間かかると見積もっていた。ここでは複数のAIツールを組み合わせる戦略が取られた。まず、Claude Codeに詳細な要件を伝え、他のAIが理解しやすいようにプロンプト（指示文）を作成させた。次に、CRUDフロントエンドの開発にはFirebase Studioを、小売店製品ページの開発には別のAIツール（Bolt）を利用した。これらのツールで基本的な部分が生成された後、筆者は生成されたコードをローカルにダウンロードし、GitHub Copilotを使ってさらに詳細な機能（例：画像アップロード機能）を追加していった。GitHub Copilotを使う際のコツは、一度に多くの指示を出すのではなく、段階的に細かく指示を出すことだった。このタスクは、当初の見積もり半分の20時間で完了し、すぐに実運用可能な状態になった。この事例は、複数のAIツールを戦略的に組み合わせ、人間の開発者が的確に指示を出すことで、複雑な開発タスクを大幅に短縮できることを示す。

最後のタスクは、意思決定ロジックとフォームを備えたランディングページを開発することだった。これは完全にフロントエンドの作業であり、既存のブランドガイドラインに従う必要があった。筆者はこのタスクにFigma Makeを使用し、まさにこれが「Vibe Coding」の真髄だと感じたという。Figma Makeは、要件を伝えるだけでReactプロジェクトを生成し、完全に動作するランディングページを構築した。さらに、既存のウェブサイトのURLを貼り付けることで、そのデザインをコピーすることも可能だった。生成されたコードをダウンロードし、Cursorを使ってプロジェクトをDockerコンテナ化し、必要なテキストを置き換えるだけで、わずか4時間で最初のバージョンが本番環境で稼働した。クライアントは、実際に動作するページをすぐに試すことができ、フィードバックを返すことができた。これは、デザインプロトタイプ作成よりも効率的で、迅速なMVP（Minimum Viable Product：最小実行可能製品）の提供を可能にする。

筆者はこれらの経験を通じて、「Vibe Coding」が何を意味するのかを理解した。それは、AIツールを駆使して、信じられないほど短い時間でプロトタイプやMVPを開発する能力のことだ。特に、新しいアイデアを素早く形にし、市場や顧客の反応を迅速に確認したいビジネスにとって、このアプローチは非常に強力な武器となる。システムエンジニアを目指す初心者も、AIツールが開発プロセス全体を根本から変革する可能性を認識し、その活用方法を学ぶことが、これからのキャリアでますます重要となるだろう。