Vibe１　AIと話してアプリを作ろう！おみくじアプリ作成体験

今日は「バイブコーディング」に挑戦します！
難しいプログラミングの言葉（コード）は一切キーボードで打ちません。AIに「日本語でお願いするだけ」で、君だけのオリジナルアプリを作ってみましょう！

１）AIの画面（お願いをする場所）
　または




２）エディタの画面（アプリを動かす場所）

W3Schools

画面が左右に分かれていて、上に緑色の「Run」ボタンがあるページです。

ステップ１：まずは「おみくじアプリ」を作ろう！

さっそくAIに最初の「お願い（プロンプト）」をしてみましょう。
１）下の文章をコピーして、AIのチャット欄に貼り付けて送信してください。

２）コードの終端</html>を確認して、コードエリアの右上にあるボタンを押します。

３）エディタ（W3Schools）の左側の画面にある文字をすべて消して、コピーしたコードを貼り付けます。

４）画面上の緑色の「Run」ボタンを押します！

５）右側の画面にアプリが表示されたら成功です！ボタンを押して遊んでみましょう。

🚀 ステップ２：自分好みに「バイブス」を上げよう！（アレンジ）

ここからが本番です！完成したアプリをもっと面白くするために、AIと会話して改造していきましょう。AIへの追加のお願いは、短い言葉でOKです。

🔄 アレンジのやり方

1. AIにアレンジのお願いを送信する。
2. 新しく作ってくれたコードを「コピー」する。
3. エディタの左側のコードをすべて消して、新しく「貼り付け」る。
4. 「Run」を押して変化を確認！

🆘 もしエラーが出たら？（トラブルシューティング）

バイブコーディングでは、動かなくなることもよくあります。焦らなくて大丈夫！
自分で直そうとせず、AIに直してもらいましょう。

• ボタンを押しても何も起きないとき
  → AIに「ボタンを押しても動きません。直したコードをもう一度出してください」と伝える。

• デザインが変になったとき
  → AIに「文字がはみ出てしまいました。スマホ画面に収まるように修正して」と伝える。

• よくわからなくなったとき
  → 「最初のおみくじアプリの状態に戻して！」とお願いすれば、元通りにしてくれます。