先日、知人繋がりでデモサイト作成する機会があり試しに適当にVibe Codingしてみたら思ったよりイイ感じにReact + Node.js + Firebaseでデモサイトが作れた。
今まで簡単なスクリプトとかChatGPTで作ったりはしてたけど、ここ最近のAIの発展スピードはすごいですよね。
久々に楽しいと思えたのでブログ再開してメモ残しながらなんか開発していく。
Vibe Coding（バイブコーディング）って？
概要は他にいくらでも説明してるサイトあるので省略するけど、要するにAIのプロンプト出力でコード生成して自分でコード書かずに開発する手法です。
私はGoogleが好きなのでGeminiを多用してます。
試行錯誤しながらやってみての勘所
まず、まっさらなプロンプトにいろいろ相談してると、早急にコード出力しようとしてくるので対話しながら進めようねって前提を伝えてやりたいことを理解させていくととても良きパートナーになってくれる。
Gemini Code Assistでやるとき、こうしてる。
初期化したプロンプトに対してよく使うペルソナ定型文
【要件・設計の壁打ち中】
## 前提 ・私は日本人なので、回答は必ず日本語で出力して下さい。 ・これからシステム開発に関するディスカッションを行い、要件定義・基本設計を行っていきます。 ・やりたいことのヒアリングした内容から、メリット・デメリットを整理した実装方法に関する提案を行い合意を得られた実装方法を整理してanalyze.md(要件定義)、basicdesign.md(基本設計)としてファイル出力していきます。 ・ファイル修正を提案する際は、部分表示せず必ずファイルの全文を出力します。
【開発中】
## 前提 ・私は日本人なので、回答は必ず日本語で出力して下さい。 ・これからシステム開発に関するディスカッションを行っていきますが、具体的なコード出力は、コードを生成して下さいとお願いされた時だけ行って下さい。 ・やりたいことが理解できた時でも、それを実現する方法は無数にあります。類似するライブラリのメリット・デメリットを整理して実装アプローチを提案して合意を得た方法で許可が得られた時にコード出力をお行います。 ・過去のやり取りの中で提示されていない参照先ライブラリがあった場合には、そのライブラリの詳細情報の提示を求める問いかけをします。そして、依存関係ライブラリの内容を把握した上で準備が整ったら「よろしければ、コード生成の指示をして下さい。」と宣言します。 ・コード修正を提案する際は、部分表示せず必ずファイルのコード全文を出力します。 それでは、前提から確認しましょう。 まず、以下のファイルを読み込んで下さい。 /analyze.md /basicdesign.md
使ってるうちにもっといい案あれば追記するけど、勘所はこんなところかな。
コード全文出力してっていう定型文は、Gemini Code Assist使う時にコード出力をそのまま既存コードにDiffって差分チェックしてAcceptするだけでライブラリ差し替えができるようになるので入れてます。
１ファイルが大きくなってくるとToken出力量の関係でコード切れっちゃったりするけど、とりあえず最初の方はコレ入れておけばAccept、Accept、ってしていくだけで楽ちんになる。
Gemini Code Assistは部分置換の機能がなくて、私はこんな感じでやってました。
Vercel v0は、結構拙速にコード更新しちゃって、すぐファイル間での仕様齟齬がでちゃって初期デプロイ以降のブラッシュアップはあまりうまくいかなかった。
Cursorのデモ見てると、Cursorでは部分置換とかもサクサクできるみたいですね。
でも、Cursorみたいにコマンドの提案までガシガシされると環境理解が追いつかなくなりそうで、まだ手が出てないんだよなー
まぁ、それらも試す機会があればブログ更新しよう。今日はここまで😪