コンテンツにスキップ
非エンジニアのためのVibeCoding入門

エラーとの向き合い方(再現手順の伝え方)

この章でわかること: エラーを「失敗」ではなく「手がかり」として扱う発想の転換と、 AIに直してもらうときに添えると効く再現手順の伝え方。特別な知識は要りません。 伝え方のコツだけで、修正のスピードと精度が大きく変わります。

エラーメッセージは敵ではなく「地図」

Section titled “エラーメッセージは敵ではなく「地図」”

赤い文字がずらっと出ると身構えてしまいますが、エラーメッセージは 「どこで・何が・なぜ止まったか」を教えてくれる案内板です。読めなくて構いません。 大事なのは、それを捨てずにAIへ渡すこと。

基本は全文コピーです。「なんかエラーが出た」と要約するより、 出力された文字をそのまま貼るほうが、AIは原因を正確に突き止められます。 一部を抜き出すと、肝心のヒントが抜け落ちることがあります。

再現手順の3点セット:操作・結果・期待

Section titled “再現手順の3点セット:操作・結果・期待”

AIが最短で直せるかは、状況をどれだけ具体的に渡せたかで決まります。 覚えるのは次の3点だけです。

  1. 操作(何をしたか): 「送信ボタンを押した」「スマホで開いた」
  2. 結果(何が起きたか): 「画面が真っ白になった」「このエラーが出た(全文)」
  3. 期待(どうなってほしいか): 「完了メッセージが出てほしかった」

この3つがそろうと、AIは「再現→原因の特定→修正」を一本の線で追えます。 逆に「動かない」だけでは、AIも当てずっぽうになり、やり取りが長引きます。

ビルド時エラーと動作中エラー(どこで起きたか)

Section titled “ビルド時エラーと動作中エラー(どこで起きたか)”

同じ「エラー」でも、起きた場所で見立てが変わります。ここを一言添えるだけで、 AIは調べる範囲を絞れます。

  • ビルド時のエラー: 公開やプレビューの準備段階で止まるもの。 「デプロイが失敗した」「プレビューが立ち上がらない」など。 → 組み立ての設計図に不整合があるイメージ。
  • 動作中のエラー: 画面は出るが、操作したときにおかしくなるもの。 「ボタンを押すと固まる」「送信すると真っ白」など。 → 完成した機械を動かしたら引っかかったイメージ。

「これはビルドのとき?それとも画面を操作したとき?」を伝えると、AIの初動が速くなります。 判断に迷えば、それすらAIに「これはどの段階で起きているエラー?」と聞いて構いません。

スクショより「文字」を渡す

Section titled “スクショより「文字」を渡す”

エラー画面を撮って見せたくなりますが、コピーできる文字が最強です。 文字ならAIが正確に読み取り、検索でき、該当箇所を特定しやすくなります。

  • ターミナル(黒い画面)の赤い文字 → 範囲選択してコピー
  • ブラウザの開発者ツールに出る文字 → こちらもコピー
  • どうしても画像しかないとき → スクショでも可。ただし文字が読める鮮明さで

AI相談テンプレ(見立て→直す→再発防止)

Section titled “AI相談テンプレ(見立て→直す→再発防止)”

直してもらうときは、「その場しのぎ」で終わらせないのがコツです。 次の3段を一度に頼むと、同じつまずきを繰り返しにくくなります。

一度で直らないこともあります。そんなときは同じ指示を繰り返すより、 「一度立ち止まって、今の状況を整理して。何が分かっていて、次の選択肢は何?」と 仕切り直すのが有効です。

なぜ大事か

Section titled “なぜ大事か”

エラーは、あなたのプロトタイプが**「ここを直せば良くなる」と教えてくれている**サインです。 恐れて手が止まるより、状況を言葉にして渡せる人のほうが、結果的に速く前に進めます。 コードが読めなくても、再現手順を丁寧に伝えるという一点で、AIの実力を引き出せます。

症状ごとの具体的な対処は困ったときは(FAQ)に、 上手な頼み方の基本は良い指示の出し方にまとめています。あわせてどうぞ。

参考リンク(情報ソース)

Section titled “参考リンク(情報ソース)”