TL;DR
- Claude Codeに複数エージェント協調機能を追加するnpmパッケージを作った
-
/composerコマンドで大規模プロジェクトを自動的にタスク分割し、複数のClaude Codeが並行作業 - 要件定義→設計→実装の一連の流れを体系化
-
npm install claude-code-composerですぐに利用可能
Claude Codeとの出会い
大規模開発をエージェントに完全に任せるとエージェントが指示を無視したり、関係のないコードを何度も生成してしまうことがあるかと思います。Claude codeでKiroのように要件定義しつつ、claude codeコマンドから複数エージェントを操作できればよいのにと思いました。
claude-code-composerとは
Claude Codeの機能を拡張し、複数のAIエージェントを協調させて効率的にプロジェクト開発を行うためのnpmパッケージです。各エージェントにコンテキストとタスクを自動で振り分けることで、同時並行でコードを処理できるようにしています。
🌟 主な特徴
- 🤖 マルチエージェント協調: 複数のClaude Codeインスタンスが役割分担
- 📋 自動タスク分割: プロジェクトを適切なタスクに自動分割
- 🔄 体系的プロセス: 要件定義→設計→実装の流れを標準化
-
📁 状態管理:
.composer-agentsディレクトリで進捗を一元管理 - 🛠️ コンテキスト共有: 各エージェントに最適な情報を自動提供
インストール
npm install claude-code-composer
インストールすると、プロジェクトルートに.claude/commands/composer.mdが自動作成され、Claude Codeで/composerコマンドが使用可能になります。
*ただしLinux、MacOSのみ対応。WSL2には未対応。
手動インストールの場合：
npx claude-code-composer install
使ってみる
基本的な使い方
Claude Codeを起動して、/composerコマンドを実行します：
/composer create memo app
実際の動作フロー
composerエージェントは以下のステップで動作します：
- プロジェクト確認 - 要件の明確化とスコープ決定
-
ディレクトリ準備 -
.composer-agentsフォルダを作成 -
要件定義 -
requirements.mdの作成・確認 -
設計書作成 -
design.mdの作成・確認 -
タスク分割 -
tasks.mdで作業を番号付きで分割 - エージェント起動 - タスク数に応じて複数のClaude Codeを自動起動
- 進捗統合 - 各エージェントの成果物を統合
実際に動かしてみた
React + TypeScriptのTodoアプリを作成してみます。
/composer create React todo app with TypeScript
1. 要件定義の生成
composerが以下のような要件定義を自動生成：
# Requirements Definition
## Project Overview
React + TypeScript製のTodoアプリケーション
## Functional Requirements
1. タスクの追加・削除・編集機能
2. 完了状態の切り替え
3. フィルタリング（全て・完了・未完了）
4. ローカルストレージでの永続化
## Technical Requirements
- React 18+
- TypeScript
- CSS Modules
- ESLint + Prettier設定
2. 設計書の作成
技術的なアーキテクチャと実装方針：
# Design Document
## Architecture
- コンポーネントベース設計
- カスタムHooksでロジック分離
- TypeScriptで型安全性確保
## Technology Stack
- Vite (ビルドツール)
- React 18
- TypeScript
- CSS Modules
3. タスクの分割
プロジェクトが以下のように分割されます：
# Task Division
1. プロジェクト環境セットアップ（Vite, TypeScript設定）
2. コンポーネント設計・基本UI実装
3. 状態管理とTodoロジック実装
4. スタイリングとレスポンシブ対応
5. テスト実装とビルド最適化
4. マルチエージェント実行
各タスクに対して、専用Claude Codeエージェントが起動され、以下の作業ディレクトリで並行作業：
project-root/
├── .composer-agents/
│ ├── requirements.md
│ ├── design.md
│ ├── tasks.md
│ └── contexts/
│ ├── agent1_context.md # 環境セットアップ用
│ ├── agent2_context.md # UI実装用
│ ├── agent3_context.md # ロジック実装用
│ └── ...
└── work/
├── agent1/ # 環境設定ファイル
├── agent2/ # UIコンポーネント
├── agent3/ # ビジネスロジック
└── ...
活用シーン
🚀 大規模Webアプリケーション開発
/composer develop full-stack web app with Next.js, Prisma, and PostgreSQL
フロントエンド、バックエンドAPI、データベース設計を並行開発
🔧 レガシーシステムのモダン化
/composer modernize legacy PHP app to microservices with Docker
段階的移行計画を立てて、リスクを管理しながら並行作業
📚 新技術スタックの学習プロジェクト
/composer learn Rust web development with Actix and SQLx
チュートリアル、実装、テストを体系的に進行
実際に使ってみた感想
今後のロードマップ
短期目標
- 各エージェントにペルソナを付与して、専門性を高める
- （できれば）Windows WSLにも対応する
- その他、アイディアなどあれば
まとめ
claude-code-composerは、AIを活用した次世代の開発体験を目指しています。特に：
- 学習中の開発者: 体系的なアプローチで効率的にスキルアップ
- 個人開発者: 一人で大規模プロジェクトに挑戦可能
- プロトタイプ開発: 高速でMVPを構築
Claude Codeの可能性を最大限に引き出し、開発の生産性と品質を同時に向上させる画期的なツールです。
ぜひ試してみて、フィードバックをお寄せください！
リンク・参考資料
この記事が役に立ったら、ぜひLIKEとストックをお願いします！ 🙏
AIトレンドやニュースのキャッチアップのためのDiscordグループをやっています。ぜひ参加ください！ 🙏
#Claude #AI #開発効率化 #npm #JavaScript #自動化