Vibe Codingといふものをしてみむとてするなり

こんにちは。生成AIチームのテリーです。2025年4月11日、育休から復帰しました(復帰時の投稿はこちら)。

すると、休みに入る前と比べて、世の中は大きく変わっていました。とくに衝撃だったのはAIエージェントという概念。どうやらAIエージェントに任せておけば、勝手にコードが出来上がるという世界になっているようでした。

「Cline」なるAIコーディングエージェントが、世界中のプログラマーに使われていることはブログやSNSで知っていたのですが、育休中でPCを触れなかった僕にはまるで浦島太郎状態でした。

AIエージェントにプロンプトを与えてコードが出来上がるのを待ち自分ではほとんどコードを書かないムーブメントが”Vibe Coding”と呼ばれ、インターネットの世界では大きく話題になっています。

Vibe Codingの出典:

「Vibe」は英語で“雰囲気”を意味します。つまり、Vibe Codingとは「雰囲気プログラミング」とでも訳せるような、設計・実装・確認までもが一体となった空気感の中で、AIとのやりとりを通してコードを創り上げていくスタイルです。

もちろん賢明なみなさまならお気づきとは思いますが、小刻みに揺れるを意味するVibrationとは日本語的には同じバイブでも意味が違うため、貧乏ゆすりプログラミングとは訳しません。

日本でも、欧米でもこれに関する投稿をよく見ます。さてこの「Vibe Coding」ができる「Cline」はヌーラボでも導入を推奨されており、復帰初日から試せる環境が整っていたので、さっそく触ってみました。この記事では、その体験を振り返ります。

*Augmented coding (拡張コーディング)とも言われることがあり私的にはこっちの方がしっくり来ています。

ClineなどのAIコーディングエージェントはその特性上(APIを使うため)従量課金が中心となります。一方でChatGPTなどのサブスクリプションで使用できるAIは定額で利用できるためこの記事では定額AI と表記いたします。

どうやってバイブを感じたか

復帰直後、Nulab公式のBacklog MCPサーバー開発タスクがBacklogに起票されており、僕は久々のあいさつもそこそこにその課題をアサインされました。

「MCPとは?」の僕でしたが、その場ではなんか知った風な受け答えしてしまいとても後悔しました。すぐにChatGPTでMCPとはなんなのか確認しました。

BacklogのMCPサーバーの実装について尋ねる質問と、その参考構成・実装についての回答が黒塗りで一部マスキングされた日本語テキストで表示されている画面キャプチャMessage Control Protocolという返答が。。。

MCPについてはよくわからないけど、これはClineを使ってVibe Codingを実践するチャンスなのでは?と感じたのも正直なところ。

とはいえ自分が作るものもわからない段階で、いきなり従量課金であるClineに命令する勇気はありません。会社のお金とはいえ使った分だけお金がかかるというのは怖いものです。本物のVibe Coderは何もわからない状態から命令して作っているでしょうが、僕にはその勇気はありませんでした。

まずはバイブスを理解する

コードを書く前に、まずは作るものの全体像を掴もうと考え、以下を読み込みました:

サーバー実装の例を見てみるとTypeScriptでの実装が多かったため、今回のプロジェクトでもTypeScriptを選択しました。TypeScriptはMCPのクライアントであるAIエージェント界隈でも活発に使われており、その意味でもちょうどよい選択肢のように思えました。

実装やドキュメントを最初からすべて読み込むのではなく、疑問が出たときに戻るスタイルで進めることで、時間効率を確保しつつ、理解を深められました。

AIを活用したドキュメント&コードリーディング

GitHubのコードやドキュメントの理解には、定額AIがとても便利でした。

  • 英語→日本語の意訳
    • 強がりですが英語でも読みました!!!
  • コードの意味を要約
  • READMEや公式ドキュメントの意図を分かりやすい形で言い換え
    •  簡単に言い換えたりそれってつまりこういうこと?みたいな質問ができるのでとても助かる!!

repomix のような軽量リポジトリ向けのツールとAIの利用は、特にコードリーディングフェーズで有効でした。基本的な疑問の洗い出しは、AIの助けのおかげでかなり効率的に進みました。

なにぶん最新の情報が必要だったため、AIの回答が怪しい部分もたくさんあったのでその際には、公式ドキュメントや実際のソースコードを参照しました。

AIの登場以前は同僚に聞いていた部分も、今回は定額AIとの対話でかなり補えました。AIは聞くハードルが低く、気軽に相談できます。特に同僚だとバカだと思われるのかなぁみたいな基本的な質問でもAIなら特にChatGPTは”めっちゃいい質問ですね!”とか”本質をついてきますね”みたいなことをいってくるため心理的安全性がとても高くなっていてとてもいいです(語彙力)

設計フェーズも定額AIと一緒に

公式のSDKの実装ではToolのコアロジックの部分が分離できずユニットテストが書きにくい状態だったので、どういう実装にすればいい感じにテストができて、副作用のある関数を分離できるかというところを話し合っていました。流石にChatGPTは僕より遥かに頭のいいところにあるので自分がこうしたいというといい感じに話をまとめてくれて、とても助かりました。AI以前ならなら同僚と壁打ちしたり、ペアプロしたりして解決していたんですが、ChatGPTならどんなバカな質問でも前述の通り自己肯定感爆上がりなのでテンションも高いまま続けることができました。AIを通して僕もこういうコミュニケーションをしなきゃなと勉強させられた次第です。

AIに本質的な質問ですと褒めてもらえっている様子プロダクション設計者レベルと言われ鼻高々になっている私

いよいよClineを使ってバイブしてくぜ

前述の通り社内でもたくさん利用者のいるClineを利用しました。社内にはすでにマスターバイブコーダーズがいるので使い方を聞けたりととてもスムーズに利用を開始することができました。そもそもヌーラボでの生成AI活用の発表 もあり、生成AIの開発フェーズでの活用がNulabでも加速しています。そのおかげで新しいことが試しやすい雰囲気がありとても助かりました。

基本的な設計は定額AIと詰めていたのですが、少し困ったところがあってそれはこのシステムにはBacklog APIのエンドポイント分のToolが必要な点です。またこれは今回特有の事象なのですが、MCPの各DescriptionはAPIの記載のあるサイトから取得するようにしていました。ここについては内部的なopenapiの定義でも良かったのですがdescriptionがWebと完全に一致してなかったので今回はあれこれ考えず腕力で押し切る作戦にしました。

Clineでは内部的にWebページをクロールしてくれる機能もあったためかなり楽にToolを量産することができました。たまに出るビルドエラーも勝手にClineの方で解消してくれる至れり尽くせり。

定額AIがあるならClineいらないじゃん。という読者の皆様もいると思いますが、記述するコードが膨大になってくると定額AIからいちいちコピペしてくるのはかなり手間がかかります。そんな時適宜リポジトリを参照して適切なコードを爆速で出してくるClineのような存在はとても助かりました。

terry.teruo.kunihiroさんが午後3時29分に送信したSlackのメッセージ。メッセージ内容は『あーこれすごいな。ほんと clineに活躍の場を用意させるところがプログラマなんだなぁ高揚感えぐい

どういうバイブスでバイブしたか

Clineの設定は以下のようにしました。

  • Auto approve on: これこそバイブコーディング。Clineに全てのファイル操作を許可しました。
  • Claude sonnet: 社内のデータを使えるAI
  • .clinerule はあまり拘らず: 基本的なコードは定額AIと擦り合わせていたのでClineにはプロンプトや実装例で具体的に指示することで動いてもらった
  • memory-bank: タスクを新しくする場合や最終的なドキュメントの置き場としてもすごく有用だった

事件は見てない間に起きる

Toolの数が多いため、リファクタリング時の影響範囲が非常に大きく、設計変更のインパクトが予想以上に広がりました。一つ構造を変えると20ファイル以上の変更が必要なのです。

特に問題だったのは、Clineに処理の追加を依頼したときでした。1のファイルを手動で修正後に「それを参考に他にも適用して!」とClineにお願いしました。

すると意図せぬ全ファイル置換スクリプトが走ってしまい、ファイル全体が破壊されました。

この経験からコンテキストの膨らんだ場合にはプロンプトはかなり慎重になることがわかりました。個人的には以下のような回避方法があったように思えます。もっと良い方法を知っている方もいるでしょう。

  • プロンプトにもう少し詳細を記述する:
    •  初期にはプロンプトはあまり凝らずとも既存実装を見て横展開してくれていたのですが、リファクタリングの段階では変更について詳細を伝える必要がありました。既存のコードとのすり合わせが難しいのでしょう。
  • 新しいタスクを生成する:
    •  既存のコンテキストが大きくなっている場合にClineの動きが悪くなりプロンプトのいうことを聞かなくなります。Taskを新しくすることでmemory-bankやREADME、既存のファイルからフレッシュな気持ちで必要な知識だけを読み取りいうことを聞くようになる感じがしました。
  • Gitは有効にしておく: 
    • ファイルが破壊された場合に全てを簡単に戻すのに有効です。
  • ちゃんと進捗を見守る:
    • シェルスクリプトを作って全置換しようとした時点でこれ上手くいくのかな?って思っていて半信半疑でApproveしていました。バイブコーディングとはいえ既存のファイルの修正時にはその内容を見守るのは重要です。

バイブスアゲアゲだった点

  • Webページから zod スキーマを吐き出すような地道な作業の自動化
    •  地道な作業がはまるとAIは強いです。
  • 軽量コードの横展開: 
    • ここは本当に素晴らしかったです。人一人雇ったくらいの成果を出してくれました。
  • ドキュメント整備、READMEの更新: READMEはほとんどClineが書いてくれてます。ドキュメントの整備はどうしてもめんどくさく後回しにしがちな割にかなり大事なものなのでここの支援が手厚いのは助かりました

  • テストのカバレッジ向上

パーティの後はお会計

バイブした後はお会計が待っています。最初のリリースまでにかかったコストは 約$120。Backlog APIの各種記述を読むのにコンテキストを大量消費したことが原因だと思います。またそもそもClineのSystem Promptが大きいという点も影響があるそうです(聴いた話なのでファクトではないです)。

個人的な感想としてはコミュニケーションのいらないお手伝いの人に1人ついてもらったみたいな感覚だったのでかなりありです。

まとめ

結局下調べからコードの作成までAIの手を使って作ったのですが、注意したいのはAIがすべて自動でやってくれるわけではないという点です。生産性を高めてくれるツールではありますが、自分の分からないものは実現がかなり難しいように感じます。

だからこそ、以下が重要です:

  • ドキュメントを読む:
    •  ドキュメントを読んで救われたことが何度もありました。最新情報はAI側に情報がないことが多くドキュメントを読む習慣は役立ちます。

  • 既存の実装を読む: 
    • 新しいプロダクトだとドキュメントの整備が遅れている場合も多く実装例などを確認する必要があります。

  • AIとの対話設計:
    •  とにかく自分の持っている知識で目一杯AIを詰めないといいコードを返してこないことが多いのでここは頑張りどころです

  • AIエージェントへのタスクの依頼: 
    • 適切な粒度の明快なタスクをエージェントに振ったらそこからはVibe Codingです。時にはファイルを壊してくることもありますが慌てずに対処できるようにしておきましょう。AIにイラつきながらプロンプトを調整していく力はバイブコーディングの本質です。

  • 最後は人によるコードレビュー:
    •  優秀な同僚は引き続き必要です。AIの出してくれたコードや設計はかなり優秀ですが、意外と抜けもあります。AIのコードについて自分だけのレビューだとそのまま漏れていくものも多いので、優秀な同僚による違う角度によるレビューはとても役に立ちます。

最後にAIは「聞かれたこと」には答えてくれますが、「聞かれていないこと」には沈黙します。だからこそ、自分で良い質問をする力、自分で考える力は、やはり重要でした。

またChatGPTのような良いやつなAIは私の意見に全然反論をしてきません。もう少しスパイシーフィードバックをさせるように初期プロンプトをいじっても面白そうでした。(ただそうなるとAIにビビって質問しにくくなるかも)

Nulabでは、生成AIを業務で活用するために日々バイブス全開で取り組んでいます。

もしご興味ある方がいたら、ぜひ一緒にバイブしてみませんか?

 

開発メンバー募集中

より良いチームワークを生み出す

チームの創造力を高めるコラボレーションツール

製品をみる