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

最初のアプリを作る

説明を、そのまま渡す

前回、おこづかい帳を3つの文で説明しました。今回はその説明を渡して、画面をまとめて作ってもらいます。ここで出てくるものが、あなたの最初のアプリの1番目の形になります。この最初の形のことを、このコースでは v1 と呼びます。

v1 は完成品ではありません。むしろあとで直す前提の下書きです。下書きだと思っておくと、思ったものと違うものが出てきても落ち着いていられます。

まとめて頼むときの並べ方

複数のものを一度に頼むときは、文章をつなげずに、上から順に並べて書きます。

プレーンテキスト

悪い書き方 おこづかい帳を作ってください。見出しとリストと合計があって全部見やすい感じで。 良い書き方 おこづかい帳の画面を作ってください。 1 いちばん上に「おこづかい帳」という見出し 2 その下に、使ったものを3行のリスト 3 いちばん下に、合計金額を1行

下の書き方には、いいことが2つあります。1つは、AI が抜けを起こしにくいこと。もう1つは、返ってきた画面を1から順に照らし合わせて確認できることです。番号を振った瞬間に、それは確認用のチェックリストにもなっています。

数字は自分で決めて書く

このとき、書かなかったものは AI が勝手に決めます。悪意があるわけではなく、決めないと画面が作れないからです。

プレーンテキスト

書かない 合計も出してください 書く いちばん下に「合計 1050円」と1行出してください

金額そのものを書いてしまうのは、乱暴に見えるかもしれません。ですが最初の1本では、これでいいのです。自動で計算する仕組みは後の章で足します。まず画面の形を決めて、動きは後から乗せる。この順番が、やり直しの少ないやり方です。

出てきたものは必ず目で確認する

返ってきたら、送った番号のリストを見ながら1つずつ確かめてください。

プレーンテキスト

1 見出しは出ているか 出ている 2 リストは3行あるか 2行しかない 3 合計の行はあるか 出ている

2番が足りませんでした。この時点で慌てて全部書き直す必要はありません。足りないところだけ言い直せばいいからです。その直し方は次のレッスンでやります。

演習でやること

下の演習で、おこづかい帳の v1 を作ってもらいます。要るものは、見出し、3行のリスト、合計の行の3つです。

合計の行には、必ず「合計」という言葉を入れてください。あとで金額を自動で計算させるとき、この行を目印にして頼むことになります。あとから触るものには名前を付けておく、と覚えておいてください。

完成条件

  • 見出しの文字は、ちょうど「おこづかい帳」にしてください
  • リストは3行以上にしてください
  • 合計の行には「合計」という言葉を必ず入れてください

依頼

おこづかい帳の最初の形 (v1) を作ってもらいます。見出し、使ったものの3行リスト、そして合計を表示する1行の3つを画面に出してください。

  • ・見出しの文字は、ちょうど「おこづかい帳」にしてください
  • ・リストは3行以上にしてください
  • ・合計の行には「合計」という言葉を必ず入れてください

いまのコード

index.html

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

script.js

style.css

AI への指示

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

ヒント