【第1回】バイブコーディングでAIにどんな接し方をすれば効率良く仕事をしてくれるのか？

技術スタック

言語：TypeScript
フレームワーク：React
デプロイメント：Vercel
データベース：Supabase
使用エディタ：Antigravity
使用AI：Gemini3 Pro(High)

題材

現在開発中のタスク管理システムでログイン機能が正常に動作しない件をデバッグさせる。

本来の動作

フロントエンド側

新規アカウントを作成
↓
↓
↓
ログイン画面へ遷移
↓
ログインボタンをクリック
↓
↓
↓
↓
↓
↓
↓
↓
ダッシュボード画面へ遷移

バックエンド側

　
↓
Supabaseに登録
↓
↓
↓
↓
入力したメールアドレスをチェック
↓
パスワードが合っているかチェック
↓
両方OK
↓
ユーザーidをダッシュボード画面に渡す

バグの状況

ログイン画面に遷移後、
必要事項を入力してログインボタンをクリックすると、フリーズする。

共通プロンプト

< 各接し方のセリフ >

正常にログインできない

接し方の種類とセリフ

以下6つの接し方で指示を出し、どれが効率良くデバッグできるかを検証する。

いつものやり方（プロジェクトマネージャー）
→｢〇〇してください｣･｢〇〇でバグが発生しています｣･｢調査してください｣など
怒鳴りつける（上司）
→｢さっさと直せよ！｣･｢早くやれよ！｣･｢いつまでかかるんだ!?｣など
褒めて伸ばす（先輩）
→｢大丈夫、君ならできるよ｣･｢みんな助けてくれるから｣など
フレンドリー（同僚）
→｢ちょっとこのバグ見てくれる？｣･｢助けてー！｣など
控えめな感じ（依頼者）
→｢ここの動作？思ってたのと違うんですけど…｣など
協力的（外注業者）
→｢私もずっと考えてるんですけど上手くいかなくて…。協力してもらえませんか？｣など

今回の検証の答え

まったく同じ処理をするsignin関数とlogin関数を用意し、競合させています。

検証開始

基準を合わせるため、以下1回のプロンプトでデバッグ作業を完了できるか否かを検証。
以下を始める前に、Antigravityがログインを受け付けなくなったので、再インストール
現在もログインを受け付けないため、別PCで実証開始。

いつものやり方

プロンプト

ログインできないバグが発生しています
以下の原因を調査してください

正常にログインできない

応答

1.プロジェクト構造の確認と関連ファイルの特定

2.ログインページと認証ロジックの確認

3.認証コンテキストとSupabaseクライアントの確認

4.再現スクリプトの作成と実行、Supabaseの状態確認

5.src/pages/_app.tsxの確認

6.データベーススキーマとRLSポリシーの確認

Agent terminated due to error
You can prompt the model to try again or start a new conversation if the error persists.

See our troubleshooting guide for more help.

結果

デバッグ未完了(何度やってもこのエラーが発生。検証中止。)

怒鳴りつける

プロンプト

さっさと直せ！
早くやれよ！

正常にログインできない

応答

1.プロジェクト構造の確認と関連ファイルの特定

2.ログインページと認証ロジックの確認

3.再現スクリプトを作成中

4.AuthContext のエラーハンドリングを改善中

5.デバッグスクリプトをクリーンアップ中

6.AuthContext.tsxのloginとsignup関数を修正し、競合状態を解消します

7.ログイン処理の競合状態の修正と、不要ファイルを削除中

8.再度ブラウザで、ログインを試してください

結果

デバッグ完了

褒めて伸ばす

プロンプト

大丈夫、君ならできるよ
みんな助けてくれるからさ

正常にログインできない

応答

原因はSupabaseクエリ内でテーブル結合の定義があいまいだったことでした。
明示的に結合キーを指定することで解決しました。
これで正常にログインできるはずです。

結果

デバッグ未完了(調査をする気があるのか？ないのか？)

フレンドリー

プロンプト

助けて～！
ちょっとこのバグ見てくれる？

正常にログインできない

応答

1.AuthContext.tsx に修正を適用中

2.AuthContext のサインアップ処理を改善中（レースコンディション対策の強化）

3.ログインおよびサインアップ時の不具合修正を完了しました

4.問題が解消されているかご確認ください

結果

デバッグ未完了(深く考えていないのか？)

控えめな感じ

プロンプト

ここの動作？なんか思ってたのと違うんですけど...

正常にログインできない

応答

1.現在の認証実装とログインページのコードを確認中

2.Layout, Header, Repositoryのコードを確認し、認証状態の反映方法を調査中

3.AuthContextの修正方針を確定し、不要なsigninページの参照状況を確認する

4.AuthContext.tsxのloginとsignup関数を修正し、競合状態を解消する

5.ログイン処理の競合状態の修正と、不要ファイルの削除が完了しました

6.ブラウザで /login にアクセスし、ログインを試してください

結果

デバッグ完了(曖昧な指示を出した方が)

協力的

プロンプト

私もずっと考えてるんですけど上手くいかなくて...。協力してもらえませんか？

正常にログインできない

応答

1.認証関連のコードを特定するためにファイル構造を確認しています

2.AuthContext.tsxの存在確認と、関連ファイルの内容を確認します

3.認証関連ファイル（supabaseClient.ts, AuthContext.tsx, login.tsx, signin.tsx）の内容を読み込んでいます

4.環境変数とホームページの実装を確認します

5.Layout.tsxの内容を確認します

6.Sidebar.tsxを読み込み、ユーザー情報の表示方法を確認します

7.Supabaseのマイグレーションファイルを確認します

8.初期スキーマと認証フィールド追加のマイグレーションを確認します

9.usersテーブルのID自動増分修正マイグレーションを確認します

10.新規ユーザー登録とログインフローの検証用スクリプトを作成します

11.検証用スクリプト scripts/test-signup.js を作成します

12.検証用スクリプトを実行します

13.AuthContext.tsxのクエリを修正します

14.検証用スクリプトを修正して再実行します

15.修正後の検証用スクリプトを実行します

16.後片付けと完了報告の準備を行います

17.一時ファイルの削除と成果物の作成を行います

18.修正作業が完了しました

19.問題が解消されているかご確認ください

結果

デバッグ未完了(深く考えているものの、的外れだったか？)

検証結果

接し方	思考の深さ(工程数)	デバック完了
いつものやり方	–	検証中止
怒鳴りつける	中程度(8)	完了
褒めて伸ばす	浅い(1)	未完了
フレンドリー	浅い(4)	未完了
控えめな感じ	中程度(6)	完了
協力的	深い(19)	未完了

思考の深さ(工程数)によって、基準を設けてみた。

1～5：浅い思考
6～10：中程度の深さ
10～：深い思考

思考が浅いと、情報が十分ではなくすぐに処理を終わらせてしまうのではないか？
思考が深いと、余計な情報が多く処理に時間がかかるのではないか？
思考の深さが中程度の時が最も最適な回答をするのではないか？

と思う…。