ユースケース

このドキュメントでは、5つの具体的なシナリオを通じて、実際のプロジェクトで Oh My OpenCode を効率的に使用する方法を示します。

シナリオ 1: 大規模プロジェクトのリファクタリング

シナリオの説明

5年の歴史があり、50万行以上のコードを持つ Eコマースプラットフォームを、JavaScript から TypeScript へ移行しつつ、古いアーキテクチャパターンをリファクタリングする必要があります。

課題

コードベースが巨大で、一度に移行することができない
ビジネスの継続性を維持する必要がある
多くのモジュールが相互に依存しており、影響範囲の評価が困難

解決策

Oh My OpenCode のマルチエージェント連携と LSP ツールを活用します：

# ステップ 1: アーキテクチャ分析
opencode "@oracle 現在のプロジェクトアーキテクチャを分析し、TypeScript 移行計画を策定して。移行フェーズを分割してね。"

# ステップ 2: 依存関係分析 (バックグラウンドタスク)
opencode "ulw: @explore すべてのモジュール依存関係を分析し、依存関係グラフを生成して。クリティカルパスとなるモジュールを特定して。"

# ステップ 3: モジュールごとの移行
opencode "ulw: @backend-engineer user-service モジュールを TypeScript に移行して。LSP ツールを使用して型安全性を確保してね。"

# ステップ 4: 検証とテスト
opencode "@explore LSP ツールを使用して型エラーをチェックし、テストスイートを実行して。移行レポートを生成して。"

設定

{
  "subscription": "claude-max20",
  "sisyphus": {
    "enabled": true,
    "max_concurrent_tasks": 3
  },
  "agents": {
    "oracle": {
      "enabled": true,
      "prompt_append": "ビジネスの継続性を考慮し、インクリメンタルな移行計画を提供してください"
    },
    "explore": {
      "enabled": true,
      "tools": {
        "lsp": true,
        "ast_grep": true
      }
    },
    "backend-engineer": {
      "enabled": true,
      "prompt_append": "API の後方互換性を維持し、完全な型注釈を追加してください"
    }
  },
  "lsp": {
    "enabled": true,
    "languages": ["typescript", "javascript"]
  },
  "background_task": {
    "enabled": true,
    "defaultConcurrency": 3
  }
}

実施ステップ

アーキテクチャ評価 (1日)

opencode "@oracle 現在のアーキテクチャを評価し、技術的負債を特定して。リファクタリングの優先順位を確立して。"

依存関係分析 (並列、2日)

opencode "ulw: @explore モジュール依存関係を分析し、 @librarian TypeScript 移行のベストプラクティスを調査して。"

モジュール移行 (バッチ、4週間)

# 各モジュールを個別に移行
opencode "ulw: @backend-engineer auth モジュールを移行し、 @explore 型カバレッジを検証して。"

統合テスト (継続的)

opencode "@explore 完全なテストスイートを実行し、移行の進捗状況を報告して。"

結果

✅ 4週間で50万行の移行を完了
✅ 100% の TypeScript 型カバレッジ
✅ ビジネスの中断ゼロ
✅ 47個の潜在的なバグを発見し修正

シナリオ 2: マルチフレームワーク・フルスタックアプリケーション開発

シナリオの説明

React フロントエンドと Node.js + Express バックエンドを持つ SaaS 製品を開発し、3週間で MVP を完成させる必要があります。

課題

フロントエンドとバックエンドの同期開発が必要
API インターフェースの頻繁な調整が必要
時間の制約により効率的なコラボレーションが必要

解決策

マルチエージェントによる並列開発を使用します：

# ultrawork モードを開始
opencode "ulw: フロントエンドのログインインターフェースとバックエンド API を含むユーザー認証システムを開発して。JWT と OAuth2 をサポートしてね。"

# Sisyphus が自動的に割り当て：
# - @oracle: 認証アーキテクチャとデータモデルの設計
# - @frontend-ui-ux-engineer: ログイン/登録インターフェースとユーザーエクスペリエンスの実装
# - Sisyphus: バックエンドロジックと API エンドポイントの実装
# - @librarian: セキュリティのベストプラクティスの調査

設定

{
  "subscription": "claude-max20",
  "sisyphus": {
    "enabled": true,
    "delegation_strategy": "parallel",
    "max_concurrent_tasks": 3
  },
  "agents": {
    "oracle": {
      "enabled": true,
      "temperature": 0.7
    },
    "frontend-engineer": {
      "enabled": true,
      "prompt_append": "React 18 + TypeScript + Tailwind CSS + React Query を使用してください"
    },
    "backend-engineer": {
      "enabled": true,
      "prompt_append": "Node.js + Express + PostgreSQL + Prisma ORM を使用してください"
    },
    "librarian": {
      "enabled": true
    }
  },
  "context_injection": {
    "enabled": true,
    "files": ["AGENTS.md", ".opencode/TECH_STACK.md"]
  }
}

プロジェクト構造とコンテキスト

<!-- project/AGENTS.md -->
# プロジェクト基準

## 技術スタック
- フロントエンド: React 18 + TypeScript + Vite + Tailwind
- バックエンド: Node.js 18 + Express + PostgreSQL + Prisma
- 認証: JWT + OAuth2 (Google, GitHub)

## API 基準
- RESTful API 設計
- 統一されたエラーハンドリング
- リクエスト/レスポンスの出力ログ

## コード基準
- ESLint + Prettier
- Husky + lint-staged
- コミットは CI チェックに合格する必要がある

ワークフロー

# 1日目：アーキテクチャ設計
opencode "@oracle データモデル、API エンドポイント、フロントエンドルートを含むユーザー認証システムのアーキテクチャを設計して。"

# 2-3日目：並列開発
opencode "ulw: @frontend-ui-ux-engineer ログイン/登録インターフェースを実装し、 Sisyphus 認証 API を実装して。"

# 4日目：統合とデバッグ
opencode "@explore フロントエンド/バックエンドの統合問題を分析し、API インターフェースを調整して。"

# 5日目：テストと最適化
opencode "ulw: @frontend-ui-ux-engineer E2E テストを追加し、バックエンドのユニットテストを追加して。"

結果

✅ 5日間で認証システムを完了
✅ フロントエンドとバックエンドの完全な疎結合
✅ 85% のテストカバレッジ
✅ 複数の OAuth2 プロバイダーのサポート

シナリオ 3: オープンソースプロジェクトのドキュメント作成

シナリオの説明

機能は豊富だがドキュメントが不足している人気のあるオープンソースライブラリに、完全なドキュメントサイトを作成する必要があります。

課題

深い理解が必要な複雑なコードベース
正確かつ包括的なドキュメントが必要
サンプルコードが実行可能である必要がある

解決策

調査に @librarian を、作成に @document-writer を使用します：

# ステップ 1: プロジェクト分析
opencode "@explore プロジェクト構造を分析し、すべての公開 API とコア機能をリストして。"

# ステップ 2: ドキュメント調査
opencode "@librarian プロジェクトのコードを調査し、各 API の目的とパラメータを理解して。既存のコメントを読んでね。"

# ステップ 3: ドキュメント作成
opencode "ulw: @document-writer プロジェクトの完全なドキュメントを書いて。以下を含むこと：
- README.md (概要、クイックスタート、インストール)
- API.md (完全な API リファレンス)
- GUIDE.md (使用ガイドとベストプラクティス)
- EXAMPLES.md (一般的なシナリオの例)
LSP ツールを使用して API 情報の正確性を検証してね。"

# ステップ 4: サンプルコード
opencode "@backend-engineer 各 API の実行可能なサンプルコードを書き、詳細なコメントを追加して。"

設定

{
  "subscription": "chatgpt-plus",
  "agents": {
    "librarian": {
      "enabled": true,
      "model": "gpt-4-turbo",
      "temperature": 0.5,
      "prompt_append": "コードとコメントを注意深く読み、ドキュメントの正確性を確保し、明確な説明と例を提供してください"
    },
    "explore": {
      "enabled": true,
      "tools": {
        "lsp": true,
        "ast_grep": true
      }
    },
    "backend-engineer": {
      "enabled": true,
      "prompt_append": "サンプルコードは実行可能で、エラーハンドリングを含み、詳細なコメントを追加してください"
    }
  },
  "lsp": {
    "enabled": true,
    "languages": ["typescript", "javascript"]
  }
}

ドキュメント構造

# ドキュメントの構成案を生成
opencode "@librarian プロジェクトを分析し、カバーすべきすべてのトピックを含むドキュメント構成案を生成して。"

# ドキュメント構成案の例：
# docs/
# ├── README.md              # プロジェクト概要
# ├── getting-started.md     # クイックスタート
# ├── installation.md        # インストールガイド
# ├── api/
# │   ├── configuration.md   # 設定 API
# │   ├── core.md           # コア API
# │   └── utilities.md      # ユーティリティ関数
# ├── guides/
# │   ├── basic-usage.md    # 基本的な使用法
# │   ├── advanced.md       # 高度なテクニック
# │   └── best-practices.md # ベストプラクティス
# └── examples/
#     ├── quickstart.md     # クイックサンプル
#     └── real-world.md     # 実践的なケース

結果

✅ 2日間で完全なドキュメントサイトを完了
✅ すべての公開 API をドキュメント化
✅ 30以上の実行可能なサンプル
✅ GitHub スターが 300% 増加

シナリオ 4: 複雑なバグのデバッグ

シナリオの説明

本番環境で断続的にパフォーマンスの問題が発生しているが、エラーログが不明確で再現が困難です。

課題

バグの再現が困難
巨大なコードベースで問題箇所の特定が難しい
本番環境に影響しており、迅速な解決が必要

解決策

Oracle + Explore を使用して深い分析を行います：

# ステップ 1: 情報収集
opencode "@explore エラーログとモニタリングデータを分析し、異常パターンを特定して。"

# ステップ 2: コード分析
opencode "ulw: @explore LSP ツールを使用して不審なモジュールの呼び出しチェーンを分析し、 @oracle 根本原因の可能性を評価して。"

# ステップ 3: 仮説検証
opencode "@oracle 分析結果に基づいて 3 つの仮説を提案し、 @explore 各仮説の証拠を見つけて。"

# ステップ 4: 修正と検証
opencode "@backend-engineer 修正案を実装し、モニタリングとログを追加して。 @explore 修正の効果を検証して。"

設定

{
  "subscription": "claude-max20",
  "sisyphus": {
    "enabled": true,
    "max_concurrent_tasks": 2
  },
  "agents": {
    "oracle": {
      "enabled": true,
      "temperature": 0.7,
      "prompt_append": "問題を体系的に分析し、並行性、キャッシュ、ネットワークなどの要因を考慮してください"
    },
    "explore": {
      "enabled": true,
      "temperature": 0.3,
      "tools": {
        "lsp": true,
        "ast_grep": true
      },
      "prompt_append": "コードの実行パスを注意深く追跡し、エッジケースや例外に焦点を当ててください"
    },
    "backend-engineer": {
      "enabled": true,
      "prompt_append": "修正は後方互換性が必要であり、防御的なプログラミング手段を追加してください"
    }
  }
}

デバッグプロセス

# 1. ログ分析
opencode "@explore 直近 7 日間のエラーログを分析し、最も頻繁なエラーと時間のパターンを特定して。"

# 2. パフォーマンス分析
opencode "@explore LSP ツールを使用してパフォーマンスボトルのあるモジュールを分析し、すべてのデータベースクエリと API 呼び出しを見つけて。"

# 3. コードレビュー
opencode "@oracle 不審なコードをレビューし、潜在的な並行性の問題、メモリリーク、またはリソース競合を特定して。"

# 4. 修正の実装
opencode "@backend-engineer 修正を実装して：
- データベースコネクションプール管理の追加
- クエリの最適化、インデックスの追加
- タイムアウトとリトライメカニズムの追加
- エラーハンドリングとログ出力の改善"

# 5. 検証
opencode "@explore テスト環境で問題を再現し、修正の効果を検証して。ストレステストを実行してね。"

結果

✅ 4時間で根本原因を特定
✅ 修正後、パフォーマンスが 60% 向上
✅ エラー率が 95% 減少
✅ 包括的なモニタリングとアラートを追加

シナリオ 5: UI/UX ラピッドプロトタイピング

シナリオの説明

プロダクトマネージャーが新しい機能案を提案しました。ユーザーテストのために、インタラクティブなプロトタイプを迅速に実装する必要があります。

課題

時間の制約 (2日)
現実に近いインタラクションが必要
その後の調整が必要になる可能性がある

解決策

迅速なイテレーションのために、フロントエンド専門エージェントを使用します：

# 迅速なプロトタイプ開発
opencode "@frontend-engineer ユーザーダッシュボードのプロトタイプを実装して。以下を含むこと：
- データビジュアライゼーションチャート (Recharts を使用)
- レスポンシブレイアウト (Tailwind CSS)
- モックデータとインタラクション
- スムーズなアニメーション
React + TypeScript + Vite を使用してね。"

設定

{
  "subscription": "chatgpt-plus",
  "agents": {
    "frontend-engineer": {
      "enabled": true,
      "model": "gpt-4",
      "temperature": 0.6,
      "prompt_append": "迅速なプロトタイプの要件：\n- コアなインタラクションフローを優先する\n- 既製の UI コンポーネントライブラリ (shadcn/ui, Headless UI) を使用する\n- モックデータと API 呼び出しを行う\n- 視覚効果とユーザーエクスペリエンスに焦点を当てる\n- コードは簡潔で調整しやすいものであること"
    }
  }
}

プロトタイプ開発プロセス

# ステップ 1: レイアウトとナビゲーション
opencode "@frontend-engineer ダッシュボードのレイアウトを実装して：サイドバーナビゲーション、トップバー、メインコンテンツエリア"

# ステップ 2: コアコンポーネント
opencode "ulw: @frontend-engineer コアコンポーネントを実装して：
- データカード (KPI 指標)
- チャートコンポーネント (折れ線グラフ、パイチャート)
- データテーブル (ソート、フィルタリング可能)
- アクションボタンとフォーム"

# ステップ 3: インタラクションとアニメーション
opencode "@frontend-engineer インタラクティブな効果を追加して：
- ページ遷移アニメーション
- データ読み込み状態
- ホバーとクリックのフィードバック
- レスポンシブ対応"

# ステップ 4: モックデータ
opencode "@frontend-engineer モックデータと API を作成して。 MSW (Mock Service Worker) を使用してね。"

プロジェクト設定

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true
  }
})

// package.json (依存関係)
{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "recharts": "^2.10.0",
    "tailwindcss": "^3.4.0",
    "@headlessui/react": "^1.7.0",
    "framer-motion": "^10.16.0"
  }
}

結果

✅ 1.5日でインタラクティブなプロトタイプを完成
✅ 15以上の美しいコンポーネントを含む
✅ 完全なモックデータと API
✅ ユーザーテストでの非常に良好なフィードバック

まとめ

シナリオ比較

シナリオ	主なエージェント	時間	コア機能
大規模リファクタリング	Oracle + Explore	4週間	LSP + 並列タスク
フルスタック開発	Frontend + Backend	5日間	マルチエージェント連携
ドキュメント作成	Librarian + Explore	2日間	LSP + コード分析
バグデバッグ	Oracle + Explore	4時間	LSP + 深い分析
UI プロトタイプ	Frontend Engineer	1.5日	迅速なイテレーション

主な教訓

適切なエージェントの選択: タスクの種類に基づいて専門エージェントを選択する
ultrawork の活用: 複雑なタスクではすべての機能を有効にする
並列実行: 独立したタスクは並列に処理して効率を高める
LSP ツール: コード分析とリファクタリングのための強力な武器
コンテキスト管理: AGENTS.md によりプロジェクト固有のルールを提供する

一般的な設定の推奨事項

{
  "sisyphus": {
    "enabled": true,
    "max_concurrent_tasks": 3  // サブスクリプションに合わせて調整（例：Claude Max20）
  },
  "lsp": {
    "enabled": true,
    "languages": ["typescript", "python", "go"]  // プロジェクトの言語
  },
  "background_task": {
    "defaultConcurrency": 5,
    "providerConcurrency": {
      "anthropic": 3,
      "openai": 5
    }
  },
  "context_injection": {
    "enabled": true,
    "files": ["AGENTS.md", ".opencode/CONTEXT.md"]
  }
}

これらのパターンをプロジェクトに適用する準備はできましたか？ クイックスタートから始めるか、 ベストプラクティスでさらにヒントをチェックしてください！