Vibeコーディングを実践してみて

本記事は【Advent Calendar 2025】 1日目の記事です。
🌟🎄 告知記事 ▶▶ 本記事 ▶▶ 2日目 🎅🎁

はじめに
Vibeコーディングとは
実践して分かったVibeコーディング
- 指示書の作成について
- 指示書の育て方（KPTで改善）
さいごに

はじめに

こんにちは、入社3年目の藤村です。今回、AWS主催のハッカソン型プログラム「ANGEL Dojo 2025」に参加し、最優秀賞をいただくことができました。本記事では、そこで実践したVibeコーディングの気づきやコツについて共有させていただきます。

aws.amazon.com

Vibeコーディングとは

Vibeコーディングとは、開発者が直接コードを書くのではなく、AIと会話しながら仕様を固めアプリを作り上げる開発スタイルのことです。「こんな機能が欲しい！」「ここはこうした方が良い」という開発者の思いの丈をチャットに綴ることで、アプリが形になっていきます。柔軟かつスピード感のある開発が可能です。

実践して分かったVibeコーディング

指示書の作成について

Vibeコーディングは自由度の高い開発方法ですが、場当たり的にプロンプトを投げても、生成結果にブレが発生し、開発が迷走するリスクがあります。そこで重要なのが、開発の指針となる「指示書」です。想定しているアプリケーション構成やコーディング規約など、「コードを書いてもらう前に言っておきたい事」があると思います。 AIが作業する際の目的や補足情報をここで宣言します。初めから完璧である必要はありません。開発の過程で育てていくことがポイントです。

出来る範囲で構わないから――

指示書の例

あなたはフロントエンド実装のアシスタントです。
目的は「Reactアプリケーションのコーディングを行う」ことです。

## 技術スタック
- フレームワーク: React + Vite + TypeScript
- スタイル: Tailwind CSS

## コーディング規約

### 命名規則
- コンポーネント名：パスカルケース
- 変数名/関数名：キャメルケース

### コンポーネント構成
- Atomic Designに従ってコンポーネントを構成すること
- コンポーネントは再利用性を高めて作成すること

### その他
- インラインスタイルは使用せず、スタイル指定は全てCSSに分離すること
- 日本語でコメントを付与し、可読性を高めること
- パブリックコードは回避すること

## 作業の進め方
1. 実装計画を提示してください。作業は段階的に進めます。
2. 実装計画を元にコーディングをしてください。
3. コーディング内容が要件に沿っているかレビューをしてください。

指示書の育て方（KPTで改善）

指示書を作成しても、AIとのやり取りの中で改善点が必ず出てきます。人間でのチーム開発と同じように、AIと振り返り（KPT）を行います。人間が手動でまとめるのではなく、チャット履歴をAIに分析させ、特にProblemとTryを重点的に抽出します。この抽出内容を基に、「○○より先に××してはいけない」というように指示を追加・修正していくのです。

AIが出力したProblemとTryの例

## Problem（課題）
- 指示書で「Atomic Designに従う」と記載したが、AIが1つのコンポーネントに複数責務を詰め込み、再利用性が低下した
- 生成されたコンポーネントでイベントハンドラが未定義のまま呼び出され、クリック時にエラーが発生
- フォームのバリデーションが抜けており、空入力でも送信できてしまった

## Try（改善策）
- コンポーネント分割の基準を明文化（例：1コンポーネント＝1責務）
- イベントハンドラの定義チェックを必須にする指示をレビュー工程に追加
- フォーム送信時にバリデーションを必ず実装するようプロンプトに明記

さいごに

ANGEL Dojoの講座で学んだVibeコーディングのTipsをインプットし、実践に移すことができました。Vibeコーディングを実践してみて、「コードを書く」から「AIと会話する」という開発への転換は今後も進んでいくのだろうと実感しました。ぜひ、AIと対話しながら、次世代の開発スタイルを体験してみてください。