初めに
こんにちは。SESとして色んな企業でエンジニアリングマネージャーをやっている者です。
プログラミング歴？大学時代にRubyを少しと2社目で入った会社で半年ほど。。。それ以外は基本的にマネジメント中心のキャリア形成なので、コードなんてほぼほぼ書いたことありません。
そんな私が「Vibe Coding」という手法で社内ポータルサイトを作ることになった話をします。
なぜ作ることになったのか
私の案件が終了し、暇な時期になった時のこと。社長からこんなポータルサイトがほしいなと要求整理までしたメモを見せられ、「作ってよ！」とのこと。他のメンバー1人とともに二人三脚で作ることになりました。
うちの会社では今まさにAI駆動開発に力を入れている時なので、Vibe Codingならコードが書けない私でもなんとかなるかもと勉強がてら手を出してみることにしました。
Vibe Codingとは何か
バイブコーディング（Vibe Coding）とは、AIに自然言語で指示を出すことでコード生成を行い、仕様よりも“ノリ”や直感を重視して開発を進める新しいスタイルのソフトウェア開発手法です。
この言葉は、OpenAI共同創設者であり元Tesla AI責任者のAndrej Karpathy氏によって2025年初頭に提唱されたもので、彼はこの開発スタイルを「コードを書くのではなく、AIに話しかけて書かせる」「雰囲気で進める開発」として紹介しました。Vibe Codingは、厳密な設計や仕様に基づくのではなく、対話と感覚でスピーディにプロトタイプを構築することを可能にします。
引用：https://www.ai-souken.com/article/what-is-vibe-coding
要はAIを使って雰囲気（Vibe）でCodingすることやな！！！
使った技術スタック
もう一人のメンバーに助力してもらい、以下の構成で作ることにしました：
フロントエンド: Next.js + Tailwind CSS
バックエンド: Nest.js
ORM: Prisma
データベース: PostgreSQL（Neon）
認証: Firebase
ストレージ: Firebase
AI: Dify
デプロイ: GCP
「全部わからん」と思いましたが、「まあやってみよう」というVibe。
実際の開発プロセス体験記
Week1：要求理解・要件定義でいろんな意味で泣く
要求はメモに書かれていたので、それを元に本来ならば想像を膨らませる必要がある。が、この部分を丸ごとClaudeに整形してもらい、それをv0に突っ込んで画面モックを吐かせてみました。そうしたら、視覚的に機能がわかるので、要求理解のスピードがとてつもなく早かったです。すでに生成AIのすごさに驚きました。泣きました。
それを元に、機能単位でチケットを切り出し、開発スタートさせました。
私はまず、画面をCursorで画面モックをいじりながら、見た目を完成させて、それから要件定義として社長にレビューを受けようと思いました。が、ここでつまづきました。
従来の開発では：
- 要件定義
- 設計
- 実装
- テスト
という流れをイメージして当てはめようとしましたが、Vibe Codingでは：
- なんとなくのイメージ
- とりあえず作る
- 使ってみる
- 気に入らないところを直す
- 繰り返し
という感じで、ものすごいスピード感で開発するものでした。
モックの段階では技術的にできるの？とかここはどうするの？とか会話量が増えるのですが、こと今回のプロジェクトにおいては、できたものから見せる方が圧倒的に早くて会話量が少なく済みました。なぜなら、技術的な理解が追いついていない私にとって、モックの段階では応えられない質問が多かったのに対し、テーブル定義から何から動いているものを見せれば説得力が全く違ったのです。
この認識の差から初週はつまづきました。泣きました。
Week2：機能実装に慣れてきた
Week1でつまづいたので、大きく方針転換し、さっさと機能実装をしていきました。
開発の流れとしては、
- v0を元に画面モックをメンテナンスする（もちろんVibe Codingで）
- 画面モックを元にCursorにテーブル定義してもらう（ちょっと手作業でメンテする）
- テーブル定義に基づいてCRUD処理するAPIを作成してもらう
- APIの変更をAPI仕様書に反映してもらう
- フロントにそのAPI仕様書をコピペして読んでもらい、繋ぎ込んでもらう
- 動作確認して気に食わないところを修正してもらう
という感じで開発していきました。
途中でエラーが出てもそれをコピペして「修正お願い」とするだけで直るので、本当にすごいですよね。
やっていることは指示しているだけ、まるでフロントエンジニアとバックエンドエンジニアと共同作業しているような感覚にもなってきました。
Week3：ガンガン機能実装する
もうここまで来ると感動も薄れ、平然と作れるっしょ！という雰囲気でガンガン機能実装をしていきました。週で計算していたチケット消化量も大幅にアップ！嬉しい！
Week4：大規模にリファクタリングする
機能も充実してきたところで問題ができました。通知機能です。通知機能を実装するにあたり、通知を押下したら該当のページに飛ばしたいという気持ちになってきました。ただ、現状のサイトでは1ページ内にタブで機能を切り替える方式でデザインしていたため、該当ページに直接飛ぶというのがなかなか難しい。さらにそのタブ実装にしていたために1ページあたり2900行ものコードに膨れ上がっていたページもありました。
ということで、まずは、大規模リファクタリングとして、タブ切り替えでの画面生成をやめて全て別ページ化していきました。
普段なら開発終盤で大規模デザイン改変なんてしようものなら絶望必至なのですが、Vibe Codingなら何のその。涼しい顔で「別ページに切り分けて」と言えばあっという間にやってくれるのです。動作確認には時間をかけましたが、それでも1日あれば終わるくらいの作業量です。劇的に工数が縮んでいる感覚がありました。
完成したポータルサイト
最終的に以下の機能を実装しました：
- MVV画面：会社のミッション・ビジョン・バリューを確認できる
- 年次目標・四半期OKR画面：会社の年次目標・四半期OKRを確認できる
- 提案作成・履歴画面：会社への提案ができる。AI評価機能つき！
- AIチャット画面：会社の規則などAIにチャット形式で質問できる
- 管理画面：上記の機能を管理者ロールのユーザのみ管理する画面
私が感じたVibe Codingのメリット・デメリット
メリット
- とにかく早い: 細かい設計をしないので、スピード感がある
- 完璧主義に陥らない: 「とりあえず動けばOK」の精神
- 楽しい: 成果がすぐ見えるので達成感がある
- 初心者でも成果が出せる: AIが主導してくれるので、コードが書けなくてもなんとかなる
デメリット
- 技術的負債が溜まりがち: リファクタリングが必要
- セキュリティ面での不安: 知識不足による脆弱性
- 保守性が低い: 後から読むと「これ何やってるんだっけ？」
- 知識の定着の懸念: AIに任せすぎて自身の知識の定着がしづらい
学んだこと
- AI駆動のスピード感に圧倒した。時代の変化がすごくよくわかった
- なんちゃってではあるが、アジャイル開発を体験できた
- 動いているものを見せるという価値のデカさを感じた
最後に
Vibe Codingという手法で、マネジメントしかやってこなかった私でも、それなりに動くWebアプリケーションを作ることができました。
完璧ではないし、プロダクションレベルのコードとは程遠いですが、「まずは作ってみる」ことの価値を実感しています。
マネージャーの皆さん、たまには手を動かしてコードを書いてみませんか？開発チームとの距離がグッと縮まりますよ。
そして、開発チームの皆さん、マネージャーがコードを書き始めても温かく見守ってください。きっと、お互いの理解が深まるはずです。
Discussion