バイブコーディング × Cursor 入門講座

はじめに

IT界隈でバイブコーディングが話題になってるようで、動画を視聴したり、ネット記事を読むだけではなく、実際に自分で手を動かして体験してみようと実践してみた記録をブログで公開してみます。

ガイダンス

バイブコーディングとは？

バイブコーディングの定義

AIとリアルタイムに対話しながらコードを書く開発スタイル

「ライブコーディング（Live Coding）」の進化系で、

“Vibe（雰囲気・感覚）を共有しながら作る”

という意味合いが込められています。

従来のコーディングとの違い

従来の開発 バイブコーディング
設計→実装→修正 要件をAIと会話しながら即コーディング
自分でコードを書く ほぼ自然言語でAIに依頼して作る
完成物をベースに調整 感覚的な指示で微調整を重ねる
時間がかかる 驚くほどの速さで形にできる

なぜ「Vibe」なのか？

  • 単なる命令と反応ではなく、

    • → 「こんな雰囲気にしたい」「優しいデザインで」など感覚・センスも伝える

  • だからこそ、**「コーディング＝創作表現」**に近づく → デザイン・UI・構成すらも“対話”で進むようになる

必要なもの（環境）

ツール 説明
Cursor VSCodeベースのAIペアコーディング専用エディタ（無料）
OpenAI APIキー（GPT-4） ChatGPT APIと同じキーが使用可能
Markdownファイル 要件定義を伝えるためのベース（設計書代わり）

具体的に何をするの？

以下のような手順で開発が進みます：

  1. requirements.md に「作りたいもの」を書く（自然文）
  2. AIがコードを生成してくれる
  3. 「もっとこうして」と指示し、改善
  4. 即座にコードをテスト・修正
  5. 完成！

メリット

  • コーディングが怖くなくなる（自然文でOK）
  • エラーを一緒に解決してくれる安心感
  • デザインも一緒に考えてくれる
  • “何を作りたいか”に集中できる

デメリット・注意点

  • 英語プロンプトの方が正確に動作することがある（日本語でもOK）
  • 設計が曖昧だとAIも迷う（Markdown設計がカギ）
  • 複雑なバグ対応はまだ人間の知識が必要な場面も

この先で学んでいくこと

  • Cursorの導入と使い方
  • 要件定義をMarkdownで書く方法
  • AIとの対話のコツ（プロンプト設計）
  • Webアプリ制作の実践