コース一覧
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 に渡していたのは、まさにこの「言葉」でした。説明の練習は、そのまま次の指示の練習になります。

3つの文で書く

紹介文は長く書く必要がありません。次の3つで十分です。

プレーンテキスト

1 これは何か おこづかい帳のアプリです 2 何ができるか 入ったお金と出たお金を並べて、残高が一目で分かります 3 どこが自分らしいか 合計だけでなく残高も出るようにしました

1 は名前、2 は動き、3 はこだわりです。この順番で書くと、読む人が迷いません。 逆にこだわりから書き始めると、そもそも何の話か分からないまま読ませることになります。

作り方の話は、いちばん最後

やりがちな失敗があります。どう作ったかを先に書いてしまうことです。

プレーンテキスト

読みにくい AI に指示を出して、3回やり直して、最後に自分で1行直しました 読みやすい おこづかい帳のアプリです。残高が一目で分かります

読む人が知りたいのは、まずそれが何なのかです。作り方の苦労話は、興味を持ってもらえたあとで話せば喜ばれます。順番を逆にするだけで、同じ内容が伝わりやすくなります。

振り返りも、言葉にしておく

紹介文とは別に、自分用のメモも残しておいてください。書くのは次の2つだけです。

1つ目はうまくいった頼み方です。一発で通った指示があったなら、その文をそのまま書き留めておきます。次に似たものを作るとき、同じ形が使えます。

2つ目は詰まったところです。何回も往復してしまった頼みごとを覚えておくと、次は最初から別のやり方を選べます。第5章でやったように、手で直したほうが速い場面だったのかもしれません。

この2つを残しておくかどうかで、2本目を作るときの速さがはっきり変わります。

今日の演習

紹介文を、作品そのものの中に載せます。画面の上のほうに1文の説明を置くと、開いた人がすぐに何のアプリか分かるようになります。

短くて構いません。これは何かが伝わる1文を用意して、画面に出してもらってください。

完成条件

  • 説明文の行は id を intro にしてください
  • 説明文には「一目で分かる」という言葉を必ず入れてください
  • 見出しや記録や合計の行は、そのまま残してください

依頼

完成したおこづかい帳に、紹介文を載せます。見出しのすぐ下に、id が intro の説明文を追加してください。中身には「一目で分かる」という言葉を必ず入れてください。

  • ・説明文の行は id を intro にしてください
  • ・説明文には「一目で分かる」という言葉を必ず入れてください
  • ・見出しや記録や合計の行は、そのまま残してください

いまのコード

index.html

<h1>わたしのおこづかい帳</h1>
<div id="app">
  <ul>
    <li>おこづかい 3000円</li>
    <li>おかし 480円</li>
  </ul>
  <p id="total">合計 3480円</p>
</div>

script.js

style.css

AI への指示

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

ヒント