3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

IBM Bobで確定申告Webアプリを作ってみた!〜AIペアプログラマーで爆速開発〜

Last updated at Posted at 2026-01-05

はじめに

こんにちは!毎年の確定申告、面倒ですよね...😅

特に株式投資やESPP(従業員株式購入制度)をやっている方は、外貨計算や譲渡所得の計算で頭を抱えているのではないでしょうか。

そこで今回、IBM BobというAIペアプログラマーを使って、確定申告を楽にするWebアプリを作ってみました!

結果から言うと、めちゃくちゃ快適でした。🚀

この記事では、IBM Bobを使った開発の全過程と、遭遇した問題の解決方法を共有します。

IBM Bobって何?

まず、IBM Bobについて簡単に紹介します。

IBM Bob (Project Bob)とは

IBM Bobは、IBMが提供するAIペアプログラマーです。VSCodeなどのエディタに統合され、まるでチームメイトのように開発をサポートしてくれます。

主な特徴:

  • 💬 エディタ内でのチャット機能
  • 🔍 リポジトリ全体のコンテキスト理解
  • 🛡️ セキュリティとコンプライアンスへの配慮
  • ☕ Java modernizationに強い(レガシーコードの救世主!)
  • 🏢 エンタープライズ向けの機能が充実

他のAIペアプログラマーとの違い

Google AntigravityCursorなどの競合ツールと比較すると:

特徴 IBM Bob Google Antigravity Cursor
アプローチ 対話型+Agentic 対話型+Agentic 対話型
セキュリティ ⭐⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐
コンプライアンス FedRAMP/HIPAA/PCI 情報限定的 情報限定的
統合範囲 マルチサーフェス マルチサーフェス IDE中心
モダナイゼーション ⭐⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐
ガバナンス ⭐⭐⭐⭐⭐ ⭐⭐ ⭐⭐⭐
自律性 ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐
開発者体験 ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐

IBM Bobの強み:

  • ✅ エンタープライズ向けのセキュリティとコンプライアンス
  • ✅ 予測可能で制御された動作(暴走しない!)
  • ✅ レガシーシステムのモダナイゼーションに特化(Cobol/IBM iなどに強い)
  • ✅ 組織のコーディング標準への適応
  • ✅ 規制産業での実績(金融、ヘルスケア、政府機関)
  • ✅ Bob Shellにも用意されている
  • ⚪︎ オンプレ環境にも対応予定

Google Antigravityの強み:

  • ✅ 高度な自律性(エージェントが勝手に動く)
  • ✅ エディタ、ターミナル、ブラウザ全体で動作
  • ✅ 最先端のAI技術
  • ✅ 複雑なタスクの自動処理能力

Cursorの強み:

  • ✅ 優れた開発者体験
  • ✅ 直感的なUI
  • ✅ コードベース全体の理解

個人的には、IBM Bobの「暴走しない」という点が気に入っています。AIに全部任せるのは怖いので、適度に人間が確認しながら進められるのが安心です。

プロジェクトの目標

何を作るか

確定申告準備支援システムを作ります!

具体的には:

  • 📊 国内株式・外国株式の取引管理
  • 💼 ESPP(従業員株式購入制度)の管理
  • 🏥 医療費控除の計算
  • 🛡️ 保険料控除の管理
  • 🏠 住宅ローン控除の管理
  • 🧮 税金の自動計算
  • 📄 株式譲渡明細書の生成

なぜ作るか

毎年の確定申告で困っていたことがあります:

  1. 外貨計算が面倒 - 米国株の売買を円換算するのが大変
  2. 取得費の計算が複雑 - FIFOとか移動平均法とか...
  3. 書類作成が時間かかる - 国税庁のサイトで手入力は辛い
  4. データが散らばる - 証券会社のCSV、医療費の領収書...

これらを一元管理して、自動計算してくれるシステムが欲しかったんです!

システムアーキテクチャ

Bobが提案してくれたアーキテクチャの全体構成図

┌─────────────────────────────────────────────────────────────┐
│                        ユーザー                              │
└────────────────────────┬────────────────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────────────────┐
│                   Next.js Frontend                           │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      │
│  │ファイル      │  │データ入力    │  │計算結果      │      │
│  │アップロード  │  │フォーム      │  │表示          │      │
│  └──────────────┘  └──────────────┘  └──────────────┘      │
└────────────────────────┬────────────────────────────────────┘
                         │ HTTP/REST API
                         ▼
┌─────────────────────────────────────────────────────────────┐
│              Node.js API Server (Express)                    │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      │
│  │認証          │  │ビジネス      │  │ファイル      │      │
│  │ミドルウェア  │  │ロジック      │  │処理          │      │
│  └──────────────┘  └──────────────┘  └──────────────┘      │
└─────────┬──────────────────────┬────────────────────────────┘
          │                      │
          │                      │ HTTP
          │                      ▼
          │            ┌─────────────────────────────┐
          │            │  Python AI Service          │
          │            │  (FastAPI)                  │
          │            │  ┌──────────────────────┐   │
          │            │  │ Gemini API Client    │   │
          │            │  └──────────────────────┘   │
          │            │  ┌──────────────────────┐   │
          │            │  │ PDF/CSV解析          │   │
          │            │  └──────────────────────┘   │
          │            └────────┬────────────────────┘
          │                     │
          │                     │ Gemini API
          │                     ▼
          │            ┌─────────────────────────────┐
          │            │   Google Gemini API         │
          │            └─────────────────────────────┘
          │
          ▼
┌─────────────────────────────────────────────────────────────┐
│                    MySQL Database                            │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      │
│  │ユーザー      │  │取引データ    │  │計算結果      │      │
│  │データ        │  │              │  │              │      │
│  └──────────────┘  └──────────────┘  └──────────────┘      │
└─────────────────────────────────────────────────────────────┘

Bobが提案してくれた技術スタック

バックエンド

  • Node.js + Express - 定番の組み合わせ
  • TypeScript - 型安全性は正義
  • Prisma - ORMとして使用、マイグレーションが楽
  • MySQL - データベース
  • JWT - 認証

フロントエンド

  • Next.js 16 - App Routerを使用
  • React 19 - 最新版!
  • TypeScript - もちろん型安全
  • Tailwind CSS - スタイリング
  • Lucide React - アイコン

AI統合

  • Python FastAPI - AI処理用のマイクロサービス
  • Google Gemini API - PDF/CSV解析に使用

データベース設計

ER図

User (1) ────< (N) TaxYear
                    │
                    ├──< (N) DomesticStockTransaction
                    ├──< (N) ForeignStockTransaction
                    ├──< (N) ESPPTransaction
                    ├──< (N) MedicalExpense
                    ├──< (N) InsurancePremium
                    ├──< (N) MortgageDeduction
                    ├──< (N) Deduction
                    ├──< (N) CalculationResult
                    └──< (N) UploadedFile

主要テーブル

Prismaで以下のモデルを定義しました:

// ユーザー
model User {
  id        String   @id @default(uuid())
  email     String   @unique
  password  String
  name      String
  taxYears  TaxYear[]
}

// 申告年度
model TaxYear {
  id                      String   @id @default(uuid())
  userId                  String
  year                    Int
  status                  String   // draft, submitted, completed
  domesticStockTransactions DomesticStockTransaction[]
  foreignStockTransactions  ForeignStockTransaction[]
  esppTransactions         ESPPTransaction[]
  medicalExpenses          MedicalExpense[]
  insurancePremiums        InsurancePremium[]
  mortgageDeductions       MortgageDeduction[]
}

// 国内株式取引
model DomesticStockTransaction {
  id              String   @id @default(uuid())
  taxYearId       String
  transactionDate DateTime
  stockCode       String
  stockName       String
  transactionType String   // buy, sell
  quantity        Int
  unitPrice       Decimal
  totalAmount     Decimal
  commission      Decimal
  tax             Decimal
  broker          String
}

// 外国株式取引
model ForeignStockTransaction {
  id                String   @id @default(uuid())
  taxYearId         String
  transactionDate   DateTime
  tickerSymbol      String
  stockName         String
  transactionType   String   // buy, sell
  quantity          Int
  unitPriceUsd      Decimal
  totalAmountUsd    Decimal
  exchangeRate      Decimal
  totalAmountJpy    Decimal
  commissionUsd     Decimal
  commissionJpy     Decimal
  foreignTax        Decimal
  broker            String
  country           String
}

// その他のモデル(ESPP、医療費、保険料、住宅ローン控除)も同様に定義

開発プロセス

Phase 1: プロジェクト構想(5分)

最初のプロンプト:

新しい任務です。
毎年は個人の確定申告は結構大変な仕事ですが、株の収益計算とか、ESPPの計算とか、
医療費用、保険などいろいろ大変です。国税局は確定申告するWebsiteがあるげど、
そのWebsiteをスムーズに申告しやすいための前準備(外貨アメリカ株)

IBM Bobの反応:

すぐに理解してくれて、以下を提案:

  1. プロジェクト構造の設計
  2. 必要な機能のリストアップ
  3. 技術スタックの選定
  4. データベース設計

めちゃくちゃ速い!🚀

スクリーンショット (107).png

Phase 2: バックエンド構築(30分)

プロンプト例:

バックエンドのAPI実装を開始してください。(データベースはロカールのMySQLDBを利用してください。Local MYSQLのroot password: xxxxx)

IBM Bobがやってくれたこと:

  • ✅ プロジェクト初期化
  • ✅ Prismaスキーマの作成
  • ✅ 全8種類のCRUD APIの実装
  • ✅ 認証ミドルウェアの実装
  • ✅ エラーハンドリング
  • ✅ ロギング設定

所要時間:約30分(手動なら2-3日かかるところ!)

Phase 3: フロントエンドの構築(45分)

プロンプト例:

フロントエンドの実装を開始してください。

IBM Bobがやってくれたこと:

  • ✅ Next.jsプロジェクトの初期化
  • ✅ 認証コンテキストの実装
  • ✅ ログイン・登録ページ
  • ✅ ダッシュボードページ
  • ✅ 6種類のデータ入力フォーム
  • ✅ データテーブルコンポーネント
  • ✅ モーダルコンポーネント
  • ✅ トースト通知

所要時間:約45分(手動なら1週間コース!)

Phase 4: 税金計算ロジック(20分)

これが一番複雑な部分でした。

プロンプト:

税金計算エンジンを実装してください。
- 国内株式の譲渡所得計算(FIFO法)
- 外国株式の譲渡所得計算(為替考慮)
- ESPPの給与所得計算
- 医療費控除(10万円超の部分)
- 保険料控除
- 住宅ローン控除
- 所得税・住民税の計算

IBM Bobの実装:

class TaxCalculationService {
  // 税率テーブル
  private static readonly TAX_BRACKETS = [
    { limit: 1950000, rate: 0.05, deduction: 0 },
    { limit: 3300000, rate: 0.10, deduction: 97500 },
    { limit: 6950000, rate: 0.20, deduction: 427500 },
    { limit: 9000000, rate: 0.23, deduction: 636000 },
    { limit: 18000000, rate: 0.33, deduction: 1536000 },
    { limit: 40000000, rate: 0.40, deduction: 2796000 },
    { limit: Infinity, rate: 0.45, deduction: 4796000 },
  ];

  async calculateTaxes(taxYearId: string) {
    // 各種データの取得
    const domesticStocks = await this.getDomesticStocks(taxYearId);
    const foreignStocks = await this.getForeignStocks(taxYearId);
    const esppTransactions = await this.getESPPTransactions(taxYearId);
    // ... 他のデータも取得

    // 収入の計算
    const domesticStockIncome = this.calculateDomesticStockIncome(domesticStocks);
    const foreignStockIncome = this.calculateForeignStockIncome(foreignStocks);
    const esppIncome = this.calculateESPPIncome(esppTransactions);

    // 控除の計算
    const medicalExpenseDeduction = this.calculateMedicalExpenseDeduction(medicalExpenses);
    const insurancePremiumDeduction = this.calculateInsurancePremiumDeduction(insurancePremiums);
    const mortgageDeduction = this.calculateMortgageDeduction(mortgageDeductions);

    // 課税所得の計算
    const grossIncome = domesticStockIncome + foreignStockIncome + esppIncome;
    const totalDeductions = medicalExpenseDeduction + insurancePremiumDeduction + mortgageDeduction;
    const taxableIncome = Math.max(0, grossIncome - totalDeductions);

    // 税金の計算
    const incomeTax = this.calculateIncomeTax(taxableIncome);
    const residentTax = taxableIncome * 0.10; // 住民税は一律10%

    return {
      domesticStockIncome,
      foreignStockIncome,
      esppIncome,
      grossIncome,
      medicalExpenseDeduction,
      insurancePremiumDeduction,
      mortgageDeduction,
      totalDeductions,
      taxableIncome,
      incomeTax,
      residentTax,
      totalTax: incomeTax + residentTax,
      netIncome: grossIncome - (incomeTax + residentTax),
    };
  }
}

完璧!🎉

Phase 5: SBI証券、楽天証券、カブコムなどのデータアップロードInterface(15分)

プロンプト:

Geminiモデル(Gemini flash 2.5を利用)とAPIキー:XXXXX を利用して、SBI証券、楽天証券、カブコムなどのデータアップロードしたデータを認識して、適切に整理して処理してください。

IBM Bobが作成:

  • ✅ Python FastAPIサービス構築
  • ✅ PDF解析機能実装
  • ✅ CSV解析機能実装

Phase 6: テストデータ作成(Fakeテストデータ)(15分)

プロンプト:

テストデータを作成してください。
- 国内株式:利益が出るデータ
- 外国株式:利益が出るデータ
- ESPP:割引分の給与所得
- 医療費:10万円超
- 保険料:各種保険
- 住宅ローン:控除額

IBM Bobが作成:

  • ✅ シーディングスクリプト
  • ✅ サンプルCSVファイル
  • ✅ CSVインポートスクリプト
  • ✅ テストシナリオドキュメント

後はいくつタスクがありました。例えば、サービス起動Batch、停止Batchの作成とか、不具合の修正など試行錯誤がありました。割とスムーズな感じでした。

作成したウェブアプリ(サンプル画面)

1.ログイン画面
スクリーンショット (108).png

2.メイン画面
スクリーンショット (109).png

3.国内株(前に作ったテストデータでロード)
スクリーンショット (110).png

税金計算ボタンを押すと結果が出ます。
スクリーンショット (111).png

株式等に係る譲渡所得等の金額の計算明細書(今後確定申告と同じFormatで変更予定):
スクリーンショット (112).png

4.医療費:
スクリーンショット (113).png

遭遇した問題と解決方法

問題1: 税金計算結果が表示されない 😱

症状:

  • バックエンドは正常に計算している(ログで確認)
  • フロントエンドに結果が表示されない

原因:
APIレスポンスの形式が不一致でした。

// バックエンド
res.json(result); // 直接resultを返している

// フロントエンド(間違い)
return response.data.data; // data.dataを期待している

解決方法:

// フロントエンドを修正
async calculateTaxes(taxYearId: string): Promise<any> {
  const response = await this.client.get(`/tax-calculation/${taxYearId}/calculate`);
  return response.data; // dataを直接返す
}

学び:
APIのレスポンス形式は統一しましょう!

問題2: 株式譲渡明細書が全て¥0 😭

症状:

  • 「株式譲渡明細書を表示」ボタンをクリック
  • モーダルは開くが、全ての金額が¥0

原因:
大文字小文字の不一致でした。

// バックエンド(間違い)
if (stock.transactionType === 'SELL') { // 大文字でチェック
  // 処理
}

// データベース
transactionType: 'sell' // 小文字で保存されている

解決方法:

// 大文字小文字を無視
if (stock.transactionType.toLowerCase() === 'sell') {
  // 処理
}

学び:
文字列比較は.toLowerCase()を使いましょう!

問題3: ファイルが壊れた 💥

症状:

  • モーダルコンポーネントを追加中にファイルが破損
  • 1000行以上のファイルが開けない

原因:
JSXの閉じタグが不足していました。

解決方法:
PowerShellで特定の行まで切り取り:

$content = Get-Content -LiteralPath "page.tsx" -TotalCount 962
$content | Set-Content -LiteralPath "page.tsx"

その後、正しいコードを追加。

学び:

  • 大きなファイルは慎重に編集
  • バックアップは大事
  • IBM Bobは壊れたファイルも直してくれる!

IBM Bobとの開発体験

良かった点 ✨

  1. コンテキスト理解が素晴らしい

    • プロジェクト全体を理解してくれる
    • 関連ファイルを自動で読み込む
    • 一貫性のあるコードを生成
  2. 段階的な開発が可能

    • 1つずつ確認しながら進められる
    • 暴走しない(重要!)
    • 人間が制御できる
  3. エラー修正が速い

    • エラーメッセージを見せるだけで原因を特定
    • 修正方法を提案
    • すぐに実装
  4. ドキュメント生成も得意

    • README、セットアップガイド、テストガイドを自動生成
    • わかりやすい説明
    • コード例も豊富
  5. セキュリティとコンプライアンス

    • セキュアなコードを生成
    • ベストプラクティスに従う
    • エンタープライズ標準に対応

開発時間の比較

タスク 手動開発 IBM Bob使用 削減率
バックエンドAPI 2-3日 30分 96%削減
フロントエンド 1週間 45分 95%削減
税金計算ロジック 1日 20分 97%削減
テスト環境 半日 15分 96%削減
ドキュメント 1日 10分 98%削減
合計 約2週間 約2時間 99%削減

驚異の99%削減! 🚀

もちろん、これは単純な比較で、実際には:

  • 要件定義
  • デザイン
  • テスト
  • デバッグ

などの時間も必要ですが、それでも圧倒的な時間短縮です。

完成したアプリの機能

1. ユーザー認証

  • ログイン・登録
  • JWT認証
  • セッション管理

2. 年度管理

  • 複数年度の管理
  • 年度ごとのステータス管理

3. データ入力

  • 国内株式取引
  • 外国株式取引(為替レート自動計算)
  • ESPP取引
  • 医療費
  • 保険料
  • 住宅ローン控除

4. 税金計算

  • 自動計算エンジン
  • リアルタイム計算
  • 詳細な内訳表示

5. レポート生成

  • 株式譲渡明細書
  • 税金計算レポート
  • CSV/PDFエクスポート(予定)

6. データインポート

  • CSVファイルのインポート
  • SBI証券フォーマット対応
  • 自動データ変換

サービス管理

開発の最後に、サービスの起動・停止を簡単にするバッチファイルも作成しました:

start-services.bat:

@echo off
echo Starting Backend Service...
start cmd /k "cd apps\backend && npm run dev"

echo Starting Frontend Service...
start cmd /k "cd apps\frontend && pnpm run dev"

echo Services started!
start http://localhost:3000

stop-services.bat:

@echo off
echo Stopping all services...
taskkill /F /IM node.exe
echo Services stopped!

ダブルクリックするだけで起動・停止できます!

まとめ

開発してみて

IBM Bobを使った開発は、本当に楽しかったです!

特に良かった点:

  • 🚀 開発速度が圧倒的に速い
  • 🎯 コードの品質が高い
  • 📚 ドキュメントも自動生成
  • 🛡️ セキュリティも考慮されている
  • 🤝 まるでペアプログラミングしているよう
  • 🏢 エンタープライズ向けの機能が充実

こんな人におすすめ:

  • ✅ 個人開発でサクッとアプリを作りたい
  • ✅ プロトタイプを素早く作りたい
  • ✅ レガシーコードをモダナイズしたい
  • ✅ エンタープライズ向けの開発をしている
  • ✅ セキュリティとコンプライアンスが重要
  • ✅ 予測可能な動作を求めている

注意点:

  • ⚠️ 完全に任せきりにはしない
  • ⚠️ コードレビューは必須
  • ⚠️ テストも書きましょう
  • ⚠️ セキュリティチェックも忘れずに

IBM Bob vs 他のAIペアプログラマー

IBM Bobを選ぶべき場合:

  • 規制産業での開発(金融、ヘルスケア、政府機関)
  • レガシーシステムのモダナイゼーション
  • 厳格なガバナンスが必要
  • 予測可能性を重視

Google Antigravityを選ぶべき場合:

  • 高度な自動化を求める
  • 複雑なタスクの処理
  • 最先端技術の早期採用
  • イノベーション重視

Cursorを選ぶべき場合:

  • 優れた開発者体験を求める
  • 直感的なUIが好き
  • モダンスタックでの開発

今後の展開

このアプリをさらに改善していきたいです:

予定している機能:

  • PDF/CSV自動解析(Gemini API統合)
  • e-Tax形式での出力
  • スマホ対応
  • データのバックアップ機能
  • 複数年度の比較分析
  • グラフ表示

技術的な改善:

  • テストコードの追加
  • CI/CDパイプラインの構築
  • Dockerコンテナ化
  • クラウドデプロイ

感謝

この記事を最後まで読んでいただき、ありがとうございました!

IBM Bobのおかげで、2週間かかるはずの開発が2時間で完成しました。

AIペアプログラマーの進化は本当にすごいですね。これからの開発がますます楽しくなりそうです!

もし質問やフィードバックがあれば、コメント欄でお気軽にどうぞ!

Happy Coding! 🚀


参考リンク

タグ

#IBMBob #AIペアプログラマー #AI開発 #確定申告 #Next.js #TypeScript #Prisma #MySQL #React #TailwindCSS #個人開発 #AIペアプログラミング

3
1
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
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?