こんにちは、ちょこです！
今回は「バイブコーディング」という単語を知ったので、試しにやってみました。
そろそろ夏休みに入りますし、自由研究にいかがでしょうか？
以下、ざっくりしたステップと所要時間です。慣れてる方なら1分かからないかもしれません。
- 1時間目：バイブコーディングって何？（0:01）
- 2時間目：まったくの初学者に向けたバイブコーディングの適切な進め方を教えて？（0:02）
- 3時間目：最初の指示出し（0:03）
- 4時間目：仕様の追加（0:05）
- 5時間目：修正指示（0:06）
- 6時間目：一旦完了（0:07）
1時間目：バイブコーディングって何？（0:01）
まず、言葉の意味を知らないので聞いてみました。
「バイブコーディング」とは、AI（人工知能）を活用して、開発者が自然言語で指示を出すだけでコードを生成し、ソフトウェアを開発していく新しいプログラミング手法のことです。
従来のプログラミングのように細かなコードを自分で書くのではなく、AIに「こんな感じの、イケてるサイト作って！」「もっと、こうシュッとしたデザインにして！」といった、曖昧な「バイブス（Vibes）」や「ノリ」を伝えることで、AIがコードを自動生成してくれるのが特徴です。
…とのこと。バイブスから来てるんですね。
実際はもっと長く出力してくれたのですが、記事の本題ではないので割愛します。
2時間目：まったくの初学者に向けたバイブコーディングの適切な進め方を教えて？（0:02）
OK。じゃあ、早速やってみます。
…ということで、初学者向けの進め方を提案してもらいます。
とりあえず、例に「シンプルなメモ帳」があったので、試しにこれにします。
機能がシンプルで完成形も分かりますし、確かに初学者向けかもしれませんね。
3時間目：最初の指示出し（0:03）
最初の指示出しです。
先ほどのAIの回答に例文が含まれていたため、まずはそのまま聞いてみます。
シンプルなウェブページのメモ帳アプリを作ってください。テキストを入力できる入力欄と、その内容を保存するボタンがほしいです。
AIがコードを生成したので、そのままコピーしてみます。
できましたー。わーい！
なるほど、これがバイブコーディングなんですね。
さて、今の段階だと「メモを保存」のボタンの機能は作ってないので、保存できるようにしてみます。
4時間目：仕様の追加（0:05）
これもAIが生成した内容をコピペしてみます。
保存したメモがページの下に一覧で表示されるようにして。
これもAIがコードを生成したので、そのままコピーしてみます。
5時間目：修正指示（0:06）
実行したところ、メモを保存するための「保存されたメモ」の項目は追加されましたが、保存ができなかったため修正指示を出します。
ダメですね
人間相手ならひどい指示（指示どころか意味のない感想）ですが、AIの場合、これくらいざっくりしても回答してくれるようです。
すぐに考えられる原因とコードの再生成を行ってくれました。
6時間目：一旦完了（0:07）
今度は保存できました。
これでバイブコーディングを知る簡単なチュートリアルは終了です。
次のステップとしてAIからは…
- 保存されたメモを削除するボタンを追加する
- 保存されたメモを編集できるようにする
- ブラウザを閉じてもメモが消えないようにする（永続化）
などの提案がされました。
バイブコーディングの得手不得手、どのような活用方法が考えられるかなどを把握するためにも試してみても良いかもしれません。
以上です。
バイブコーディングにチャレンジする足掛かりになれば幸いです。
