生成AIを使ったバイブコーディングが一般化しつつある中、IBM Bob という専用IDEを使って、わずか2時間で高機能な投票＆クイズアプリを開発できて、そのうえ、たった１回のコーディング実装では、デバッグを一度も実行しない高品質のアプリを期待以上に完成させたので、この感動を伝えたい！

この記事では、アプリの構想から設計、実装、テストまでのプロセスと、完成したアプリの紹介を行う。※IBM Bob や専用IDEの操作方法そのものは本記事では扱わない。

開発したアプリ［Vote & Quiz System］

オンライン勉強会などで使う、投票またはクイズを提示・回答できるアプリ

図. 管理者UIとユーザー用UI

開発したアプリの主な機能（投票＆クイズ）

• ユーザー：複数ユーザーがリアルタイム・同時に回答できる
• 管理者：テーマ（投票 or クイズ）を作成して公開できる
• 結果表示：ユーザーが回答して一定時間後に、結果を全員が表示できる
• 回答条件１：候補は最大5つまで設定できる
• 回答条件２：時間制限または、時間前に手動で締め切りできる
• 履歴：テーマ・回答候補・回答結果をローカルファイルへ保存

アプリ開発プロセス

手順1. Bobの「planモード」で設計開始

まず、Bobに以下のプロンプトを与えてアプリ設計を相談した。

新しいアプリを開発したい。
・APIアプリは、node.jsでコーディングする。ファイル名はvote-quize.js
・フロントWEBアプリは、HTML/CSS/JavaScriptでコーディングする。ファイル名はvote-quize-manage.*(html, js)およびvote-quize-client.*(html, js)
・開発する場所は、このWindowsのIBM_Bobディレクトリ内の、appディレクトリとwwwディレクトリにソースファイルを保存する。CSSは、bootstrapとbootstrapアイコンをwwwディレクトリにダウンロードして使う。
・本番ではmysqlデータベースを使うが、プロトタイプはappディレクトリのローカルファイルに保存することはできるか？
・アプリ機能要件は下記の通り
　　- フロントWEBは、管理者ひとりと、複数のユーザーが使う。
　　- フロントWEBで、管理者がテーマをAPIアプリに伝える。
　　- APIアプリに接続できるフロントWEBアプリに、Socket通信でテーマを配信する。
　　- テーマは、投票とクイズだ。テーマには、回答候補を追加できる（最大5個までの選択肢）
　　- フロントWEBのユーザーは、投票やクイズ回答の候補に対して、番号を回答できる。
　　- 時間制限で、あるいは管理者が手動で締め切ると、回答結果がユーザーに公表される。
　　- APIアプリは、テーマと回答候補、そしてユーザーからの回答をローカルファイルに記録する。将来はmysqlに保存する。

一旦ここまでだが、追加すべき機能は何か？

プロンプトの回答

Bobは要件を整理し、技術スタック・ディレクトリ構成・機能要件に分類してくれた。

図．要件整理

さらに、8つの追加機能を提案してきたため、すべて採用することにした。

図．Bobの要件整理と追加提案

手順2. 自動で進む設計フェーズ

Bobは以下の設計作業を自動生成してくれた。
• Todoリストの作成

• システムアーキテクチャ設計

• プロジェクト構造（ディレクトリとファイル）

• データモデル設計（回答データのJSON構造含む）

• Socket.ioイベント設計

• UI/UX設計

• 技術スタック詳細

• 実装フェーズのタスク化

• 追加で考慮すべき設計要素の提示

手順3. コード実装フェーズ

実装フェーズでは、Bobが以下を自動で実行してくれた。
• ディレクトリ作成
• 必要モジュールのダウンロード
• 新規ファイル作成
• コードの自動生成
私は「承認」ボタンを押すだけで、実装がどんどん進んでいく。

図．自動実装の様子

手順4. 設計・実装・テストの完了

最終的に、設計図・実装コード・テスト結果がすべて揃った状態でプロジェクトが完成した。

図．完成した設計ドキュメント

アプリの使い方

完成したアプリを動作確認したところ、バグが一切発生しなかったことに驚いた。
従来はデバッグやログ追加、不要関数の整理などに時間がかかっていたが、Bobと要件を固めてから実装したことで、ほぼ修正不要の状態で完成した。
favicon.ico を追加した程度で、他に改善点は見つからなかった。

1. 管理者用アプリ

管理者は十分長いパスワードでログインする。

図．管理者UI画面

新しいテーマの作成

• 投票 or クイズを選択
• タイトルと説明を入力
• 回答候補を最大5つまで追加
• 匿名投稿の設定も可能（要件にないのに自動で追加されていた！）

図．テーマ作成画面

テーマを保存したら「開始」ボタンで配信できる。

図．テーマ公開準備完了

2. ユーザー用アプリ

管理者が開始すると、ユーザー側に設問と回答候補が表示される。

制限時間内に回答すると、締め切り後に結果が表示される。
図．ユーザー回答UI画面

図：結果確認のUI画面

まとめ：2時間で高品質なアプリが完成

アプリ構想 → 設計 → 実装 → テストまで、たった2時間で完了。
見た目も、機能も、期待以上でBobの設計力と実装力に感動した。

次のアクション

本番移行：今回はWindowsパソコンで開発したが、完成したコードはクラウドサーバーにマイグレーションする
学習：今まで使っていた別のバイブコーディングAIでも同じ手法で開発し、Bobとの違いを比較してみる予定

以上