vibeコーディング効率化テクニック
みなさんvibeコーディング楽しんでますか。
私はエンジニアとして5年ほどの経験があり、最近2個プロダクトを1からvibeコーディングで開発したのでその際のテクニックや知見を今回の記事でまとめようと思います
コードを0から生成させる
AIは性質上プログラムを書く場合既存のコードの改修よりも新規作成の方が得意です。
特にこれは機能的なコードよりもデザインの場合に特に有効です。
ロジックを改修する場合、0から書き直すのは細かい処理などが変わり現実的に不可能ですが、ページデザインは0から書き直させても問題ない場合が多いです。
ページのデザインを変更したいです。青色をベースとしたデザインでモダンでシンプルなデザインのページを既存のindex.jsxファイルを参考にして新規でファイルをhtmlで作成してください。
ファイルの行数が多い場合は複数ファイルに分割して作成してください。
デザインを比較検討したいのでファイルはそれぞれ異なるデザインで3つ作成してください。
このようなプロンプトを投げると大概の場合既存のデザインをちまちま改修するよりもズバっと大幅にコードを書き直してくれるので非常に楽です。
また、cursrorや、公式apiを利用していてwebブラウジングが可能な場合は好きなデザインのページなどを参考にさせてページurlを添付したうえでプロンプトを投げるとそのサイトのデザインと近いhtmlファイルが生成されます
古いバージョンのライブラリを利用する
新しすぎるバージョンのライブラリやフレームワークを活用すると変更情報をaiが持っていなくてエラーが起こりがちです。
laravelでプロダクトを開発していたのですがバージョン11で大きな仕様変更があり、kernel.php周りに修正が入っていました。しかしclaude3.7ではlaravel11の情報を持っていなかったらしくREADMEに変更点を手作業で追記していく形で情報を伝えるなり、毎回ウェブ検索させてコーディングさせていました。
これは非常に効率が悪いです。AIモデルの知識のカットオフを考えて2年前くらいにリリースされたバージョンを利用するのがベターです。
モノシリックなフレームワークを利用する
私はAI開発はlaravelなどのモノシリックなフレームワークがベストだと思っています。DBの情報、フロントエンドのコード、プロジェクトのコードがどのディレクトリに格納されているかなどをそもそもaiがベストプラクティスとして把握していてai側にコードがどこにあるかを簡単に把握させてコードを余分なコードを欠かせない工夫がvibeコーディングには必須です。
Next + supabase(MCPサーバー経由)などでも良いですが、実際この構成でプロジェクトを作成していたところDB周りのコード作成の重複が何度か発生して別のディレクトリに何個もDBへのアクセスするコードを書くという事態になりました。これを避けるためにはドキュメントで整備を行う必要がありますがそもそもがこれは無駄な作業であり、プロンプトが長くなるせいでモデルへの指示精度が下がる恐れがあります。
可能な限りモデルがそもそも事前知識として持っているものを活用する観点からプロジェクトのディレクトリ構造が既知でプロジェクト全体の情報を一か所のレポジトリで確認できるモノシリックアーキテクチャがベストです。
MCPサーバーを活用する
これもvibeコーディングには必須です。
supabaseは公式でMCPサーバーが開発されていて、ツールが20以上存在するので非常に便利です。
逆にawsはmcpサーバーは用意されていますが、これはあくまでドキュメントを確認するためのmcpサーバーであり、プロジェクトにアクセスして情報を取得するなどの行動は出来ません。
ブラウザ操作ではplaywrightが便利です
mcpサーバーをどんどん活用して、aiのプロジェクト情報検索コストを削減して適切にコンテキストを把握させて開発を行いましょう。
まとめ
いろいろ書きましたが結論はAIが効率的にコンテキストを読み取り過不足なくコーディングを行うための土台作りがvibeコーディングには求められています。
AIは万能ではありません。人間がプロジェクトにおいてどれだけ適切な道を作ってあげるかで爆速で走れるか、無駄に迂回するか決まってきます。
モデルが可能なことを適切に理解して補助してあげるようなコーディングを心がけましょう。
Discussion