直してもらう:思ったのと違う・エラーが出たとき | SkillhubAI(スキルハブエーアイ)

直してもらう:思ったのと違う・エラーが出たとき

このレッスンでできること

思ったのと違うときや、エラーが出たときに、AIに伝わる言い方で直してもらえるようになります。

「どこが・どう違うか」を伝えると、1回のやりとりでここまで直ります(画面はイメージです)。

「なんか違う」を、言葉にする

1回目で思ったとおりのものができることは、あまりありません。直してもらうのは、バイブコーディングのふつうの流れです。

ただ、「なんか違う」「いい感じにして」だけでは、AIはどこを直せばいいか分かりません。次の4つをセットにして伝えます。

4つ目の「本当はどうしてほしい」まで書くと、AIが迷わずに直せます。

やってみよう:レシピ診断を直してもらう

1
レッスン4で作った recipe.html を開いて、メモした「気になるところ」を見直します。
2
見た目のことなら、その画面のスクショ(画面の写真)を撮ります。Mac は ⌘ + Shift + 4、Windows は Windows + Shift + S で、撮りたい範囲をドラッグします。
3
レッスン4と同じ会話に、スクショを貼りつけ(または添付し)、4つをセットにしたお願いを書いて送ります。
4
返ってきたコードを、recipe_v2.html のように別の名前で保存します。前のファイルを残しておくと、うまくいかなかったときに戻れます。
5
開いて、直してほしかったところが直っているか、前に動いていたところが動くままかを確かめます。
お願いの例(思ったのと違うとき)スマホで開くと、気分のボタンが横に4つ詰まって、文字が3行に折り返して読みにくいです(スクショを貼ります)。
・ボタンは縦に1列で、指で押しやすい大きさにしてください
・結果には、おもな材料と、ひとことコメントも出してください
・気分を選んだあとに、「10分/30分」の料理の時間も選べるようにしてください

1回に直してもらうのは、2〜3個までにしましょう。一度にたくさん頼むと、どれが直ってどれが直っていないのか、確かめにくくなります。

エラーが出たとき・動かないとき

原因を自分で探さなくて大丈夫です。見えたものを、そのままAIに渡します。

お願いの例(動かないとき)「もう一度診断する」ボタンを押しても、何も起きません。
スクショと、画面に出ていたメッセージを貼ります。
原因を調べて、直したコードを全文で出してください。

Skillhub で、生徒役と先生役のAIどうしでこの流れを試したときも、「削除したのに、開き直すと元に戻る」と見えた様子をそのまま伝えるだけで、AIが1回のやりとりで原因を見つけて直せていました。むずかしい言葉は要りません。

つまずきやすいところ

こうなったら:直してもらったら、前は動いていたところが動かなくなった

こうする:「さっき直す前は、〇〇は動いていました。今は〇〇になります」と伝えます。どうしても直らなければ、残しておいた前のファイルに戻ってやり直します。

こうなったら:何回伝えても、同じところが直らない

こうする:新しい会話を開いて、いちばん新しいコードの全文を貼り、「このコードの〇〇を直してください」と頼み直します。会話が長くなりすぎると、AIが前の話とまざってしまうことがあります。

こうなったら:直ったけれど、やっぱり前のほうがよかった

こうする:「1つ前の形に戻してください」と頼むか、残しておいた前のファイルを使います。

まとめ
  • 直してほしいときは「どこで・何をしたら・どうなった・本当はどうしてほしい」の4つで伝える
  • スクショや、画面に出ていた文字をそのまま貼ると、早く伝わる
  • 1回に直すのは2〜3個まで。前のファイルは別の名前で残しておく

次のレッスンでは、できたアプリを人に見せる方法と、次に学ぶことを決めます。

確認クイズ

Q1. 直してほしいときに伝える4つは?

Q2. 画面に英語のエラーが出ました。どうする?

Q3. 直してもらったコードは、どう保存するといい?

こたえ

  • Q1:「どこで」「何をしたら」「どうなった」「本当はどうしてほしい」です。
  • Q2:意味が分からなくても、そのままコピーしてAIに貼り、「何をしたら出たか」をそえて、直してもらいます。
  • Q3:recipe_v2.html のように別の名前で保存して、前のファイルも残しておきます。