0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

"ノリ"でアプリが動く「バイブコーディング」入門 〜そして、もうその"次"が始まっている話〜

0
Posted at

はじめに

普段から Claude Code や Cursor といったAI開発ツールを触っているのですが、

「AIにコードを書かせるって、結局どこから始めればいいの?」
「"AIで爆速開発"ってよく聞くけど、自分には難しそう……」

と感じている方、けっこう多いのではないでしょうか。

この記事では、2025年に大流行した 「バイブコーディング(Vibe Coding)」 を題材に、

  • そもそもバイブコーディングとは何か
  • 初心者がまず試すための具体的な手順
  • そして「実はもう "次の段階" が来ている」という最新の潮流

までを、ゆるっと一気に解説します。読み終わるころには、たぶんあなたも自分のPCで試したくなっているはずです。

この記事は「とりあえず雰囲気を掴む」ことを目的にしています。難しい前提知識は不要です!

バイブコーディングって何?

バイブコーディング(Vibe Coding)は、ざっくり言うと 「コードを自分で書かず、AIに "こんな感じで作って" とお願いして開発するスタイル」 のことです。

名付け親は、OpenAIの共同創業者でもあるAndrej Karpathy氏。2025年2月のSNS投稿で提唱され、その後あっという間に世界中へ広がりました。なんと Collins英語辞典の「2025年 今年の単語(Word of the Year)」 にも選ばれています。

彼の言葉を意訳すると、

コードの存在すら忘れて、"ノリ(vibe)" に身を任せる

という感じ。エラーが出たらそのメッセージをAIに貼り付けて直してもらい、差分(diff)も細かく読まずに「とりあえず採用」。……ちょっと過激ですが、これがバイブコーディングの原点です。

"全部AI任せ" は手軽な反面、中身を理解しないままだとバグやセキュリティの穴を見逃しがちです。お試しや個人開発ではアリですが、本番運用では注意しましょう。

とりあえずやってみよう(3ステップ)

難しく考えず、まずは手を動かすのが一番です。

  1. ツールを用意する … Claude Code(ターミナルで動くAIエージェント)や Cursor(AI搭載エディタ)など、好きなものでOK。
  2. 作りたいものを日本語で伝える … 専門用語は要りません。「やりたいこと」をそのまま書きましょう。
  3. 出てきたコードを動かして、直したいところを追加で頼む … この往復だけで、ちょっとしたアプリが形になります。

例えば、こんなプロンプトを投げてみてください。

prompt.txt
ブラウザで動く「ToDoリスト」を作って。
・タスクを追加/削除できる
・完了したらチェックを付けられる
・見た目はシンプルでおしゃれに
HTML / CSS / JavaScript の1ファイルでお願いします。

これだけで、それっぽく動くToDoアプリが数十秒で出てきます。初めて見ると、ちょっと感動します。

ここがスゴい:賢い使い方のコツ

ただAIに丸投げするだけでなく、ちょっとした工夫で精度がグッと上がります。個人的に効果を感じているコツを3つ。

コツ 効果
「何を作るか」を一文で先に言う AIが迷わず、出力がブレにくい
エラーは "そのまま全文" 貼る 下手に要約するより直る確率が高い
「なぜそうしたの?」と聞く 中身を理解でき、自分の学習にもなる

特に3つ目が大事です。バイブコーディングは「コードを理解しなくていい」のが売りですが、"理由を聞く" クセ をつけておくと、ただのコピペで終わらず、自分の実力もちゃんと伸びていきます。

今日からできるチェックリスト

  • 作るものを一文で宣言する
  • エラーは全文コピペ
  • 「なぜ?」を聞いて理解する

実践イメージ(デモ)

実際に作って公開したアプリがこちらです。まずは触ってみてください👇

🔗 デモ: ToDoアプリを開く
💻 ソースコード: GitHubで見る

📷 【スクショ挿入】 Claude Codeに上記プロンプトを入力している画面qiita-1.png

📷 【スクショ挿入】 生成されたToDoアプリが実際に動いている様子
qiita.png

実際にやってみると、「コードを1行も書いていないのに、動くものができた」という体験ができます。この "驚き" こそが、AI開発のいちばん楽しい入り口です。

……実は「バイブコーディング」、もう古い? 次の一手は「スペック駆動開発」

さて、ここで少しだけ背伸びした話を。

実は2026年現在、バイブコーディングは "卒業" の時期を迎えつつあります。しかも言い出したのは、名付け親のKarpathy氏本人。提唱から約1年後に「この時代は終わりつつある」として、新たに 「エージェンティック・エンジニアリング(agentic engineering)」 という言葉を使い始めました。

その中心にあるのが 「スペック駆動開発(Spec-Driven Development)」 という考え方です。両者をざっくり比べると——

バイブコーディング スペック駆動開発
やり方 ノリで対話しながら作る 先に仕様書(spec)を書き、それを正としてAIに実装させる
向いている場面 試作・プロトタイプ 本番・チーム開発
強み とにかく速い 品質を保ちやすい

いきなりコードを生成させるのではなく、「何を・なぜ作るのか」を先にきちんと言語化する。すると、AIが途中で迷子になりにくく、品質も担保しやすくなる、というわけです。

つまり、こういう流れです:

雑にノリで試す(バイブ) → 良さそうなら仕様を固めて作り込む(スペック駆動)

両者は敵ではなく、フェーズで使い分けるものなんですね。

「企画・要件をきちんと言葉にする」力が問われる時代——これ、AIに使われるのではなく AIを使いこなす ための、結構おいしいスキルだと思っています。

まとめ

  • バイブコーディングは「コードを書かず、AIにノリで作ってもらう」開発スタイル
  • まずは Claude Code / Cursor で、日本語のプロンプトを投げてみよう
  • 「一文で宣言」「エラー全文貼り」「なぜ?と聞く」で精度アップ
  • そして2026年は、その先の スペック駆動開発 / エージェンティック・エンジニアリング が熱い

AIツールは進化が速く、半年もすれば常識が変わります。だからこそ、完璧に理解してから始める より、まず触って、流れを追いかけ続ける のが最強です。

この記事が、あなたの「最初の一歩」と「次の一歩」のきっかけになればうれしいです。一緒にキャッチアップしていきましょう!

次回は「スペック駆動開発を実際にやってみた」記事も書いてみたいと思います 👋

参考リンク

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?