はじめに
すっかりバイブコーディングにハマってます。
おはようございます、こんには、こんばんは、やないです。
日々バイブコーディングで色々なものをAIに作ってもらっているのですが、ようやく頭の中にイメージしていたものを具現化できて無事にサービス開始までできたのでまとめて見ました
基本ルール
- コーディングはすべてAIで行う(今回使用したのはGithub Copilot CLI)
- 事前に仕様書などは作らずAIとの対話で進める
- かならずPRを作成し、直接mainにはpushさせない
Github Copilot CLIについてはこちらの記事で触れてますので、よかったら合わせて読んでみてください
copilot-cliを使って世界時計を表示するCLIを作ってみた話
実際に作ったもの
「Astrolit」という楽天 Books の人気書籍データをもとに、 書籍カードをワードクラウド風にビジュアライズするサービスを作ってみました
読み方は「アストロリットです」
由来などはサイトに乗せているのでここでは割愛します
なぜこのサイトを作ったのか？
- 本のランキングに拘らず、星を眺める感じで本を探せないかなと思ったから
- CDのジャケ買いみたいにヴィジュアルで本を手にしてもらいたかったから
- 特に書く本が好きだからみんなにも本が好きになって欲しい！
なんて他愛もない理由がメインです。
実際バイブコーディングをしてみて
さて、ここからようやく本編です。
ここまではただの宣伝なので、実際にGithub Cpilot CLI(以下copilot)を使い倒してみた結果を書き綴っていこうと思います。
チラシ裏感覚で書くので読みづらいかもしれませんが、ご容赦頂ければと思います。
あっという間に上限はやってくる。追加課金は必須
まず前提として、Github Copilotに契約している必要があります。
３００リクエストまではCopilotのデフォルトとして設定されているのですが、フルでバイブコーディングするとなると、あっという間に消費します。
Githubの設定ページから課金の上限など設定できるのでうまいことバランスよくやりましょう
私の場合、MAX30ドルまでにしました。
今回紹介するサイト以外にも色々バイブコーディング実験しまくったので2月はほぼ30ドル使いました。
Claudeとかの方が安いかも、、、とも思ったのですが、2月はバイブコーディング集中実験だったので毎月30ドルは使わないはず（たぶん）
デザインのイメージをどこまで伝えられるか
今回は２パターンで実験してみました
- まったくサイトイメージがない状態で0から作った場合
- ある程度サイトイメージを日本語で伝えた場合
結果的にはどちらも個人的に不満のないレベルでした
まったくサイトのイメージがない場合も、「サイトイメージから一緒に考えたいです」と伝えるだけで色々なパターンを提案してくれます。
複数パターンを作ってもらうこともできます。
後者のサイトイメージを伝えた場合はもう微調整レベルでしたね
結果的には何もイメージ無い状態からでも始まりますが、前項で紹介した通り、Premium Requestを
ガンガン消費するのである程度イメージ決めた方がスムーズに進むなという印象でした。
技術スタック
今回のサイトはPython + FastAPIで作成を依頼しました。
というか、私が色々実験しているサイトはほぼ上記の構成にしています。
理由は下記になります。
- Cloud Runで動かすので起動を早くできるのが良い
- Python + FastAPIは業務でも多少触っているので最悪、自分でも修正できる
JavaとかだとCloud Runの起動が遅いので却下です
（VMが立ち上がるのが遅いんですよね）
結構まだまだPythonはJavaに比べると不慣れな部分が多いのですが、バイブコーディングを通じて勉強になるのも良い経験だと思っています。
一番最初に開発ルールを決めるべし
copilotは .github/copilot-instructions.md にルールを記録させることができます。
私の場合、最初に下記のような指示を入れてから作業しました（一部抜粋）
.github/copilot-instructions.md に下記のルールを記載してください
- クリーンアーキテクチャで実装すること
- pytestを作成しバックエンドの動作を担保すること
- 作業開始時は必ず別ブランチを作成し、いつでもmainに戻れば変更が戻せること
こうすることでだいぶ余計なリクエストを投げなくても制度高く実施してくれます。
バックエンドの動作はカバレッジ率で伝えても良いかもしれませんね（と、書きながら思いました）
必ずリファクタリングの指示をすべし
ある程度、サイトが完成したらリファクタリングができるか提案してもらった方が良いです。
普通にパスタコードを作ってくれたりします。
私の場合、PRを作ってもらった段階で特にわかりにくい部分に関してファイル名を指定して分割してもらったりします。
コードの全てを理解しなくても良いですが、
- 部品単位でコードが分かれているか
- パスタコードになっていないか
- コメントがしっかり残っているか
の観点はしっかりできているかを見たほうが良いです。
最後に
バイブコーディングは非常に便利ですが、丸投げするといつか破綻しそうなので
- 自分がPMとしてしっかり方向が合っているか？
- ちゃんと仕様の認識をあわせながら進めるか？
などが今後の課題になってくるのかなと思いました。
あと、今回作っているサイトは機能も少ないシンプルなサイトなので大規模なサイトでどうなるのかは別途実験する機会があれば試してみたいと思います。
まずは新規の小規模サイトならAIで簡単につくれるのでまずはローンチさせることを目標にしているなら最初はAIでコーディングすることでかなり時間の節約になると思います。
おまけ
現在、下記のサイトもバイブコーディングで実験中の開発ツール集を集めたサイトを作っています。
こちらもよかったらチラ見してくれたら嬉しいです
また何か気付きがあれば記事を書こうと思います。