概要
- Claude CodeのSub agentsで最新仕様を調査して技術選定するエージェントを作って運用したら、かなり便利になった
- 普通にタスクを投げるだけだとAIの内部知識だけで進めてしまうので、古いノウハウで設計されてしまって困っていた
- 新しいバージョンを指定したとしても憶測でそれっぽくセットアップされてしまうことも多く、どこまでAIが知っているのかが分からない。事前に正しい仕様を理解させないといけなかった
- 今回作ったエージェントはそうした仕様確認が必要なタスクで呼び出されることで必ず検索を行い、使用するモジュールやその設定についてのベストプラクティスを提供してくれる
なぜSub agentsが必要だったか
AIの古い知識問題
- たとえばTailwind CSSをセットアップしてもらうと、今現在ではv3時代の設定で進められてしまう
- v4を指定してもtailwind.config.jsを作ろうとしたりする（v4では不要）
- 毎回「それ古いから最新の方法で」と指摘するのが面倒だった
解決策：調査専門のエージェント
- 技術選定が必要な場面で自動的に最新仕様を調査するspecエージェントを作成
- パッケージ追加時は必ず最新バージョンを確認
- 公式ドキュメントから現在のベストプラクティスを取得
- 古い設定を使わずに済む
Sub agentsをどう使うか？
- 公式の紹介動画では
backend-architectやfrontend-developerといったsub agentsがあり、興味を惹かれた - さっそくそういった専門家を作ってみたけど自分の期待とは違ってた
- メインエージェントからサブにタスクが投げられるとメインはそれを受け取るだけなので、サブがやったことの詳細について「なぜこの設定なのか？」「どうしてこのファイルが？」などと質問してもメインは全く知らない
- メインであれば進めるときに対話ができるけど、サブは投げて返ってくるだけでブラックボックス化してしまうし、中断して割り込みができない
- つまり対話不要でワンショットで完結するタスクが向いている
実際のやり取り
- 以下は実際のセッションログを振り返り、どのようにSub agentが使われたかを抜粋している
ユーザー
appsにvue,vite,typescript,tailwind,@egoist/tailwindcss-iconsでセットアップしてほしい
名前は2025-07-25-test
メインエージェントの処理
Todo作成
- apps/2025-07-25-test ディレクトリを作成
- Vite + Vue + TypeScript プロジェクトを初期化
- Tailwind CSS と @egoist/tailwindcss-icons をセットアップ
- ルートの package.json に workspace 設定を追加
- 動作確認とビルドテスト
Sub agentへのタスク生成
- タスクの途中で技術選定が必要になりsub agentへタスクが投げられた
apps/2025-07-25-test ディレクトリ内に Tailwind CSS と @egoist/tailwindcss-icons をセットアップしてください。
tailwindcss, postcss, autoprefixer をインストールし、tailwind.config.js と postcss.config.js を作成し、
@egoist/tailwindcss-icons プラグインを設定してください。また、src/style.css を Tailwind ディレクティブで更新してください。
- メインエージェントはサブに対して単にtailwindでのセットアップを依頼するのではなく、v3時代の知識で作るつもりなので postcss, autoprefixer をインストールし、tailwind.config.js と postcss.config.js を作成 という具体的なセットアップ手順まで指示している
Sub agentの処理
- メインエージェントに指示された各モジュールのバージョンを調べ、公式のセットアップを確認して進行
- 最終的にサブからメインエージェントに返されたのはこういう内容となった
セットアップ完了
Tailwind CSS v4 と @egoist/tailwindcss-icons のセットアップが完了しました。
### 実装内容
1. **インストールしたパッケージ**:
- `tailwindcss@next` (v4.0.0)
- `@tailwindcss/vite@next` (v4.0.0)
- `@egoist/tailwindcss-icons` (v1.9.0)
- `@iconify-json/mdi` (Material Design Icons)
- `@iconify-json/lucide` (Lucide Icons)
2. **設定ファイルの更新**:
3. **使用例の追加**:
### 注意事項
- Tailwind CSS v4 では `postcss.config.js` は不要です
- 設定は CSS ファイル内で `@import` と `@plugin` ディレクティブを使って行います
- `pnpm dev` で開発サーバーを起動してプレビューできます
- これが非常に素晴らしいのは、メインからの誤った依頼に対してsub agentがしっかり調査した結果 Tailwind v4 では不要です と指示を修正して正しく技術選定しているところ
- いままでは毎回古い設定のまま進められいたので人間がキレていた
調査レポートの作成
- ただいろいろ調べに行くため、調査には数分かかる
- 単にサブに投げてメインに返すだけだとせっかく調べさせた見識がもったいないので、ドキュメントを作らせるようにした
# Vue 3 + Tailwind CSS 4 + Vite 技術選定調査
調査日: 2025年7月28日
## 調査結果サマリー
### 各パッケージの最新バージョン
調査完了: Vue 3 v3.5.18
- 最新版: 3.5.18 (5日前リリース)
- 破壊的変更: 無
- 必要な設定: TypeScript環境での型定義自動適用
調査完了: Vite v7.0.6
- 最新版: 7.0.6 (3日前リリース)
- 破壊的変更: 有 (Node.js 18サポート終了、ESMのみ配布)
- 必要な設定: Node.js 20.19+, 22.12+が必須
調査完了: Tailwind CSS v4.1.11
- 最新版: 4.1.11 (1ヶ月前リリース)
- 破壊的変更: 有 (v3からの大幅変更)
- 必要な設定: Viteプラグイン使用、PostCSS不要
## 技術詳細
### Vite 7.0の変更点
### Tailwind CSS 4.0の主要変更
### Vue 3.5.18の特徴
## セットアップ手順
## 選定理由
1. **Vite 7**: 最新のESM対応とパフォーマンス改善
2. **Vue 3.5**: 最新の安定版で型サポートが優秀
3. **Tailwind CSS 4**: 設定の簡素化と大幅なパフォーマンス向上
## 注意事項
- Node.js 20.19以上が必須 (プロジェクトは24を使用)
- Tailwind CSS 4は設定ファイル不要
- PostCSSの設定は不要
- こうしたドキュメントを作らせている
- Tailwindがちゃんとv4が使われるのはもちろん、比較的新しいVite v7（2025年6月リリース）の存在も理解されている
- Vueは3.6がalphaで出ているが安定版が採用されている
Sub agentの設定内容
- 実際に使っているSub agentの内容はこういったものです
---
name: spec
description: 最新の仕様を調査して技術選定するエージェント。設計やセットアップ、モジュールのインストール時、設定ファイルの編集時に起動する
color: blue
---
あなたは技術選定するサブエージェントです。設計やライブラリの使い方について内部知識だけで判断せず、常に最新の技術ドキュメントを取得してベストプラクティスを把握することにより最適な実装方法を提供します
## 必須実行手順
### 1. 仕様調査フェーズ
利用モジュールや技術構成について最新版の知見を取得します
1. dateコマンドを実行し今日の日付を確認（最新情報取得のため）
2. プロジェクトの技術スタックを確認
3. 利用する各モジュールについて必ずレジストリでバージョンをリストして最新版を確認
4. WebSearchでモジュールの最新版について公式ページやベストプラクティスを確認
5. それらのページをWebFetchし、インストールや設定手順を確認
### 2. バージョン確認フェーズ
最新版が既存のバージョンと違う場合、変更がないか確認します
1. 最新バージョン確認
2. 既存の package.json を読んで依存関係の互換性を確認
3. CHANGELOG やリリースノートで破壊的変更を確認
### 3. ドキュメント化
1. 調査した最新のベストプラクティスについてドキュメント化する
2. `date +"%Y%m%d_%H%M%S"` コマンドを実行し `{date}_{title}` 形式でプロジェクトの `docs/_research` フォルダに技術選定ドキュメントを作成する
### 4. 実装フェーズ
得られた知見に従った実装を行う
1. 公式ドキュメントの指示通りにインストール、設定ファイルを作成/編集
## 出力形式
1. **調査結果の報告**
調査完了: [モジュール名] v[バージョン]
- 最新版: [バージョン]
- 破壊的変更: [有/無]
- 必要な設定: [概要]
2. **実装内容の提示**
- ✅ 実行済みコマンド
- ✅ 作成/編集済みファイルパス
- 設定内容（コードブロック）
- 人間が実行すべき追加手順
## 禁止事項
- 公式ドキュメントを確認せずに記憶だけで実装
- 「多分こうだろう」という推測での設定記述
- package.json への手動での依存関係追加
## エラー時の対応
1. 依存関係の競合: 詳細をメインエージェントに報告
2. 非推奨の警告: 代替案を調査して提示
3. 設定エラー: 公式ドキュメントを再確認
注意: あなたは最新仕様の専門家として、常に公式情報に基づいた正確な実装を提供します。推測や古い知識での実装は絶対に避けてください。
- 公式の説明 (Dynamic sub agent selection) によれば「メインエージェントはコンテキストに基づいて動的にSub agentを利用するのでちゃんと何をやるのか概要を書いておくのがいい」とあるけど、これだけでは確実ではないのでメインのCLAUDE.mdにも「こういう状況ではこのSub agentを使う」と書いておくとよりしっかり使われます
効果
- 最新技術の適用：古い設定で悩まされることがなくなった
- 時間短縮：調査には時間が掛かるが手動での確認・修正が減り、トータルでは時間短縮
- 知識の蓄積：調査レポートが残るので人間用のノウハウにもなる。明確な根拠として実装を採用しやすい
- メインエージェントのトークン消費削減：各種ドキュメントをしっかり検索して内容を読み込むのはそれだけで大きくトークンを消費するけど、独立したサブエージェント内で処理されるのでメイン自体は結果を受け取るだけで消費を抑えられる
名指しで呼ぶ
- メインから必要に応じて呼び出されるだけでなく、Sub agentを名指しすることで使わせることもできます
- 「モノレポのworkspaceの並列実行について、pnpmとbunでどういう機能差がある？」みたいな質問もそれぞれ最新仕様を調べていい感じにレポートにしてくれます
まとめ
- Claude Code Sub agentsを使うことで、AIの古い知識に悩まされることなく、常に最新のベストプラクティスで開発を進められるようになった
- 特に1年くらいの前の知識だとだいぶ古くなってしまうフロントエンド開発ではこの仕組みは助かる
- 自分が知らない分野でも気づかずに古いプラクティスを踏みにくくなる
Views: 0
