「バイブコーディング入門：プロンプトエンジニアリングの基本概念からWebアプリ開発実践まで」

1. はじめに

最近では、AIとの協働開発スタイルを「バイブコーディング（Vibe Coding）」と呼ぶことが増えてきました。
バイブコーディングの定義については割愛させていただきますが、参考になるサイトを紹介します。
https://bcg-jp.com/article/9133/

記事を書いている私自身、CursorやClaudeを活用し、バイブコーディングをしていますが、同じAIツールでも「プロンプトの書き方」次第で、生成されるコードの品質が天と地ほど違うことを実感しています。

本記事では、プロンプトの書き方(プロンプトエンジニアリングの基本概念の理解と効果的なプロンプト手法)を中心にブックマークアプリの開発を実装・検証を2つのアプローチから行います。

本記事の対象は以下の通りです。

• コードを触ったことのないプログラミング初心者
• AIツールは使っているが、より効果的に活用したい方
• プロンプトエンジニアリングを体系的に学びたいエンジニアの方

また、バイブコーディングでアプリケーションを作る際、以下の理由から「ブックマーク管理アプリ」を題材として選びました

• 段階的な複雑性：基本的なCRUD操作（手動入力）から外部API連携（URLからタイトル自動抽出）

• 実用性の高さ：日常的に使え、他のプロジェクトにも応用できるパターンを習得

• 学習効果の可視化：プロンプト次第で実装が変わることを体感し、改善プロセスの理解ができる

2章ではどのようにプロンプトエンジニアリングをすべきかについて基本概念から解説します。

2. プロンプトエンジニアリングに必要な基本概念

プロンプトエンジニアリングは「AIに出す指示（プロンプト）を設計して、望む出力を引き出す技術」とされており、表現の仕方や与える情報量で、以下の図のように出力の質が大きく異なります。

❌ 悪いプロンプト例：
「ブックマーク管理アプリを作って」
→ 結果：動くが、セキュリティ脆弱性やパフォーマンス問題を含む可能性

⭕ 良いプロンプト例：
「URLとタイトル、カテゴリを保存できるブックマーク管理アプリを作成。
機能：追加・削除・編集・カテゴリ別表示
技術：HTML5、CSS3、バニラJavaScript、localStorage
UI：シンプルで直感的な操作性を重視」
→ 結果：実用的で保守可能なコードが生成される

そして、効果的なプロンプトは4つの基本要素から構成され,特に命令・指示の段階で役割・目的を与えるとより効果的[^1]とされています。

1. Instruction（命令・指示）：AIモデルに実行させたいタスクを具体的に指示する中核部分
2. Context（背景・文脈）：より質の高い出力を生成するための追加情報（背景、制約条件など）
3. Input Data（入力）：処理対象となる具体的な情報やデータ
4. Output Indicator（出力形式）：生成してほしい出力の形式やフォーマットの指定

代表的なテクニック

• ゼロショット／フューショット（Zero-shot/ Few-shot）：例なし／少数の例つきで指示して精度を上げる。
• 段階的思考を促す（Chain of Thought）：複雑課題は「考える→答える」を段階化。
• 明確さと制約：禁止事項・長さ・トーン・フォーマットを明示。

引用元：
[^1]Best practices for prompt engineering with the OpenAI API
https://help.openai.com/en/articles/6654000-best-practices-for-prompt-engineering-with-the-openai-api

3. 実装環境と使用ツール

開発環境（macOS/Windows）

• エディタ：Cusor（使用しない場合はVScode）
• ブラウザ：Chrome / Safari / Firefox / Edge
• DB: SQLite

AIツール

• 主要ツール：Claude、ChatGPT、Cursor等から選択
• 本記事のプロンプトは汎用的に設計されており、どのツールでも利用可能

使用ツール

• フロントエンド:HTML5/CSS3/バニラJS

• バックエンド:FastAPI 0.104.1、Uvicorn 0.24.0

• デスクトップ:Electron

4. 用語の説明

基本用語・基本概念・UI/UX関連・セキュリティ関連

基本用語

• API（Application Programming Interface）
  異なるソフトウェア同士がやり取りするための仕組み。本記事では、フロントエンドとバックエンドがデータをやり取りする際の「窓口」として機能する。
• フロントエンド / バックエンド
  フロントエンド：ユーザーが直接見て操作する部分（画面のデザインや動き）
  バックエンド：データ処理やデータベースとのやり取りなど、裏側で動作する部分
• localStorage
  ブラウザにデータを保存する仕組み。ページを閉じてもデータが残るため、簡単なデータ保存に使用される。
• Electron
  Web技術(HTML/CSS/JS)をデスクトップアプリとして配布・起動できるフレームワーク。

基本概念

• CRUD操作
  データの基本的な操作の頭文字を取った用語：
  Create（作成）：新規データの追加
  Read（読み取り）：データの表示
  Update（更新）：既存データの編集
  Delete（削除）：データの削除
• ORM（Object-Relational Mapping）
  データベースのデータをプログラムのオブジェクトとして扱える仕組み。本記事ではSQLAlchemyというORMを使用し、SQLを直接書かずにデータベース操作が可能。
• JSON形式
  データ交換用の軽量なテキスト形式。人間にも機械にも読みやすく、Web開発で広く使用される。
  例：{"name": "田中", "age": 25}

UI/UX関連

• レスポンシブデザイン
  PC、タブレット、スマートフォンなど、異なる画面サイズに自動的に対応するデザイン手法。
• モーダル
  画面上に重なって表示される小窓。背景を暗くして、ユーザーの注意を集中させる効果がある。

セキュリティ関連

• サニタイゼーション
  ユーザーが入力したデータから危険な要素を除去・無害化する処理。セキュリティ対策の基本。
• SQLインジェクション
  データベースへの不正な命令を送り込む攻撃手法。適切な対策により防ぐ必要がある。
• XSS（クロスサイトスクリプティング）
  Webページに悪意のあるスクリプトを埋め込む攻撃。入力値の適切な処理で防御する。
• CSRF（クロスサイトリクエストフォージェリ）
  ユーザーの意図しない操作を強制的に実行させる攻撃。トークンを使った認証で対策する。

5. 実装・検証

効果的なプロンプトエンジニアリングには、タスクをどのように構造化するかが重要です。OpenAI[^1]によると、同じゴールでも指示の与え方により成果物の品質が大きく変わることが示されています。

本記事では、Webアプリ開発において以下の2つのアプローチを実際のアプリ開発を通じて、どちらが初学者にとって有効かを検証していきます。
📝 段階的アプローチ

• 理論的背景：「Chain-of-Thought」プロンプティング - 複雑な問題を段階的に解決
• 期待される効果：エラーの局所化、段階的な理解の深化

📦 一括アプローチ

• 理論的背景：「Zero-shot」プロンプティング - 完全な指示による一括生成
• 期待される効果：全体の一貫性、開発速度の向上

検証条件

• 先に要件を定義

• 要件・設計・実装を段階ごとor一括で指示

• 効率性指標による評価：トークン消費量、実装までかかった時間

• 品質指標による評価：要件充足率、構文エラー数、実行エラー数

• 開発体験による評価（主観的）：プロンプト作成難易度（主観評価1-10）、デバッグの困難さ、学習効果、全体像の把握しやすさ

5.1 要件定義

最初にブックマーク管理アプリの要件定義を行い、以下のように指示します。

これからWebアプリの開発を行いたいと考えています。以下の要件定義を記憶してください。
要件定義：
【アプリ名】 ：Bookmark Manager

【目的】：ローカル環境で動作する、カテゴリ別整理とタグ付け機能を持つブックマーク管理アプリ

【機能要件】：
1. ブックマークのCRUD操作（追加/表示/編集/削除）
2. カテゴリ管理（作成/編集/削除）
3. タグ機能（複数タグ付け可能）
4. 検索機能（タイトル/URL/タグ/メモ）
5. ドラッグ&ドロップ機能でブックマーク追加（URL）
6. タイトルの自動取得（URL）
7. インポート/エクスポート（JSON形式）
8. ローカルデータベース（SQLite）

【技術要件】：
- バックエンド：FastAPI + Python
- フロントエンド：HTML + CSS + JavaScript
- データベース：SQLite
- デスクトップアプリ：Electron
- ビルドツール：electron-builder

生成AIと開発したいアプリの要件定義を詳細に議論することでアウトプットの質が向上します。

5.2 段階的アプローチ

5.1で要件定義の指示を行った上で、段階的アプローチでは5段階に分けて実装を行なっていきます。

段階を分け、それぞれのプロンプトに役割等の基本要素を意識することでAIの回答の質が向上が見込めます。

段階的アプローチプロンプト

段階1: 基本的なCRUD機能

段階1：
【役割】
あなたは経験豊富なバックエンドエンジニアです。

【背景・文脈】
ブックマーク管理デスクトップアプリ「Bookmark Manager」の開発プロジェクトを開始します。
まず基盤となるバックエンドAPIから構築し、段階的に機能を追加していく方針です。

【指示】
要件定義に基づき、ブックマークの基本的なCRUD機能を実装してください。

【入力データ】
機能要件：
- ブックマークの追加（URL、タイトル、説明）
- ブックマークの一覧表示
- ブックマークの編集
- ブックマークの削除
- SQLiteデータベースでのデータ永続化

技術要件：
- FastAPI + Python
- SQLite（SQLAlchemy ORM使用）

【出力形式】
以下のファイル構造で生成：
- main.py（FastAPIアプリケーション）
- models.py（データモデル）
- database.py（データベース設定）
- requirements.txt

動作確認用のcurlコマンド例も提供してください。

段階2: カテゴリとタグ機能の追加

段階2：
【役割】
あなたは経験豊富なバックエンドエンジニアです。

【背景・文脈】
段階1で作成した基本的なCRUD機能が正常に動作しています。
次に、ブックマークを整理するための機能を追加します。

【指示】
既存のコードに、カテゴリ管理とタグ機能を追加してください。

【入力データ】
追加する機能：
- カテゴリのCRUD操作（色とアイコン付き）
- タグの管理（複数タグ付け可能）
- ブックマークとカテゴリ・タグの関連付け
- カテゴリ別・タグ別のフィルタリング

【出力形式】
更新が必要なファイル：
- models.py（リレーションシップの追加）
- main.py（新しいエンドポイント）
マイグレーション手順も含めてください。

段階3: 検索とユーティリティ機能

段階3：
【役割】
あなたは経験豊富なバックエンドエンジニアです。

【背景・文脈】
段階2で基本機能とカテゴリ・タグ機能が実装済みです。
ユーザビリティを向上させる機能を追加します。

【指示】
検索機能とインポート/エクスポート機能を実装してください。

【入力データ】
追加する機能：
- 検索機能（タイトル/URL/タグ/メモ）
- URLからのタイトル自動取得
- JSON形式でのインポート/エクスポート
- ソート機能

【出力形式】
必要な追加コードと、外部ライブラリがあればrequirements.txtの更新内容を提供してください。

段階4: フロントエンドの実装

段階4：
【役割】
あなたは経験豊富なフロントエンドエンジニアです。

【背景・文脈】
バックエンドAPIが完成しました。
ユーザーが直感的に操作できるインターフェースを構築します。

【指示】
HTML/CSS/JavaScriptでフロントエンドを実装してください。

【入力データ】
UI要件：
- レスポンシブデザイン
- カード形式でのブックマーク表示
- モーダルフォーム
- ドラッグ&ドロップでのURL追加
- リアルタイム検索

【出力形式】
以下のファイルを生成：
- index.html
- style.css（ダークモード対応）
- script.js（fetch APIでバックエンドと通信）

段階5: Electronアプリの作成

段階5：
【役割】
あなたは経験豊富なデスクトップアプリ開発者です。

【背景・文脈】
WebアプリケーションがFastAPI + フロントエンドで完成しています。
これをスタンドアロンのデスクトップアプリにパッケージングします。

【指示】
Electronでデスクトップアプリとしてパッケージングしてください。

【入力データ】
要件：
- FastAPIサーバーの自動起動/終了
- メインプロセスとレンダラープロセスの分離
- electron-builderでのビルド設定
- macOS/Windows対応

【出力形式】
以下のファイルを生成：
- electron/main.js
- package.json
- ビルドとインストール手順

プロンプトから実装後の画面（参考）

5.3 一括アプローチ

5.1で要件定義の指示を行った上で、一括アプローチでは以下のプロンプトで一度に全ての機能を実装します。

一括の際は基本要素を意識しつつ、アプリ自体の構造を細かく指示することでAIの回答の質が向上が見込めます。

一括アプローチプロンプト

【役割】
あなたは経験豊富なフルスタックエンジニアです。

【背景・文脈】
個人利用向けのブックマーク管理デスクトップアプリ「Bookmark Manager」を開発します。
ローカル環境で動作し、Webブラウザのブックマークを効率的に整理・検索できるツールです。
すべての機能を含む完全なアプリケーションを一度に構築してください。

【指示】
要件定義に基づき、完全なブックマーク管理アプリを作成してください。

【入力データ】
機能要件：
1. ブックマークのCRUD操作（追加/表示/編集/削除）
2. カテゴリ管理（作成/編集/削除、色とアイコン付き）
3. タグ機能（複数タグ付け可能）
4. 検索機能（タイトル/URL/タグ/メモ）
5. ドラッグ&ドロップ機能でブックマーク追加
6. URLからのタイトル自動取得
7. インポート/エクスポート（JSON形式）
8. SQLiteでのデータ永続化

技術要件：
- バックエンド：FastAPI + Python
- フロントエンド：HTML + CSS + JavaScript
- データベース：SQLite（SQLAlchemy ORM）
- デスクトップアプリ：Electron
- ビルドツール：electron-builder

UI/UX要件：
- レスポンシブデザイン
- カード形式表示
- モーダルフォーム
- リアルタイム検索
- ダークモード対応

セキュリティ要件：
- 入力値のサニタイゼーション
- SQLインジェクション対策
- XSS対策

【出力形式】
以下の完全なプロジェクト構造で生成してください：

bookmark-manager/
├── backend/
│   ├── main.py（すべてのエンドポイント実装）
│   ├── models.py（完全なデータモデル）
│   ├── database.py
│   └── requirements.txt
├── frontend/
│   ├── index.html（完全なUI）
│   ├── style.css（ダークモード含む）
│   └── script.js（すべての機能）
├── electron/
│   ├── main.js（サーバー管理含む）
│   └── preload.js
├── package.json（ビルド設定含む）
└── README.md（セットアップと使用方法）

すべてのファイルは本番環境で使用可能な品質で、エラーハンドリングも含めて実装してください。

プロンプトから実装後の画面（参考）

5.4 検証結果と考察

2つのアプローチからWebアプリを実装後、効率性・品質・開発体験に対して評価を行いました。

開発体験に関しては主観での評価になっています。

効率性指標による評価

評価指標\アプローチ	測定方法	段階的	一括
総トークン数(入力/出力)	AIツールの使用統計より取得	78k(66/12)	92k(14/78)
最初に動作するまで時間	実装開始〜Webアプリ初回起動の実測	2時間30分	1時間20分
完成までにかかった時間	全要件実装完了までの実測	3時間15分	2時間55分
平均デバック時間	エラー発生〜解決の平均時間	18分	22分
プロンプト回数	質問と回答の総カウント	Q:25,A:26	Q:20,A:22
修正ラウンド数	エラー修正の往復回数	20	13

品質指標による評価

評価指標\アプローチ	測定方法	段階的	一括
要件充足率	実装機能数÷要件数×100	97.5%	100%
総コード行数	全ファイルの行数合計	12,752行	22,121行
コード重複率	重複コード÷総コード×100	28%	19%
実行時エラー数	開発中の実行時エラー総数	15	3
構文エラー数	開発中の構文エラー総数	12	9

開発体験による評価（1〜10）

評価指標\アプローチ	段階的	一括	備考
プロンプト作成のしやすさ	7	5	段階的の方が支持が明確になりやすい
デバッグの容易さ	8	5	初心者視点ではエラーの範囲が限定的
学習効果	8	6	段階的の方が理解しやすい
全体像の把握しやすさ	7	8	一括の方が構造を把握しやすい

考察

なぜ結果に差が出たのか

段階的アプローチでは早期に動作確認ができ、エラーが局所的で解決が容易でした。　一方、一括アプローチでは初回に大量のコードが生成されたことで、コンテキストを追いきれず実装されていない機能追加や、エラーが複数層にまたがるため解決に時間がかかりました。

また、一括でコード生成させたことで修正のたびに他プログラムのファイルのコードも修正していたことがコード行数の多さに起因していると考えられます。

初学者へのおすすめアプローチとその理由

初学者には段階的アプローチを推奨します
理由は以下の3点です：

1. 各技術要素を段階的に理解でき、学習効果が高い
2. エラーの影響範囲が限定的で、デバッグスキルが自然に身につく
3. 小さな成功体験を積み重ねることで、挫折しにくい

ただし、全体像を先に把握したい場合は、一括アプローチで生成したコードを「読む教材」として活用することも有効です。

6.まとめ

本記事では、「バイブコーディング入門」として、プロンプトエンジニアリングの基本概念から実際のWebアプリ開発まで、体系的に解説しました。

本記事で学んだこと

• プロンプトエンジニアリングの基本要素を意識することで、AIへの指示が格段に明確になることを確認
• 2つの開発アプローチの特性:
  段階的アプローチはエラー対処が容易で、初学者に最適
  一括アプローチでは開発速度が速く、経験者向け

バイブコーディングを始める方へ

プログラミング経験がなくても、適切なプロンプトエンジニアリングを身につければ、実用的なアプリケーションを開発できる時代になりました。

重要なのは、

• まず小さく始める（段階的アプローチで基礎を学ぶ）
• プロンプトの基本要素を意識して書く習慣をつける
• エラーを恐れず、AIとの対話を重ねる

本記事が、皆様のバイブコーディング入門の一助となれば幸いです。実際にブックマークアプリを作りながら、AIとの協働開発の可能性を体感していただければと思います。
最後までお読みいただき、ありがとうございました。

7.宣伝

弊社ではデータ基盤やLLMのご相談や構築も可能ですので、お気軽にお問合せください。
https://solution.rounda.co.jp/

また、中途採用やインターンの問い合わせもお待ちしています！

https://www.wantedly.com/companies/company_5576351/projects