コース一覧
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分

大きな変更は刻む

一気に頼むと、まとめて壊れます

おこづかい帳に、こんな機能を足したくなったとします。金額を入れる欄と、追加ボタンと、記録の一覧と、残金の自動計算。全部です。

これをひとつの文で「入力欄と追加ボタンを付けて、押したら一覧に追加されて残金も自動で減るようにしてください」と頼むと、うまくいくこともありますが、外れたときの被害が大きくなります。4つのうちどれかが動かなかったとき、どれが原因なのか分からないからです。画面は真っ白、直したい場所は4つ、どこから手を付けるかも分からない。第1章で「1回1変更」と教わったのは、このためです。

刻むと、壊れた場所がすぐ分かります

同じ機能を3回に分けて頼むと、こうなります。

プレーンテキスト

1回目 金額を入れる入力欄と、追加ボタンを画面に置いてください。 押しても何も起きなくて構いません。 2回目 追加ボタンを押したら、入力欄の金額が下の一覧に1行増えるようにしてください。 3回目 一覧に増えるたびに、残金からその金額を引いて表示し直してください。

1回ごとに画面を見て、動いていることを確かめてから次へ進みます。もし2回目で壊れたなら、原因は2回目で頼んだ部分にあります。1回目の状態は動くと分かっているので、そこに戻せば必ず復帰できます。これが刻むことの本当の値打ちです。うまくいく確率が上がるだけでなく、戻れる場所が増えるのです。

どこで刻むかの目安

未経験のうちは、次の3つの区切りで刻むとうまくいきます。

まず置くです。ボタンや入力欄を画面に出すところまで。次に動かすです。押したときに何かが起きるようにするところまで。最後につなげるです。その動きを他の表示に反映させるところまで。

置く、動かす、つなげる。この順で頼むと、それぞれの段階で画面が目に見えて変わるので、進んでいるかどうかを自分の目で判断できます。

刻んでもうまくいかないときは、さらに刻みます

3つに割ってもまだ壊れるなら、その回をさらに2つに割ります。「押したら一覧に増える」が難しければ、「押したら固定の文字が1行増える」を先にやり、そのあと「増える文字を入力欄の値にする」を頼みます。

刻む幅に正解はありません。自分が確かめられる大きさが正しい幅です。

演習

右の画面のおこづかい帳には、入力欄も一覧もありません。刻んで頼み、追加ボタンを押したら一覧に1行増える状態まで進めてください。

完成条件

  • まず置くところまで頼み、画面を見てから次へ進んでください
  • 1回ごとに画面が変わったことを自分の目で確かめてください

依頼

おこづかい帳に入力機能を足します。id が amount の入力欄、id が add の追加ボタン、id が list の一覧を置き、追加ボタンを押したら一覧に li が1行増えるようにしてください。いきなり全部ではなく、置く、動かす、の順で刻んで頼んでください。

  • ・まず置くところまで頼み、画面を見てから次へ進んでください
  • ・1回ごとに画面が変わったことを自分の目で確かめてください

いまのコード

index.html

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

script.js

style.css

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

AI への指示

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

ヒント