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

マイアプリ完成

最後は、全部を1本の流れでやる

最終章です。ここまで章ごとに練習してきたことを、今日は分けずに一続きでやります。実際に自分で何かを作るときは、レッスンのように区切られていないからです。

通しでやる流れは、次の5つです。

プレーンテキスト

1 何が欲しいかを言葉にする 第1章 2 大きくまとめて AI に頼む 第5章 3 出た画面を見て、ずれを探す 第2章と第3章 4 ずれを1つずつ直す 第2章 5 細かい文言は自分の手で直す 第5章

新しく覚えることはありません。順番に並べただけです。

完成の線を、先に決めておく

作り始める前に、ひとつだけ決めておくことがあります。どうなったら完成にするかです。

これを決めずに始めると、いつまでも「もう少し」が続きます。見た目はいくらでも直せますし、機能もいくらでも足せるからです。線を引かないかぎり、作品は終わりません。

決め方は簡単で、画面を見て確かめられる形にします。

プレーンテキスト

良い線引き 見出しと、記録が3件以上と、合計の行と、残高の行が出ている 悪い線引き 使いやすくて見た目がきれいになっている

下は、いつまでも達成できません。誰も「もう十分きれい」と決められないからです。上なら、画面を見れば10秒で判断がつきます。

途中で欲しくなったものは、書き留める

作っている途中で、必ず「これも足したい」が出てきます。日付を入れたい、色分けしたい、並べ替えたい。

そこで手を止めて全部に手を付けると、最初に決めた線までたどり着けなくなります。思いついたものは紙かメモに書き留めておいて、決めた線に着いてから戻ってきてください。

この順番を守ると、少なくとも「完成した1本」が手元に残ります。途中で力尽きたものが何本もある状態より、ずっと良い結果です。

直す順番も決まっている

出た画面にずれが3つ見つかったとします。同時に3つとも頼まないでください。第1章でやった1回1変更は、最後まで有効です。

1つ頼んで、画面を見て、次に進む。まとめて頼むと、どれが効いてどれが効かなかったのか分からなくなります。急がば回れで、結局この進め方がいちばん速く終わります。

今日の演習

おこづかい帳の最終版を仕上げます。線引きは決めてあります。見出しと、4件以上の記録と、合計の行と、残高の行の4つが画面に出ていることです。

ここまでのレッスンで作ってきたものと同じ部品ですが、今日はまとめて1回で組み上げてみてください。それが AI のいちばん得意な頼み方です。

完成条件

  • 見出しは「わたしのおこづかい帳」にしてください
  • 合計の行は id を total、残高の行は id を balance にしてください
  • 背景の色も指定して、白のままにしないでください

依頼

おこづかい帳の最終版を、まとめて1回で作り上げてください。見出しと、4件以上の記録の一覧と、合計の行と、残高の行の4つが画面に出ていれば完成です。

  • ・見出しは「わたしのおこづかい帳」にしてください
  • ・合計の行は id を total、残高の行は id を balance にしてください
  • ・背景の色も指定して、白のままにしないでください

いまのコード

index.html

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

script.js

style.css

AI への指示

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

ヒント