コース一覧
Vibe Coding入門
期待と違う時

Vibe Coding入門

作りたいものを言葉で伝え、AIとの対話だけでWebアプリを作り上げるVibe Codingを、毎レッスン実際にAIとやり取りしながら体験します。プログラミングの知識は不要です。最後は自分のアイデアをアプリの形にして公開し、AIが間違えた1行を自分の手で直すところまで進みます。

1
はじめてのVibe Coding
01. Vibe Codingとは5分
02. アイデアを言葉にする5分
03. 最初のアプリを作る6分
04. 少しずつ変える5分
05. つくる:v1完成6分
06. 第1章クイズ5分
2
要望の伝え方
01. 具体的に頼む6分
02. 見た目の指示6分
03. 動きの指示6分
04. 比べて選ぶ6分
05. つくる:思い通り化6分
06. 第2章クイズ5分
3
うまくいかない時
01. エラーはそのまま渡す6分
02. 期待と違う時6分
03. 大きな変更は刻む6分
04. 壊れたら戻す6分
05. つくる:復旧訓練7分
06. 第3章クイズ5分
4
作品を仕上げる
01. 仕上げの磨き6分
02. スマホ対応を頼む6分
03. 公開する6分
04. 自分らしさを足す6分
05. つくる:公開版完成7分
06. 第4章クイズ5分
5
AIの限界とコードの世界
01. AIが間違える所を見る6分
02. コードを覗いてみる6分
03. 1行だけ自分で直す7分
04. つくる:AIと手の合わせ技7分
05. 第5章クイズ5分
6
総合制作
01. マイアプリ完成8分
02. シェアと振り返り7分
03. 完成と次のステップ6分

期待と違う時

エラーが出ていないのに、思ったものと違う

前回はエラーが出ている場合を扱いました。あれは実は幸運なケースです。機械が「ここがおかしい」と教えてくれているのですから。

もっと困るのは、エラーがひとつも出ていないのに、出てきた画面が想像と違うときです。おこづかい帳の残金を大きく目立たせてほしいと頼んだのに、返ってきた画面では文字の大きさがほとんど変わっていない。AIは「大きくしました」と言っている。でも自分には大きく見えない。

このときに「違います、もっとちゃんとやってください」と返してしまうと、たいてい同じような結果がもう一度返ってきます。AIから見ると、どこがどう違うのかが分からないままだからです。

3つに分けて伝えます

こういうときは、次の3つを分けて書きます。

ひとつめは期待です。自分は何がどうなると思っていたのか。ふたつめは実際です。今、画面に何が出ているのか。みっつめは直し方です。どう変えてほしいのか。

プレーンテキスト

悪い例 違います。もっと大きくしてください。

プレーンテキスト

良い例 期待していたこと 残金の数字が、見出しよりはっきり大きく出ること 実際に出ているもの 残金の数字が、まわりの文章と同じ大きさのまま 直してほしいこと 残金の文字サイズを 48px にして、太字にしてください

下の書き方には、AIが推測しなければならない部分がひとつも残っていません。「はっきり大きく」という感覚の言葉が、48px という数字に置き換わっているところが肝心です。感覚の言葉は人によって幅が違うので、そこを詰めない限り何度でもすれ違います。

実際を書くときは、見えているものだけ書きます

「実際」の欄に、原因の推測を書きたくなることがあります。「たぶん CSS の指定が効いていないのだと思います」というような文です。

未経験のうちは、この推測は書かないほうが安全です。推測が外れていると、AIはその外れた前提に沿って直そうとして、かえって遠回りになります。目に見えているものだけを、見えたまま書くのが確実です。原因を探すのはAIのほうが得意です。

直し方まで書けないときは

「どう直せばいいか自分では分からない」という場面もあります。そのときは、みっつめを次のように書き換えます。

プレーンテキスト

直し方が分からないので、案を2つ出してください。 それぞれどう見えるかも説明してください。

選ぶのは自分、案を出すのはAI、という分担にすると進みます。丸投げの「いい感じにして」とは違い、選択肢という形で返ってくるので、判断できます。

演習

右の画面のおこづかい帳は、残金がまわりの文章と同じ大きさで出ています。期待と実際と直し方の3点で伝えて、残金を大きく目立たせてください。

完成条件

  • 期待と実際と直し方の3つを分けて書いてください
  • 大きくという感覚の言葉ではなく、数字で伝えてください

依頼

おこづかい帳の残金が目立ちません。期待と実際と直し方の3点でAIに伝えて、id が total の残金を文字サイズ 48px の太字にしてください。他の文章の大きさは変えないでください。

  • ・期待と実際と直し方の3つを分けて書いてください
  • ・大きくという感覚の言葉ではなく、数字で伝えてください

いまのコード

index.html

<h1>おこづかい帳</h1>
<p id="total">残金 2500円</p>
<p id="note">今月の予算は 5000円です</p>

script.js

style.css

body { font-family: sans-serif; padding: 16px; }

AI への指示

残り 3 回
AI に依頼するにはが必要です

ヒント