コース一覧
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との対話には履歴が残っています。どの時点でどんなコードだったかが分かるので、いつでも過去の状態に引き戻せます。編集画面のリセットや元に戻す操作、コードのコピーを自分で控えておく方法も同じ役割を果たします。

判断の目安はひとつです。同じ場所を2回直してもらってまだ直らないなら、戻る。3回目を頼むより、動いていた状態に戻して別の道から頼み直したほうが、ほとんどの場合早く着きます。

戻ることは負けではありません。登山で道に迷ったとき、藪の中を進み続けるより、分かれ道まで引き返すほうが速いのと同じです。

戻ってから、頼み方を変えます

ただし、戻ってまったく同じ頼み方をすると、また同じところで壊れます。戻ったあとは必ず頼み方を変えてください。前の章で学んだやり方が、そのまま使えます。

ひとつは刻むことです。一度で頼んでいたものを、2つか3つに割ります。もうひとつは具体にすることです。感覚の言葉が残っていれば、数字や決まった文言に置き換えます。もうひとつは範囲を狭めることです。「style.css だけを直してください」「index.html は触らないでください」と、触ってよい場所を明示します。

戻れるように、動いた時点を覚えておきます

戻る前提で進めるなら、どの時点が動いていたかを自分で把握しておく必要があります。難しい記録は要りません。1回変更するたびに画面を見て、動いていたら心の中で印を付けておく。これだけで十分です。

刻んで頼むことが大事なのは、ここにもつながります。刻めば刻むほど、動いていた印の数が増えます。印が多いほど、戻る先が近くなります。

演習

右の画面のおこづかい帳は、直そうとして壊れたあとの状態です。見出しの閉じ方が壊れていて、残金の色を変えるつもりで書かれた指定も効いていません。動く状態に戻してください。

完成条件

  • 壊れた上に足すのではなく、動く形に戻すつもりで頼んでください
  • 触ってよいファイルを指定すると、余計な変更が入りません

依頼

おこづかい帳が壊れています。index.html の見出しの閉じ方が崩れていて、style.css の残金の色指定も効いていません。動く状態に戻してください。見出しは「おこづかい帳」、残金は 2500 を含む文で、残金の文字色は赤 rgb(255, 0, 0) にしてください。

  • ・壊れた上に足すのではなく、動く形に戻すつもりで頼んでください
  • ・触ってよいファイルを指定すると、余計な変更が入りません

いまのコード

index.html

<h1>おこづかい帳
<p id="total">残金 2500円</p>

script.js

style.css

body { font-family: sans-serif; padding: 16px; }
#totall { color: red; }

AI への指示

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

ヒント