Zenn
🦾

Vibe Codingでコード書かずにどこまで出来るかを試してみた

に公開
AI
tech
Cursor
Gemini
Vibe Coding
tech

こんにちは、フルスタックエンジニアをしているkiyoです。
これまでフルスタックエンジニアとして15年ほどやってきましたが、最近は生成AIの進化が凄すぎて、フルスタックであることの価値がおびやかされつつあるなと常に危機感を感じて生きています。

最近では、業務でもプライベートでもAI駆動開発が基本になっているため、生成AIが無い頃の開発体験にはもう戻れないなーと日々感じていると、やたらとVibe Codingというワードを目にする機会が増えてきました。実際に体験してみて、色々と気づきがあったので記事にまとめます。

Vibe Coding って何

色んな記事で紹介されているので詳細は省きますが、
OpenAIの共同設立者であるAndrej Karpathy 氏が提唱した新しいコーディングスタイルです。
https://x.com/karpathy/status/1886192184808149383

バイブスに完全に身を任せ、指数関数的な処理を好み、コードの存在すら忘れてしまうようなコーディングです...

つまりこういう事


(ネタ元: https://news.mynavi.jp/kabu/bakakabu/)

完全にAI任せでどこまで出来るかを試したい

今回、Vibe Codingを試していくためのポイントとして以下を意識しました。

  • 自分ではコードを一切書かない
  • コーディング初心者でも出来るか

Xなどでよく、コーディング初心者でもVibe Codingならサービスが作れる！と耳にするので、初心者でも簡単に作れるのかという視点でも検証してます。

何を作る？

Youtube動画の要約サービスを開発します。

最近は技術系の情報をYouTubeで見ることが増えてきたのですが、動画が長すぎると早送りや飛ばして見たりすることが良くあります。
また海外圏の技術者が最新の情報をいち早く公開していたりすることがあるのですが英語が全くダメなので、Chromeの拡張機能などで翻訳しながら見たりすることがありました。
ただ、このサービスの体験があまり良くなく、他にいいサービスは無いかなーとちょうど思っていたので今回開発するサービスとして選定しました。

環境、技術について

今回、Vibe Codingする上で選定した環境や技術については以下の通りです。
これはGeminiと一緒に要件定義を進める中で決めています。私が指定したのはRemixとGCP,Terraformでインフラ環境作ってと指示したくらいです

### 技術スタック
フロントエンド/バックエンド: Remix
ホスティング: Google Cloud Run
認証: Firebase
データベース: Cloud Firestore
インフラストラクチャ: Terraformで定義
AIモデル: Vertex AI API　※要約や文字起こしの整形に使用

### 開発環境
生成AI:Gemini（Deep Research with 2.5 pro） ※最初の要件定義や実現可能性・競合調査に使用
AIエディタ: Cursor (claude-3.7-sonnet, gemini-2.5-pro)

開発フロー

前準備からすべてAIと一緒に行っています。調査や要件定義フェーズではGeminiを利用しています。
早く実装に着手したいところですが、いきなり実装を指示してもうまく行かないことが多いので、まずは落ち着いて、事前調査~設計のフェーズを実行していきます。

1.実現可能性調査、競合調査（Geminiを利用）

作りたいサービスが実現可能かどうか、競合のツールはあるのかどうかをGemini Deep Research with 2.5 proに調査してもらい、レポートとしてまとめてもらいました。
スマホにもGeminiをインストールしているのですが、出先でも調べたい時にタスクを投げるだけで、いつの間にか調べて、調べ終えたら通知してくれるので非常に体験が良いですね。
ChatGPTもDeep Researchがありますが、Geminiの方が調べてくれる情報源の数が多い気がします。
この調査で競合が比較的多い事が分かりましたが、今回の目的はあくまでもVibe Codingの体験なので特に気にせず進めます。
ここで、サービスを作るならどんな名称がいいですか？とgeminiに質問して候補をいくつか出してもらいました。今回はその中からいい感じのサービス名を選んでいます。
多分このフェーズが一番楽しかったです。

2.要件定義（Geminiを利用）

実際の開発に進む前に、Geminiに出してもらったレポートをコンテキストとし要件定義を進めました。業務ではClaudeを利用することが多いのですが、いつもと違うツールを使ってみたいという気持ちと、Gemini（特にDeep Research）の体験があまりに良かったのでそのままGeminiを利用することに。
要件定義では以下をマークダウン形式（*.md）で出力してもらっています。

  • プロジェクト概要
  • 対象ユーザー
  • 主要機能
  • 技術スタック
  • 主要ワークフロー
  • データモデル (Firestore)
  • API利用詳細
  • 認証と認可
  • 環境変数とシークレット
  • エラーハンドリング
  • UI/UXに関する考慮事項
  • AI (Cursor/Gemini Pro) への具体的な指示

3.技術、環境選定（Geminiを利用）

これも要件定義の中で一緒にやってますが、GCP（Google Cloud Platform）のサービスに絞って改めて技術選定をしてもらいました。また、フロントエンド/バックエンドに関してはmonorepoを採用したかったのと、あえて新しめの技術であるRemixを選択しました。
（生成AIは枯れたフレームワークの方が得意と聞いたことがあるため新しめの技術でも対応できるのかの確認の意味もこめて）

ちなみに、monorepo（複数のプロジェクトやサービスを1つのリポジトリで管理する手法）を採用しているのは、AIエディタにドキュメントやプロジェクト全体を俯瞰で見てもらうためです。

4.AIエディタで事前準備（Cursorを利用）

ここからが実際の開発フェーズに入ります。
まずはプロジェクト用のディレクトリを作成し、要件定義のフェーズで作成してもらった*.mdファイルを「specification.md」という名称でdocsディレクトリに格納します。

プロジェクト名
 ├─ .cursor
 └─ docs
     └─ specification.md

このspecification.mdをCursorのChatにて @Add contextで読み込ませて指示を出していきます。

5.環境構築（Cursor, GCPを利用）

最初にGCP環境を構築したかったのでTerraformを使ったIaCをinfraディレクトリに作成してもらいました。その後、実際にターミナル上でコマンドを実行してもらい、Terraformを用いたGCP環境の構築を進めていきます。ターミナル操作もAIが行ってくれるので、人間は指示出しのためにチャットするのと、実行ボタンをポチポチするくらいで済みます。（GCPなので Google Cloud CLI のインストールから実行まで勝手にやってくれる）

6.AIエディタでの開発（Cursorを利用）

事前準備~環境構築が完了したら、後はCursorなどのAIエディタでAIと対話しながら開発を進めていきます。一番最初の指示は以下の感じにしています。

要件定義書の情報を元に、Remixの構築を行ってください。
その後は主要ワークフローをベースに実装しやすい手順で実装を進めてください

細かい気づきは後述しますが、ここからはAIにどれだけ的確な指示を出すかでスムーズな進行が出来るかどうかが決まります。色々バグやうまく行かないことが発生しますが、頑張ってAIに指示だけを出して自分ではコードを書かずにサービスを完成させていきます。一番つらかったのがここのフェーズです。
CursorはAIが出力したコードを差分チェック出来るので、何かおかしい実装をしていれば何度か出力しなおすことが出来ます。（俗に言う「ガチャ」）
後は、AIが出力したコードを適用するとエラーが出てしまうことがありますが、その際もFix in Chatという機能でエラーを修正させることが出来ます。

7.AIエディタでのデプロイ（Cursorを利用）

ローカルで実行が確認出来たら、GCPにデプロイするための準備を行います。
これも5.環境構築 でも記載しましたが、ターミナル操作をAIが行ってくれるためイメージ生成＆Push～デプロイまでも一括で行ってくれます。とてもありがたい。

どんなサービスが出来たか

まだ実装途中の部分もありますが、ひとまず動くものが出来たのでリリースしています。

https://taipatube.com/

YouTube動画のURLを入力するだけで、AIが内容を要約＆チャプター生成出来るサービスです。
現在は、Googleアカウントさえあれば誰でもサービスを体験できます。
※現時点では長い動画などは失敗します。後ほど生成制限、機能追加、バグ修正などを行う予定です。

結論: Vibe Codingはどうだったか？

気づきに行く前に、先に結論を記載します。
まずVibe Codingは体験としてかなり面白かったです。また、AIだけでここまでサービスが作れるのかというのはかなり衝撃でした。Xとかだと本格的なサービスというよりテトリスやオセロみたいな簡単なゲームを構築した例しか見たことが無かったので、ここまで出来るんだ…と面白さを感じるとともに、生成AIの進化に驚きました。

ただ、この後記載しますがエンジニアスキルが少しでもないと初心者がサービスを作り上げることは難しいと感じています。
特に、エラーが発生した時にどのように解決させるかはエンジニア経験が無いと難しく、延々とエラーを解決し続けるという無限ループに陥る可能性があります。
また、今回はAIエディタでCursorを利用しましたが、コーディング初心者の方は、Replitなどのコーディング～デプロイまでを一括で行ってくれるバージョン管理付きのツールを採用した方が良いと感じました。

開発までの期間

自分で書いたコードはほぼゼロ（env設定や一部の手動修正など以外）でAIだけで短期間で開発が出来るのは純粋にすごいなと感じています。
1日にかけた時間は2~3時間なので、トータル20時間弱でデプロイまで完了しています。
（実はどうしても解決できない詰み状態に2回陥り、同じサービスを3回作り直しているので、うまく行けば 5/1の時点（10時間未満） で終了しています）

  • 4/29: 事前調査、要件定義スタート
  • 4/29: 要件定義
  • 4/29: 環境構築
  • 4/30 ~ 5/1: 実装
  • 5/1 : 初回デプロイ
  • 5/1 ~ 5/5 : 追加実装
  • 5/6 : 再デプロイ

コードを書いていない＆ほとんどコードを見ていないので、コーディングスキルは全く上がった感じはしませんが、AIに対する指示の出し方についてはコツがつかめた気がします（特にバグの修正の仕方など）
また、CurosrはAIモデルを選べるのですが、今回はClaude-3.7-sonnetとGemini-2.5-proを切り替えて構築しています。
普段はClaudeを使うことが多いのですが、Gemini-2.5-proもかなり良くなったという話を聞いていたのでコーディングにも使えるのかを確認しています。
Gemini-2.5-proはコーディングでも使えますが

  • バグ修正の難しさ
  • コメントが汚い
  • 変なところで頑固
    という点がClaude-3.7-sonnetと比べると弱いなと感じました。

Vibe Codingでの気づき

まだ開発中なので気づきポイントがまとめ切れていないのですが、現時点で気になる点を記載します。
普段開発していると当たり前なのですが、特にバージョン管理はめちゃくちゃ大事です。
コーディング初心者でVibe Codingをやってみたいという人はバージョン管理の仕組みだけでも覚えた方がいいです。マジで。

すべてAI任せのコードは無駄なコメントが多い？＆未使用変数が多い

業務ではClaude-3.7-sonnetを利用しているのと、Cursor Rulesを設定しているので気にしたことが無かったのですが、Gemini-2.5-proはコメントがめちゃくちゃ多いです。何故か★マークがついていることが多い...

一例（こういうのがいたるところにある）：

{/* 右側: ユーザーメニュー/ログインボタン */}
        <div className="flex items-center space-x-4"> {/* space-x-3 から space-x-4 に変更して間隔を調整 */}
          {user ? (
            <>
              {/* ★ 要約履歴リンクをアバターの左に配置 */}
              <Link 
                to="/history" 
                className="text-sm text-slate-300 hover:text-cyan-400 transition-colors"
              >
                要約履歴
              </Link>

また、おそらく実装を進める中での漏れだとは思いますが、未使用変数や関数が多いです。
これはGemini-2.5-proの素のコードだからなのかどうかわかりませんが、Rules設定は重要だと感じました。

バージョン管理の重要性（一番大事）

バージョン管理、マジで大事です。コーディング初心者の視点で検証したかったのでバージョン管理を無視して開発していきましたが、AIが破壊的な変更を行ってしまったときに前の状態に戻したいと思う事が何度も何度もありました。前述しましたが、詰み状態に2回陥り、同じサービスを3回作り直しています。

IaC（Terraform）

何故かシークレット管理用のresourceだけreplicationの設定のエラーが解決できない現象が起きました。automatic = true だとエラーのままだったため、手動修正しています。

replication {
+    auto {} # 自動レプリケーション
-    automatic = true # 自動レプリケーション
}

変なところで頑固（特にgemini-2.5-pro）

こちらが出した指示を守らず勝手に解釈してコードを書いてくることがありました。一例ですが、
Vertex AI のモデルに gemini-2.0-flash を使ってほしいのに、かたくなに前バージョンを使おうとしてきました。おそらくカットオフ日が関係しているのだと思いますが、どれだけ修正指示しても勝手に過去バージョンに書き換えて、実行してみてエラーがでて手動で修正するという事が何度もありました。（手動で変更した値などについてはAIが認識できない可能性があるらしく、それが関係しているのかもしれません）

その他、ロジックに関しても似た様な現象が起きたので、geminiが頑固過ぎるのか、もしくはこちらの指示出しが悪いのかもしれません。

メモリーバンク重要（Cursorには無い機能）

VSCodeの拡張機能にClineというAIエージェントコーディングツールがあります。
Clineにはメモリーバンクと言ってコンテキストを長期的に維持する仕組みが採用されています。
今回、開発にはCurosrを利用したのですが同じチャットを利用しすぎると過去のやり取りを忘れてしまったり、修正時のコードに反映されていないといったことがあります。
ClineやWindsurfにはメモリーする機能が標準でついているのですが、実はCursorにはありません。
なので、やり取りが長くなると一度引継ぎ用のプロンプトを作成して、*.mdファイルとしてどこかに保存し、新しいチャットに引き継がせるというようなやり方があります。
正直めちゃくちゃめんどいので公式で機能実装されるのを待つか、Windsurfに乗り換えるのも手かもしれません。

まだ開発途中であるため、他にも追記を予定しています。

まとめ

Vibe Coding初めてやってみましたが、かなり面白い体験でした。
コードを書いていないのにどんどんサービスが出来る様子はまるで魔法の様でした。
業務利用も価値があるかもしれませんが、どちらかというとプライベートでの個人開発がかなりはかどるイメージを持っています。
作りたいサービスのアイディアがあれば、AIに壁打ちから実装まで依頼出来ることが分かったので、他にも様々なサービスをVibe Codingで開発してみたいです。

Vibe Codingにコーディングの基礎は必要かという議論がXで行われていたりしますが、
コーディングの基礎は必要だと感じています。
特にエラー修正については知見が無いと解決できないパターンが出てくるので、その時にどうやって解決するか方法論を思いつくにはコーディングの基礎知識などは必要になってくるかと思います。
それすらAIに確認するという方法で解決できるのかもしれませんが、AI時代におけるエンジニアスキルは無駄にはならないはずです。
Vibe Codingでコーディングを学ぶという事も出来るはずなので、興味があるならまずはやってみるが良さそうですね。

Discussion