コース一覧
Vibe Coding入門
AIが間違える所を見る

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が間違える所を見る

得意なことと、苦手なことがある

ここまでの4章で、AI はずいぶん賢く見えたはずです。文章を送るだけで画面ができあがり、色も動きも思いどおりになりました。

この章では、逆側を見ます。AI が空回りする場面です。先に知っておくと、行き詰まったときに「自分の頼み方が悪いのか、そもそも向いていない頼みごとなのか」を切り分けられるようになります。

大きいほど得意、小さいほど苦手

意外に思うかもしれませんが、AI は大きい仕事のほうが得意です。

プレーンテキスト

得意 おこづかい帳の画面をひととおり作ってください 苦手 3行目の「合計」を「合計金額」に直してください

上は、AI が持っている「よくあるおこづかい帳の形」をそのまま出せば済みます。ところが下は、いまある画面のどこに何が書いてあるかを正確に読み取り、そこだけを触り、他を1文字も動かさないという細かい作業です。

この細かいほうで、AI はよくつまずきます。具体的には次のようなことが起きます。

  • 頼んだ場所とは別の似た文字を直してしまう
  • 直すついでに、頼んでいない部分の見た目まで作り替えてしまう
  • 直したと返事をしてくるのに、画面は何も変わっていない

なぜ小さい直しでつまずくのか

理由は仕組みにあります。AI は文章の続きを予測して作る道具で、画面を目で見て確かめているわけではありません。

そのため「らしい形」を作るのは得意でも、「いま目の前にある1文字」を狙って当てるのは苦手です。似た文字が2か所あれば、どちらを直せばよいか判断できずに両方を書き換えることもあります。

もう1つ、AI はあなたの頭の中を見られません。「ここが少しダサい」「もうちょっと」といった感覚は、そのままでは伝わりません。第2章で数値や具体例に置き換える練習をしたのは、このためでした。

空回りが始まったら、いったん止める

同じお願いを3回投げて3回とも直らないときは、頼み方を4回目に変えるより、やり方そのものを変えるほうが速いことがあります。

選択肢は次の2つです。1つは、いまの状態を捨てて「この画面をまるごと作り直してください」と大きく頼み直すこと。もう1つが、この章でこれから練習する自分の手で直すという道です。

「合計」を「合計金額」にする。これは人の手なら2文字足すだけで、10秒もかかりません。AI に3回頼んで直らなかったものが、自分で開けば一瞬で終わります。

今日の演習

まずは AI の得意な側を、もう一度はっきり見ておきましょう。おこづかい帳の骨組みを、大きくひとまとめに頼んで作らせます。この「大きく頼めば一発で出る」感覚と、次のレッスン以降で見る「小さく頼むと空回りする」感覚の差が、この章の本体です。

完成条件

  • 細かく分けず、欲しいものをまとめて1回で頼んでみてください
  • 見出しは「おこづかい帳」、合計の行には「合計」という文字を入れてください
  • 記録は ul の中の li として3件以上並べてください

依頼

AI が得意な大きい頼み方を試します。おこづかい帳の骨組みを、まとめて1回で作ってもらってください。見出しと、3件の記録が並んだ一覧と、合計を出す行の3つが画面に出れば合格です。

  • ・細かく分けず、欲しいものをまとめて1回で頼んでみてください
  • ・見出しは「おこづかい帳」、合計の行には「合計」という文字を入れてください
  • ・記録は ul の中の li として3件以上並べてください

いまのコード

index.html

<div id="app"></div>

script.js

style.css

AI への指示

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

ヒント