Vibe Codingとは

言葉だけで、動くものが出てくる

このコースであなたが書くのは、コードではありません。日本語の文章だけです。

「上に大きく“おこづかい帳”と出してください」と書いて送る。すると画面のほうに、その見出しが出ている。これがこのコースでずっと繰り返すことです。

このやり方を Vibe Coding と呼びます。細かい書き方を人間が覚えるのではなく、こういうものが欲しいという雰囲気を言葉で渡して、形にするところは AI にやってもらう作り方のことです。

画面はどこから出てくるのか

出てくる画面の正体は、Webページです。ふだんブラウザで見ているものと同じ仕組みでできています。そのページは3つの部品からできていて、このコースではその3つが AI の作業場になります。

HTML は中身、CSS は見た目、JavaScript は動き。この3語はこれから何度も出てきますが、今の時点ではこの一行の役割分担だけ覚えておけば十分です。中身を読み書きするのは、いちばん最後の章まで出てきません。

送るのは「命令」ではなく「注文」

身構える必要はありません。飲食店で注文するときと同じ言い方で通じます。

違いは、相手が何を作ればいいか一意に決まるかどうかです。上の文なら、置く場所も、大きさも、文字も決まっています。下の文には決まっているものが1つもありません。この差は第2章でじっくり練習するので、いまは「決まっていることを書く」とだけ覚えてください。

出てきたものを見て判断する

Vibe Coding で人間がやる仕事は、実はここです。返ってきた画面を見て、思ったとおりかを決める。

違っていたら、もう一度言葉で伝え直します。何回やり直しても構いません。むしろこのコースは、一発で当てる技術ではなく、ずれたときに立て直す技術を身につけてもらうために作られています。

この先ずっと使う題材

練習の題材は、おこづかい帳で揃えます。入ったお金と出たお金を並べて、残りを見るだけの小さなアプリです。誰にでも想像がつく形なので、指示が通ったかどうかを自分の目で判断しやすいからです。

では、最初の一言を送ってみましょう。下の演習で、何もない真っ白な画面に見出しを1つ出してもらいます。書くのは1文で構いません。

• コードは書きません。日本語でお願いするだけです
• 見出しの文字は、ちょうど「おこづかい帳」にしてください
• 画面に出た見た目で採点します