IBM Project Bobで始めるAI駆動開発 〜 AIと一緒に5分でWebアプリを作ってみた

「AIがコードを書いてくれる」って、どこまで本当なんだろう

GitHub CopilotやChatGPTを使ったことがある方なら、「AIにコードを手伝ってもらう」体験をしたことがあるかもしれません。私自身、Copilotは日常的に使っているのですが、今回試してみたIBM Project Bobは、ちょっと違う体験でした。

「こういうの作りたいんだけど」と日本語でお願いすると、動くコードを最初から最後まで作ってくれるんです。「本当にそんなにうまくいくの？」と半信半疑だったので、実際に試してみることにしました。

この連載では、私がBobを使って試行錯誤しながらシステムを作っていく様子をお伝えします。第1回は、一番シンプルな「エコーバックサーバー」を作ってみました。

IBM Project Bobについて

IBM Project Bobは、自然言語での指示をもとにコード生成や開発作業を支援してくれる、IBMのAI開発支援ツールです。

※本記事のコードは、筆者が実際に IBM Project Bob により生成したものをそのまま掲載しています。

私が使ってみて感じた特徴は：

日本語で普通に話せる：英語で説明するのが苦手な私には助かります。「〜を作ってください」と日本語でお願いできます。

完成したファイルを作ってくれる：「次の行を予測」だけじゃなく、server.jsやpackage.jsonなど、必要なファイルをまとめて作ってくれました。

エラー処理も考えてくれる：特にお願いしなくても、エラーハンドリングを入れてくれていました。

実際にやってみた：エコーバックサーバー作り

では、実際にBobを使ってWebアプリを作ってみます。作るのは「送られてきたメッセージをそのまま返すサーバー」です。

ステップ1：フォルダを用意

まず、作業用のフォルダを作りました。私は普段、~/Documents/gitの下にプロジェクトをまとめているので：

cd ~/Documents/git
mkdir -p bob-projects/phase0-echo-app
cd bob-projects/phase0-echo-app

この時点では、フォルダは空っぽです。

ステップ2：Bob-IDEでプロジェクトフォルダを開く

• Bob-IDEを起動します

• 画面左上のメニューから「File」→「Open Folder...」を選択します（ショートカット：⌘O）
  

• ファイル選択ダイアログが表示されるので、先ほど作成した ~/Documents/git/bob-projects/phase0-echo-app フォルダを選択します

• 「開く」ボタンをクリックします

• この操作を行うと、Bob-IDEの左側のEXPLORERパネルに「PHASE0-ECHO-APP」というプロジェクト名が表示されます。

画像の通り、現時点ではフォルダ内にファイルが存在しないため、EXPLORERのプロジェクト名の下には何も表示されていません。 これは正常な状態です。右側のWelcome画面には、Bob-IDEの基本的な使い方や、最近開いたプロジェクトなどが表示されています。

それでは、この空のワークスペースに、次はBobと対話しながらファイルを作成していきます

ステップ3：Bobにお願いしてみる

Bob IDEでこのフォルダを開いて、こんな感じでお願いしてみました：

HTTPリクエストのBodyをそのまま返す、シンプルなNode.js Expressサーバーを作成してください。

要件：
- ポート3000で起動
- POSTリクエストを /echo エンドポイントで受け付ける
- リクエストBodyをJSONとしてパースし、そのまま返す
- エラーハンドリングを含める
- package.jsonも作成する

ファイル構成：
- server.js: メインサーバーコード
- package.json: 依存関係定義

作業モードについて

Bob-IDEには複数の作業モード（Plan、Code、Advanced、Ask）がありますが、今回はデフォルト設定のまま作業しました。正直、最初はモードの存在にも気づいていませんでしたが、特に問題なく進められました。

初めての方は、デフォルト設定のまま始めて大丈夫です。

「これで伝わるかな...」とドキドキしながら送信しました。

ステップ4：Bobが作ってくれた

数秒待つと、「タスク完了！」と表示されました。見てみると、server.jsとpackage.jsonの2つのファイルが作られていました。

中身を見てみると：

package.json：

{
  "name": "echo-server",
  "version": "1.0.0",
  "description": "Simple HTTP echo server that returns request body",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "node server.js"
  },
  "keywords": [
    "echo",
    "server",
    "express"
  ],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  }
}

シンプルで分かりやすい構成です。

server.js：

const express = require('express');
const app = express();
const PORT = 3000;

// JSONリクエストボディをパースするミドルウェア
app.use(express.json());

// エラーハンドリング用のミドルウェア（JSONパースエラー対応）
app.use((err, req, res, next) => {
  if (err instanceof SyntaxError && err.status === 400 && 'body' in err) {
    return res.status(400).json({ 
      error: 'Invalid JSON',
      message: err.message 
    });
  }
  next();
});

// /echo エンドポイント - POSTリクエストのBodyをそのまま返す
app.post('/echo', (req, res) => {
  try {
    // リクエストボディが空の場合のチェック
    if (!req.body || Object.keys(req.body).length === 0) {
      return res.status(400).json({ 
        error: 'Empty request body',
        message: 'Request body is required' 
      });
    }
    
    // リクエストボディをそのまま返す
    res.json(req.body);
  } catch (error) {
    // 予期しないエラーのハンドリング
    res.status(500).json({ 
      error: 'Internal server error',
      message: error.message 
    });
  }
});

// ルートエンドポイント（サーバー稼働確認用）
app.get('/', (req, res) => {
  res.json({ 
    message: 'Echo Server is running',
    usage: 'POST /echo with JSON body to echo it back'
  });
});

// 404エラーハンドリング
app.use((req, res) => {
  res.status(404).json({ 
    error: 'Not Found',
    message: `Cannot ${req.method} ${req.path}` 
  });
});

// グローバルエラーハンドリング
app.use((err, req, res, next) => {
  console.error('Error:', err);
  res.status(500).json({ 
    error: 'Internal server error',
    message: err.message 
  });
});

// サーバー起動
app.listen(PORT, () => {
  console.log(`Echo server is running on http://localhost:${PORT}`);
  console.log(`POST to http://localhost:${PORT}/echo with JSON body to test`);
});

// Made with Bob

日本語のコメントも付いていて、読みやすかったです。最後に「Made with Bob」という署名も入っていました。

ステップ5：動かしてみる

さっそく動かしてみました：

npm install
npm start

**お願い: ご自身の環境（Mac、Windows、Linuxなど）に合わせて、npmコマンドが実行できるように準備ください。

こんなメッセージが出ました：

Echoサーバーがポート3000で起動しました
http://localhost:3000/echo にPOSTリクエストを送信してください

別のターミナルでテストしてみます：

curl -X POST http://localhost:3000/echo \
  -H "Content-Type: application/json" \
  -d '{"message":"こんにちは"}'

返ってきたのは：

{"message":"こんにちは"}

ちゃんと動きました！日本語メッセージもそのまま返ってきています。

使ってみて気づいたこと

実際に使ってみて、いくつか気づいたことがあります。

エラー対応を自動で入れてくれた

「エラーハンドリングを含めて」とお願いしただけなのに、Bobは3種類のエラー対応を入れてくれました：

• 空のBodyが来たとき → 「ボディが空です」エラー
• おかしなJSON形式が来たとき → 「不正なJSON形式です」エラー
• 存在しないURLにアクセスされたとき → 404エラー

自分で書くと忘れがちな部分も、ちゃんとカバーされていて助かりました。

日本語コメントがありがたい

日本語でお願いしたら、コメントも日本語で書いてくれました。後で見返したときや、チームで共有するときに読みやすいです。

「Made with Bob」という署名

最後にさりげなく入っている「Made with Bob」。AIが作ったコードだということを明示しているんですね。これは今後、重要になってくるかもしれません。

うまくお願いするコツ

今回の体験から、Bobにうまくお願いするコツが見えてきました。

具体的に書く：

• 技術スタックを明示：「Node.js Expressサーバー」
• 詳細を指定：「ポート3000」「/echoエンドポイント」
• ファイル構成も書く：「server.jsとpackage.json」

あいまいな表現は避ける：

• 「簡単なWebサーバー」だけだと、何を作れば良いか分からない
• 「適当に動くやつ」では、Bobも困ってしまう

AIは賢いですが、エスパーではありません。「何を作りたいか」を具体的に伝えるほど、期待に近いコードが返ってくるようです。

やってみた感想

IBM Project Bobを使って、本当に5分程度でWebアプリができました。もちろん、今回は簡単な例ですが、それでも「AIに具体的にお願いする」ことの大切さを実感しました。

生成されたコードは、自分で書いたものと遜色ないくらいしっかりしていて、エラー処理も考えられていました。これからは「コードを書く技術」だけじゃなく、「何を作りたいか説明する技術」も必要になりそうです。

まだまだ試行錯誤中ですが、次回もお付き合いいただければ嬉しいです。

---

次回予告：もっと実践的な課題に挑戦

今回は5分でエコーバックサーバーを作りました。でも、これは序章に過ぎません。

次回（第2回）では、もっと実践的な課題に挑戦します：

• マイクロサービスアーキテクチャ（2つのサービスが連携）
• レジリエンス機能（リトライ、サーキットブレーカー、フォールバック）
• Chaos Engineering（意図的に障害を起こしてテスト）
• 14ファイル、約1,266行のコードを自動生成

しかも、今回の「Advancedモード」ではなく、「Planモード」　と 「Codeモード」 を使います。
実装計画書（847行）もAIが自動生成してくれるんです。

第2回の記事はこちら：
AI駆動開発の実践 〜 IBM Project BobとProject as Codeでマイクロサービスを自動生成

「AIに丸投げ」ではなく「AIと協働」する開発の様子を、ぜひご覧ください。