こんにちは、ミツカリCTOの塚本こと、つかびー(@tsukaby0) です。
前回のこちらの記事ではGitButlerを使って並列開発をしてみました。
今回の記事ではClaude codeのAgent Teamで全く同じ並列作業をしてみようと思います。
前回はGitButlerのメリットを感じつつも、幾分不便さは残るような結果になりました。確かに複数ブランチをgit worktreeなしで並列に扱える点は良いですが、結局conflictは発生してしまいます。今回は果たしてどうなるのでしょうか。
結論
- Agent Teamでもconflictは発生する。また、うまく協調できずに何度も上書きを繰り返して全く作業が終わらない(ほぼループ)
- git worktreeを導入すると改善する
- tokenの消費がかなり大きい印象
Agent Teamの導入方法
導入は基本的に公式docに沿って操作するだけなので、簡単です。
- まだClaude Codeをインストールしていない場合はこちらのGet Startedに従ってインストール
vi ~/.claude/settings.jsonなどで設定ファイルを編集。詳細はこちらclaudeでClaude Codeを起動して、自然言語で自分が考えるチーム作成の指示をする
チーム作成
Claude Codeを起動して、以下を指示します。
Agent teamを作って欲しいです。一人は開発リーダー、PdMである私とやりとりして他のメンバーへのディレクションやレビューをします。リーダーの下にはフルスタックエンジニアを三名作成してください。リーダーとやりとりして実際に開発します。
⏺ チームを作成します。
まず、チームを作成し、その後リーダーとエンジニア3名を起動します。
⏺ チームが作成されました。次にメンバーを起動します。
⏺ 2 agents launched (ctrl+o to expand)
├─ @dev-leader
│ ⎿ 開発リーダーの起動 (shift+↑ to manage)
└─ @engineer-1
⎿ エンジニア1号の起動 (shift+↑ to manage)
⏺ チーム todo-react-dev を作成し、全メンバーを起動しました。
チーム構成
┌───────────────────────┬────────────────────────┬────────────────────────────────┐
│ 名前 │ 役割 │ 担当 │
├───────────────────────┼────────────────────────┼────────────────────────────────┤
│ team-lead (あなた/私) │ PdM │ 開発指示・意思決定 │
├───────────────────────┼────────────────────────┼────────────────────────────────┤
│ dev-leader │ 開発リーダー │ タスク分解・レビュー・進捗管理 │
├───────────────────────┼────────────────────────┼────────────────────────────────┤
│ engineer-1 │ フルスタックエンジニア │ 実装 │
├───────────────────────┼────────────────────────┼────────────────────────────────┤
│ engineer-2 │ フルスタックエンジニア │ 実装 │
├───────────────────────┼────────────────────────┼────────────────────────────────┤
│ engineer-3 │ フルスタックエンジニア │ 実装 │
└───────────────────────┴────────────────────────┴────────────────────────────────┘
ワークフロー
1. あなた（PdM）が私に開発指示を出す
2. 私がdev-leaderに指示を伝達
3. dev-leaderがタスクを分解し、engineer-1〜3に割り振り
4. エンジニアが実装 → dev-leaderがレビュー → あなたに完了報告
全メンバーが待機中です。開発の指示をお願いします！
@dev-leader❯ dev-leader ready and waiting for instructions
⏺ 全メンバーの起動が完了し、待機状態になりました。
- dev-leader: 待機中
- engineer-1: 待機中
- engineer-2: 待機中
- engineer-3: 待機中
開発の指示をいただければ、dev-leaderに伝達してチームを動かします。何を開発しましょうか？
⏺ engineer-3も待機完了しました。全メンバー揃っています。開発指示をお待ちしています！
⏺ 全員待機中です。何を作りましょうか？
⏺ チーム全員スタンバイOKです。開発したい機能や改善内容を教えてください！
@dev-leader❯ All 3 engineers ready, awaiting PdM instructions
⏺ 了解です、dev-leaderからも全員準備完了の報告が来ました。いつでも開発開始できます。
どんな機能を作りたいか、指示をお願いします！
⏺ チーム全員待機中です。開発指示をお待ちしています！
✢ Synthesizing… (4m 26s · 73.3k tokens)
無事チームを作成できました。
三つの並列開発指示
前回の記事と同様の機能を作成してみます。プロンプトは以下です。
以下の三つの開発をそれぞれの開発者に割り当てて並列に実施してください。それぞれ別々のブランチとして作成してください。 **セッション1（優先度機能）** ``` Todo.jsコンポーネントにタスクの優先度（high/medium/low）を設定できる機能を追加して。 - 優先度によって左側にカラーバーを表示（high:赤、medium:黄、low:緑） - Formにも優先度選択のセレクトボックスを追加 - App.jsのtasksInitialStateに優先度プロパティを追加 ``` **セッション2（ダークモード）** ``` アプリ全体にダークモード対応を追加して。 - App.jsにトグルボタンを配置 - CSS変数を使ってテーマを管理（index.cssに追加） - ユーザーの選択をlocalStorageに保存 - 初期値はシステムのprefers-color-schemeを参照 ``` **セッション3（期限切れハイライト）** ``` 期限切れのタスクを視覚的にハイライトする機能を追加して。 - Todo.jsに期限（dueDate）表示を追加 - Formに日付入力フィールドを追加 - 期限切れのタスクは背景を薄い赤に - 期限が今日のタスクは背景を薄い黄色に - App.jsのtasksInitialStateにdueDateプロパティを追加 ```
結果
プロンプトを与えた後で実際にそれぞれのエージェントが独立して開発を開始しました。素晴らしい！
しかし、結果としては微妙でした。
dev-leaderからレビュー状況の報告が来ました。いくつか問題が見つかっています： 担当: engineer-1 機能: 優先度機能 ステータス: 修正依頼中 問題点: 他の2機能も同じブランチに実装してしまった → スコープ修正中 ──────────────────────────────────────── 担当: engineer-2 機能: ダークモード ステータス: 作業中 問題点: GitButlerのファイルリセット問題が発生 ──────────────────────────────────────── 担当: engineer-3 機能: 期限切れハイライト ステータス: 修正依頼中 問題点: 変更がコミットされていなかった → 再実装依頼中 dev-leaderが各エンジニアに修正指示を出して対応中です。引き続きお待ちください。
前回の記事と同様ですが、同一のフォルダで作業をしているため、問題が発生していそうでした。
具体的には以下のような問題が起きていました。
- エージェントAがファイル1を編集したが、その内容を無視してエージェントBがファイル1を上書きしてしまった
- 上記の影響が何度も発生して半ループ状態になる (※現状Claude ProとMaxの二つを契約しているのですが、このゴタゴタでProのtokenは全て消費されました)
- エージェントAがファイル1を編集し、エージェントCには関係ない変更だがgit commitに入れてしまった
残念です。
git worktreeはあまり好きではないのですが、そちらを使って同じ作業を指示してみます。流石にうまくいくでしょう。
git worktree前提のプロンプト
一旦branchを削除するなどしてクリーンな状態にしてから、冒頭の指示を改良して再度投げてみます。
before
以下の三つの開発をそれぞれの開発者に割り当てて並列に実施してください。それぞれ別々のブランチとして作成してください。
after
以下の三つの開発をそれぞれの開発者に割り当てて並列に実施してください。それぞれ別々のブランチとして作成してください。また、git worktreeを使用して変更が競合しないように気をつけてください。
git worktree版の結果
⏺ 承知しました。dev-leader に指示を伝えます。 ⏺ dev-leader に3つの開発タスクを指示しました。dev-leader がタスクを分解し、各エンジニアにworktree セットアップと実装を指示します。進捗があれば報告が届きます。 @dev-leader❯ worktree作成・タスク割り振り完了報告 ⏺ 順調です。dev-leader がセットアップを完了しました： - Worktree 3つ作成済み（各ブランチごとに独立したディレクトリ） - タスク割り振り 完了 → 3名のエンジニアが並列で実装中 各エンジニアからの完了報告を待ち、dev-leader がコードレビューを行います。進捗があればお知らせします。 ⏺ engineer-2 がダークモード機能の実装を完了し、dev-leader にレビュー依頼を送りました。残り2名の進捗を待っています。 ⏺ 進捗が一気に来ました： ┌────────────────────┬────────────┬──────────┬──────────────┐ │ タスク │ エンジニア │ 実装 │ レビュー │ ├────────────────────┼────────────┼──────────┼──────────────┤ │ ダークモード │ engineer-2 │ 完了 │ 承認 │ ├────────────────────┼────────────┼──────────┼──────────────┤ │ 期限切れハイライト │ engineer-3 │ 完了 │ 承認 │ ├────────────────────┼────────────┼──────────┼──────────────┤ │ 優先度機能 │ engineer-1 │ 修正完了 │ レビュー待ち │ └────────────────────┴────────────┴──────────┴──────────────┘ engineer-1 の修正後のレビュー結果を待っています。 @dev-leader❯ 全3タスク完了・レビュー承認、マージ準備完了 ⏺ 全タスクが完了しました！ 最終結果 ┌────────────────────┬────────────┬────────────────────────────┬────────────────────────┐ │ タスク │ エンジニア │ ブランチ │ 状態 │ ├────────────────────┼────────────┼────────────────────────────┼────────────────────────┤ │ 優先度機能 │ engineer-1 │ feature/task-priority │ 実装完了・レビュー承認 │ ├────────────────────┼────────────┼────────────────────────────┼────────────────────────┤ │ ダークモード │ engineer-2 │ feature/dark-mode │ 実装完了・レビュー承認 │ ├────────────────────┼────────────┼────────────────────────────┼────────────────────────┤ │ 期限切れハイライト │ engineer-3 │ feature/due-date-highlight │ 実装完了・レビュー承認 │ └────────────────────┴────────────┴────────────────────────────┴────────────────────────┘ 3つの機能ブランチがすべてmainへのマージ準備完了の状態です。 次のステップとして、以下のいずれかをご指示ください： - PR作成 → 各ブランチのPRを作成してレビューフローに載せる - mainへマージ → 直接マージする - 動作確認 → 先に各worktreeで動作確認してからマージする ⏺ dev-leader が engineer-1 のレビューも正式に承認しました。全3タスクの実装・レビューが完了しています。 次のステップ（PR作成、マージ、動作確認など）のご指示をお待ちしています。 ⏺ 全チーム待機中です。次のアクション（PR作成、マージ、動作確認）をご指示ください。 ⏺ 全チームがスタンバイ中です。次のステップをお聞かせください。
git worktreeならうまく行きました。先ほどは半ループしており、10分以上作業が終わりませんでしたが、今回は5分ほどで終わった印象です。
この状態で各worktreeフォルダ単位で動作確認すると良いでしょう。実務上はこれら三つの動作確認をしてからPRを作成するかと思います。
しかし、私がworktreeを好きではないのは、各フォルダでsetupをしないといけないからであり、これがDXを低下させていると感じています。何か良い解決方法をご存知の方は教えてください。
各worktreeフォルダではsetupできていないので、ここはメインのフォルダで動作確認してみようと思います。Claude Codeに以下のプロンプトを与えます。
❯ 動作確認したいので、適当なbranchを作ってそこに三つのbranchをmergeしてください。私の方で起動しつつ動作確認します。
⏺ 承知しました。dev-leader に指示します。
⏺ dev-leader に統合ブランチ integration/all-features の作成を指示しました。3つのfeatureブランチを
マージし、コンフリクトがあれば解決してもらいます。完了次第お知らせします。
@dev-leader❯ 統合ブランチ作成完了、コンフリクト解決済み
⏺ 統合ブランチが完成しました。
integration/all-features ブランチ
- 3つのfeatureブランチをすべてマージ済み
- 5ファイルのコンフリクトを解決済み（priority + dueDate + ダークモードの統合）
- vite build でビルド成功確認済み
/Users/tsukaby/IdeaProjects/todo-react で integration/all-features
ブランチに切り替えて動作確認をお願いします。
git checkout integration/all-features
npm run dev
確認結果をお知らせいただければ、次のステップ（mainへのマージ、PR作成など）を進めます。
⏺ dev-leader 待機中です。動作確認の結果をお知らせください。
· Hashing… (5m 20s · 80 tokens)
╒═ team-lead · 80 tokens · shift + ↑/↓ to select
├─ @dev-leader: Baked for 11m 23s · 19 tool uses · 106.0k tokens
├─ @engineer-1: Worked for 11m 17s · 0 tool uses · 42.0k tokens
├─ @engineer-2: Baked for 11m 14s · 0 tool uses · 59.8k tokens
└─ @engineer-3: Worked for 11m 10s · 1 tool use · 53.2k tokens
dev-leaderがいい感じにconflictの解消をしてくれました！
この状態でgitは以下のような状態になっています。
動作確認
pnpm dev でTodoアプリを起動して三つの開発が機能するか見てみます。
うまく実装できていそうです！
余談
１回目の実験では半ループしてしまい、全てのtokenを使い切ってしまいました。そのため、Claude CodeのログインをProアカウントからMax5倍アカウントに切り替えて２回目の実験を行いました。
その後、 /usage で使用量を見たところ10%ほど使用していたので、Agent Teamはかなりtoken消費が大きそうだなと感じました。今回は3並列ですし、極めて薄いコードベースです。特に私からレビュー指摘なども行っていません。そのため、実務の場合は、同じようなちょっとした開発でも30%や40%のtokenを消費していたかもしれません。
まとめ
結局worktreeを使わなければConflictを回避できないという結果になりました。もう少しプロンプトを改良するとうまくできるかもしれません。
worktreeはフォルダが分かれてしまう点が、個人的には嫌なのですが、動作確認したいのであればメインのフォルダに変更をmergeすれば良いです。その時にConflictしていたとしてもコンテキストを知っているエージェントであればうまく解消してくれそうです。
GitButlerも良いですが、Agent Teamも良さそうなので、今後はこちらも使っていきたいです。
現在、ミツカリではITエンジニアを募集しています。興味のある方はぜひお気軽にご連絡ください！
