コース一覧
Vibe Coding入門
つくる:v1完成

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分

つくる:v1完成

往復して、形にする

この章の最後は、つくる回です。ここまでで覚えたことを全部使って、おこづかい帳の v1 を納得のいく状態まで持っていきます。

新しく覚えることはありません。使うのは次の3つだけです。

プレーンテキスト

1 画面に出るものを、番号を振って並べて頼む 2 1回の依頼で変えるのは1か所 3 返ってきた画面を、自分の目で1つずつ確かめる

往復とは何をすることか

1回送って終わりではなく、送る、見る、また送るを繰り返すことを往復と言います。回数が多いことは、下手だという意味ではありません。むしろ往復が回せる人ほど、思ったものに近づけられます。

プレーンテキスト

1往復目 ボタンを1つ置いてください 置かれた。ただし押しても何も起きない 2往復目 そのボタンを押したら、リストに1行増えるようにしてください 押したら増えた

1往復目で完成しなかったことを、失敗だと思わないでください。まず置く、次に動かす。これは順番として正しい進み方です。

動きを頼むときの型

今回は、はじめて動きを頼みます。押したら何かが起きる、という部分です。動きを頼むときは、次の型に当てはめて書くと通りやすくなります。

プレーンテキスト

[何を操作したら] [何がどうなる] 「追加」ボタンを押したら、リストの末尾に1行増える

操作と結果、この2つが揃っているかを送る前に見てください。片方しか書いていないと、AI がもう片方を想像で埋めます。想像で埋めさせないというのが、この章を通しての考え方でした。

名前を付けておく

押す相手が画面に複数あると、どれのことか伝わりません。そこで、名前を付けて指し示します。

プレーンテキスト

曖昧 ボタンを押したら 具体 id が add のボタンを押したら

この id というのは、画面の中の部品に付ける名札のようなものです。名札を付けておくと、あとで「あれを直して」と指すときに一発で通じます。前のレッスンで合計の行に total という名札を付けたのも、同じ理由です。

演習でやること

下の演習では、おこづかい帳の v1 に追加ボタンを付けます。押したらリストが1行増える、というところまでを完成させてください。

1回で全部書ききろうとしなくて構いません。ボタンを置く、押したときの動きを足す、と分けて往復してください。どちらの順でも大丈夫です。

完成条件

  • ボタンの文字は「追加」、id は add にしてください
  • 押すたびに、リストの末尾に1行増えるようにしてください
  • もとの3行と見出しは、そのまま残してください

依頼

おこづかい帳の v1 を仕上げます。画面に「追加」ボタン (id は add) を置き、そのボタンを押したらリストに1行増えるようにしてください。最初は3行なので、押したあとは4行になります。

  • ・ボタンの文字は「追加」、id は add にしてください
  • ・押すたびに、リストの末尾に1行増えるようにしてください
  • ・もとの3行と見出しは、そのまま残してください

いまのコード

index.html

<div id="app">
  <h1>おこづかい帳</h1>
  <ul id="list">
    <li>おやつ 300円</li>
    <li>マンガ 550円</li>
    <li>文房具 200円</li>
  </ul>
  <p id="total">合計 1050円</p>
</div>

script.js

style.css

AI への指示

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

ヒント