はじめに
本記事はiimonアドベントカレンダー22日目の記事となります。
こんにちは、kogureです。
あっという間に12月ですね、去年にアドベントカレンダーを書いたのが昨日のことのようです。
こうやってあっという間に歳をとっていくのですね。怖いですね。
今回はClaude Codeのサブエージェントをハンズオンで触ってみたいと思います。
というのもチームメンバーにAI関連の情報をマメにキャッチアップしている方がいてその方からサブエージェントというものがあるんだよっていう話を聞いて興味が湧いてきました。
ちょうどアドベントカレンダーの時期と被ったのでせっかく触ってみるならまとめてみようと思い執筆しました。
そこまで深く触っている内容ではないですが、温かい目で見守っていただけたら幸いです。
サブエージェントとは
まず初めにサブエージェントについて公式ドキュメントからの引用で紹介させていただきます。
サブエージェントは、Claude Codeがタスクを委譲できる事前設定されたAIパーソナリティです。
各サブエージェント：
- 特定の目的と専門分野を持っています
- メイン会話とは別の独立したコンテキストウィンドウを使用します
- 使用を許可された特定のツールで設定できます
その動作をガイドするカスタムシステムプロンプトを含みます Claude Codeがサブエージェントの専門分野に一致するタスクに遭遇すると、そのタスクを特化したサブエージェントに委譲でき、サブエージェントは独立して動作し、結果を返します。
イメージ的には別プロセスでClaude Codeのセッションが立ち上がりサブエージェントとして定義した内容に沿ってAIが動いてくれるというものです。 結果自体はメインのエージェントに返されます。
いざハンズオン
では早速サブエージェントはどの様に用意すれば良いのか、から触ってみます。
新しくディレクトリを作成し、そこで実際に公式ドキュメントに沿っていくつかサブエージェントを用意してみました。
/agentと打ち込みenter
Create new agentを選択してenter
今回はお試しで実施なので1を選択してenter
先ほどと同様今回はお試しで実施なので1を選択してenter
DDDの専門家と入力してenter
ここで入力した内容にそってClaude Code側でサブエージェントのmdファイルを用意してくれます。
次にサブエージェントが使用できるツールの選択を行います
今回は検証なので全てのツールを使用できる状態にします
Continueを選択してenter
サブエージェントのモデルを選択します。
各モデルの特徴は公式ドキュメントにまとめられています。
サブエージェントの役割に適切なモデルを選択すると良いと思います。
今回は、より深い推論を期待して Opus を選択してみました
サブエージェントのカラーを選択します
ここで選択したカラーが実際にサブエージェントが呼び出されたときに色で出し分けしてくれます。
ここではレッドを選択してみました。
最後に確認画面が表示され問題なければenterで修正したい場合はescを押してください。
作成すると今回はddd-expert · opusという内容が追加されているのが確認できました。
次に作られたmdファイルを確認して見ます
英語で記載されていて内容の精査まではしていませんが、しっかりとmdファイルが作られていることが確認できました。
同じ手順でひとまず、以下のサブエージェントを作成しました。
動かしてみることが目的なのでサブエージェントとしての粒度は考えていません。
- DDDの専門家
- TDDの専門家
- Reactの専門家
- TypeScriptの専門家
- クリーンアーキテクチャの専門家
- コーディングのレビュー
- 設計のレビュー
- テスト観点のレビュー
公式ドキュメントでは
サブエージェントが利用可能になりました！Claudeは適切な場合に自動的にそれを使用するか、明示的に呼び出すことができます：
と記載されているので適切な場合ってどんな場合なんだ？と思いつつ本当に使えるのか一切、他にはmdファイルを用意せずに使ってみます。
プロンプトは以下の様にしました。
DDD
TDD
React
Vitest
TypeScript
クリーンアーキテクチャ
を用いてTODOアプリを作成してください
11分動かしてみたのですが、サブエージェントが使われている気配がありません。
公式ドキュメントにある「適切な場合」という判断は、ある程度明示的な指示（CLAUDE.mdへの記述など）が前提なのかもしれません。
そこで、次に CLAUDE.md を用意して以下のように役割を定義してみました。
あなたはオーケストレーター（指揮者）です。 ユーザーからコード作成の依頼を受けたら、以下の手順で処理してください。
1.ユーザの指示を適切なサブエージェントを起動して委任する
2.サブエージェントの回答を適切なレビューサブエージェントを起動してレビューしてもらう
3.レビュー内容を踏まえて実装や操作を適切なサブエージェントを起動して委任する
そして同じプロンプトを投げてみました
サブエージェントが立ち上がったことが確認できましたが見る限り、プランモードでClaude Codeが考えた内容をサブエージェントがレビューしている様です。サブエージェントはある程度CLAUDE.mdで指定してあげる必要がありそうですね。
しばらくしてからコンソールを確認すると、抜粋になりますが、しっかりとサブエージェントを使い分けてくれていました。
が、すごい時間がかかりますね。最初にプロンプトを渡してからは自動でやってもらいましたが、完成するまで40分近く動いてました。
完成したのがこちらになります。
しっかりとタスクの追加、タスクの完了、タスクの削除ができるものが出来上がりました。 UIの実装を含めて考えたら約40分で完成させる私の感覚では早いなと思いました。
このセッションで使用したコストは以下の様になりました。
┌───────────────────┬───────────────────────────────────┬───────────┬───────────┬───────────────┬──────────────┬───────────────┬─────────────┬───────────────┐ │ Session │ Models │ Input │ Output │ Cache Create │ Cache Read │ Total Tokens │ Cost (USD) │ Last Activity │ ├───────────────────┼───────────────────────────────────┼───────────┼───────────┼───────────────┼──────────────┼───────────────┼─────────────┼───────────────┤ │ Src-advent │ - haiku-4-5 │ 32,237 │ 105,064 │ 1,166,350 │ 19,375,162 │ 20,678,813 │ $19.33 │ 2025-12-12 │ │ │ - opus-4-5 │ │ │ │ │ │ │ │ │ │ - sonnet-4-5 │ │ │ │ │ │ │ │ └───────────────────┴───────────────────────────────────┴───────────┴───────────┴───────────────┴──────────────┴───────────────┴─────────────┴───────────────┘
src配下ディレクトリ構成は以下の様になりました。
[kogure:~/Src/advent/todo-app/src]
$ tree
.
├── App.css
├── App.tsx
├── application
│ ├── dto
│ │ ├── CreateTodoInput.ts
│ │ ├── index.ts
│ │ ├── TodoOutput.ts
│ │ └── UpdateTodoInput.ts
│ ├── errors
│ │ ├── ApplicationError.ts
│ │ └── index.ts
│ └── usecases
│ ├── CompleteTodoUseCase.ts
│ ├── CreateTodoUseCase.ts
│ ├── DeleteTodoUseCase.ts
│ ├── GetAllTodosUseCase.ts
│ ├── GetTodoByIdUseCase.ts
│ ├── index.ts
│ └── UpdateTodoUseCase.ts
├── assets
│ └── react.svg
├── di
│ └── container.ts
├── domain
│ ├── entities
│ │ └── Todo.ts
│ ├── errors
│ │ └── DomainError.ts
│ ├── repositories
│ │ └── ITodoRepository.ts
│ └── valueObjects
│ ├── DueDate.ts
│ ├── TodoDescription.ts
│ ├── TodoId.ts
│ ├── TodoStatus.ts
│ └── TodoTitle.ts
├── index.css
├── infrastructure
│ ├── persistence
│ │ └── TodoMapper.ts
│ └── repositories
│ ├── InMemoryTodoRepository.ts
│ └── LocalStorageTodoRepository.ts
├── main.tsx
└── presentation
├── components
│ ├── atoms
│ │ ├── Button.tsx
│ │ ├── Checkbox.tsx
│ │ ├── index.ts
│ │ └── Input.tsx
│ ├── molecules
│ │ ├── index.ts
│ │ ├── TodoForm.tsx
│ │ └── TodoItem.tsx
│ └── organisms
│ ├── index.ts
│ └── TodoList.tsx
├── contexts
└── hooks
├── index.ts
└── useTodos.ts
22 directories, 41 files
終わりに
初歩レベルではありますが、サブエージェントのハンズオンこれにて完了となります。 やはりサブエージェントは用意するだけでなく使用することを明示してあげたほうが積極的に使用してくれそうですね。
具体的にどういった単位でサブエージェントを用意するのが良いのか、明示してあげる場合のmdファイルの適切な準備方法、スキル機能と合わせて使う方法など、まだまだ掘り下げる余地がありますね！
AIコーディングツールは進歩が早く、正直キャッチアップが追いつかない日々です。そんな中でも情報を発信してくれるチームメンバーには本当に助けられています。チームのみんないつもありがとう！
次回はtakuさんです！どんな記事を書くのか楽しみですね！
最後までお付き合いいただきありがとうございます！ 弊社ではエンジニアを募集しております。 ご興味がありましたらカジュアル面談も可能ですので、下記リンクより是非ご応募ください！
