hanzochang
hanzochang
はじめに
Claude CodeでのAgentの使い方
AgentコマンドでSubAgentを作ろう
ステップ1: `/agents`を入力
ステップ2: createAgentsを選択
ステップ3: Project or Personal
ステップ4: 生成方法を選択
ステップ5: エージェントの詳細な役割を設定
ステップ6: 待ちます
ステップ7: 権限の設定
ステップ8: エージェントの色を設定
ステップ9: 完了とテスト
ステップ10: エージェントの運用開始
SubAgentの使い方
実行例
明示的に呼び出す場合
実際のサンプル
.claude/agents/ ディレクトリ構造
生成したSubAgentの例
Agentが参照するアーキテクチャドキュメントの例(一部)
docs/architecture/overview.md の例
アーキテクチャ概要
プロジェクト構造
アーキテクチャの特徴
1. Clean Architecture
2. マイクロサービス的な構成
3. 型安全性
各ディレクトリの詳細
技術選定の理由
Next.js 14 (App Router)
Hono
Prisma
Mastra
セキュリティ考慮事項
パフォーマンス最適化
docs/architecture/server/README.md の例
Server Directory アーキテクチャ
ディレクトリ構造
層構造の詳細
1. Router層(Controller)
簡潔なまとめ
SubAgentsの主なメリット
導入のポイント
https://s3.ap-northeast-1.amazonaws.com/hanzochang.com/_v2/1753792529214_ls4djss40h.png

Claude Code SubAgentsでアーキテクチャ監査 - 一貫した一貫した設計思想のもとでコーディングを自動化

Claude CodeのSubAgents機能を使って、アーキテクチャに従いコードに一貫性を持たせた快適なコード生成手法を紹介。

公開日2025.07.29

更新日2025.07.29

はじめに

複雑なWebアプリケーションを開発していると、時間の経過とともにアーキテクチャの全体像を把握することが困難になります。新しいメンバーのオンボーディング、既存機能の改修、設計判断の背景理解など、様々な場面でアーキテクチャ知識の共有が課題となります。

本記事では、Claude CodeのSubAgents機能を活用して、アーキテクチャドキュメンテーション専門のエージェントを作成する方法を紹介します。実際のプロジェクトでの使用例を交えながら、実践的なアプローチを解説します。

Claude CodeでのAgentの使い方

Claude CodeのSubAgents機能は、プロジェクト固有の専門知識を持つAIエージェントを作成できる機能です。まず、基本的な使い方を見てみましょう。

AgentコマンドでSubAgentを作ろう

claude codeを起動して /agents コマンドに従うだけで簡単に記述できます。以下のステップに従って、専門エージェントを作成しましょう。

ステップ1: /agentsを入力

Claude Codeのコンソールで /agents コマンドを入力します。このコマンドを実行すると、エージェント管理のメニューが表示されます。

スクリーンショット 2025 07 29 20.54.23

ステップ2: createAgentsを選択

表示されたメニューから「createAgents」オプションを選択します。これにより、新しいSubAgentの作成プロセスが開始されます。

スクリーンショット 2025 07 29 20.54.30

ステップ3: Project or Personal

Projectはプロジェクト固有のもの、Personalはそのマシン全体で使う設定です。

スクリーンショット 2025 07 29 20.54.37

ステップ4: 生成方法を選択

Generate With Claudeを選択すると、センテンスを打ち込むだけでよしなに生成してくれます。

スクリーンショット 2025 07 29 20.54.44

ステップ5: エージェントの詳細な役割を設定

ここではアーキテクトとして振る舞って欲しいのでその役割をかきます。 また参照して欲しいドキュメントのパスも記入します。

スクリーンショット 2025 07 29 20.56.30

ステップ6: 待ちます

スクリーンショット 2025 07 29 20.56.35

ステップ7: 権限の設定

生成が完了するとSubAgentが使用可能なツールを細かく指定できます。

スクリーンショット 2025 07 29 20.57.29

ステップ8: エージェントの色を設定

私の場合は役割の種別で色をつけています。

スクリーンショット 2025 07 29 20.57.37

ステップ9: 完了とテスト

エージェントの作成が完了したら、実際に動作テストを行います。@エージェント名 でメンションして、期待通りの応答が得られるかを確認します。

スクリーンショット 2025 07 29 20.57.45

ステップ10: エージェントの運用開始

すべての設定とテストが完了すると、下記のように生成結果が生成されます。設定は以上です。

スクリーンショット 2025 07 29 20.57.51

SubAgentの使い方

実行例

Claude Codeは質問内容に基づいて、適切なSubAgentに自動的にタスクを委譲します。 下記のように適切なタイミングでエージェントが実行されます。

スクリーンショット 2025 07 29 22.06.59

明示的に呼び出す場合

明示的に特定のSubAgentを呼び出すには、@エージェント名 を使用します。

> @architecture-guardian この新しいコンポーネントがアーキテクチャに適合しているかチェックして

[architecture-guardian] アーキテクチャ適合性をチェックします。
docs/architecture/ の内容を確認してから、コンポーネントの構造を分析します...

実際のサンプル

実際のプロジェクトでのSubAgents設定を見てみましょう。以下は、Webプロジェクトでの実装例です。

.claude/agents/ ディレクトリ構造

/agents コマンドで生成される文章の例として、.claude/agents/ 配下にSubAgentの指示が書き出されます。この専門エージェントがプロジェクト固有の知識を持ち、開発を支援します。

web3-app/
├── .claude/
│   └── agents/
│       └── architecture-guardian.md  # アーキテクチャ監視エージェント
├── docs/
│   └── architecture/
│       ├── overview.md             # アーキテクチャ概要
│       ├── app/
│       ├── server/
│       ├── front/
│       └── common/
└── server/
    └── router/                     # API実装

生成したSubAgentの例

これはアプリケーションのアーキテクチャを記憶させるエージェントの例です。詳細はdocs/architectureを参考にするようにしており、プロジェクト固有のアーキテクチャ原則を厳格に守らせます。

---
name: architecture-guardian
description: Use this agent when you need to audit and validate that code changes, new features, or system modifications comply with the established architecture principles and patterns.
color: purple
---

You are an Architecture Guardian, an elite system architect specializing in maintaining architectural integrity and ensuring compliance with established design principles. Your primary mission is to audit and validate that all code changes, implementations, and system modifications strictly adhere to the documented architecture.

Your core responsibilities:

1. **Architecture Compliance Audit**: Thoroughly examine code, designs, and implementations against the established architectural patterns documented in docs/architecture/. You must read and understand all architecture documentation before conducting any audit.

2. **Pattern Enforcement**: Ensure that new code follows established patterns for:

   - Component structure and organization
   - Data flow and state management
   - API design and integration patterns
   - Security and authentication approaches
   - Error handling and logging strategies
   - Performance and scalability considerations

3. **Violation Detection**: Identify any deviations from architectural principles, including:

   - Improper layer violations or coupling
   - Inconsistent naming conventions or code organization
   - Security vulnerabilities or authentication bypasses
   - Performance anti-patterns or resource inefficiencies
   - Violations of established design patterns

4. **Remediation Guidance**: When violations are found, provide:

   - Clear explanation of why the implementation violates architecture
   - Specific recommendations for bringing code into compliance
   - References to relevant architecture documentation
   - Code examples demonstrating proper implementation

5. **Proactive Architecture Protection**: Always prioritize architectural integrity over convenience or speed. If a proposed change would compromise the architecture, clearly explain the risks and suggest alternative approaches that maintain compliance.

Your audit process:

1. First, read and analyze all relevant documentation in docs/architecture/
2. Examine the submitted code/design against architectural principles
3. Identify compliance issues with specific references to architecture docs
4. Provide detailed feedback with actionable remediation steps
5. Approve only when full architectural compliance is achieved

You communicate with authority and precision, backing every recommendation with specific architectural principles. You are uncompromising in maintaining system integrity while being constructive in your guidance. Remember: you are the final guardian of architectural quality - no violation should pass your review.

Agentが参照するアーキテクチャドキュメントの例(一部)

architecture-guardianが参照するdocsは何か。これは具体的な設計内容をまとめたドキュメントを参照させます。例えばこんな例です。

docs/architecture/overview.md の例

# アーキテクチャ概要

このドキュメントは、Awesomeプロジェクトの全体的なアーキテクチャを説明します。

## プロジェクト構造

project-root/
├── app/ # Next.js App Router (フロントエンド & APIルート)
├── server/ # バックエンドロジック (Hono, Prisma, Mastra)
├── front/ # フロントエンド専用ロジック (React)
├── common/ # 共有コード (エンティティ、型定義)
└── docs/ # ドキュメント

## アーキテクチャの特徴

### 1. Clean Architecture

- 明確な責任分離
- 依存関係の方向性を内側に向ける
- ビジネスロジックをフレームワークから独立

### 2. マイクロサービス的な構成

- フロントエンドとバックエンドの分離
- Solanaプログラムの独立性
- APIを介した疎結合

### 3. 型安全性

- TypeScriptによる静的型付け
- Zodによるランタイム検証
- 共通エンティティによる型の一貫性

## 各ディレクトリの詳細

- [App Router](/docs/architecture/app/README.md) - Next.jsのページとAPIルート
- [Server](/docs/architecture/server/README.md) - バックエンドのビジネスロジック
- [Front](/docs/architecture/front/README.md) - フロントエンドのUIとロジック
- [Common](/docs/architecture/common/README.md) - 共有コードとエンティティ
- [Solana](/docs/architecture/solana/README.md) - ブロックチェーンプログラム

## 技術選定の理由

### Next.js 14 (App Router)

- サーバーサイドレンダリング
- APIルートの統合
- 優れた開発体験

### Hono

- Edge Runtime対応
- 軽量で高速
- 型安全なルーティング

### Prisma

- 型安全なORM
- マイグレーション管理
- 優れた開発体験

### Mastra

- AI/LLM統合フレームワーク
- ワークフロー管理
- ツール統合

## セキュリティ考慮事項

1. **認証・認可**

   - Privyによるウォレット認証
   - JWTベースのセッション管理
   - ミドルウェアによる保護

2. **データ検証**

   - Zodによる入力検証
   - SQLインジェクション対策(Prisma)
   - XSS対策(React)

3. **ブロックチェーン**
   - トランザクション署名の検証
   - 権限チェック

## パフォーマンス最適化

1. **フロントエンド**

   - SWRによるキャッシング
   - 動的インポート
   - 画像最適化

2. **バックエンド**

   - Edge Runtime
   - データベースインデックス
   - 効率的なクエリ

3. **ブロックチェーン**
   - バッチトランザクション
   - 最適化されたアカウントサイズ

docs/architecture/server/README.md の例

# Server Directory アーキテクチャ

## ディレクトリ構造

server/
├── router/ # APIエンドポイント定義(Controller層)
├── server-usecase/ # ビジネスロジック(UseCase層)
├── server-service/ # 共通サービス(Domain Service層)
├── server-repositories/ # データアクセス(Repository層)
├── server-mappers/ # データ変換層
├── server-middleware/ # ミドルウェア
└── prisma/ # データベーススキーマ

## 層構造の詳細

### 1. Router層(Controller)

APIエンドポイントの定義とリクエスト/レスポンスの処理

以下略

簡潔なまとめ

Claude CodeのSubAgentsを使うことで、プロジェクト固有の知識を持つ専門エージェントを作成でき、開発が大幅に効率化されます。

SubAgentsの主なメリット

  1. 専門知識の集約: アーキテクチャ設計の知識を一箇所に集約
  2. 一貫したパターン: プロジェクト全体で統一された実装パターンの維持
  3. 属人化の解消: 特定の人に依存しない知識共有の実現
  4. 24時間利用可能: いつでもアクセスできる専門知識

導入のポイント

  • .claude/agents/ ディレクトリにエージェント定義を配置
  • docs/architecture/ に参照用のドキュメントを整備
  • 専門特化したエージェントを複数作成(汎用エージェントは避ける)
  • 段階的に導入し、継続的に改善

SubAgentsを活用することで、複雑なプロジェクトでも新しいメンバーが迅速にキャッチアップでき、チーム全体の開発効率が向上します。

さらに、Claude Code自身でSubAgentに内容を加筆できるため、チーム内の暗黙知を常に更新し続けることが可能です。これにより蓄積されたノウハウを他のプロジェクトやシステムを始める際に再利用でき、組織全体の開発知見として活用できます。

picture
hanzochang - 半澤勇大
慶應義塾大学卒業後、Webプランナーとして勤務。 ナショナルクライアントのキャンペーンサイトの企画・演出を担当。 その後開発会社に創業メンバーとして参加。 Fintech案件や大手企業のDXプロジェクトに関わり、その後個人事業主として独立し、 2023年にWeb3に特化した開発会社として法人化しました。 現在はWeb3アプリ開発を中心にAI開発フローの整備を行っています。
また、趣味で2017年ごろより匿名アカウントでCryptoの調査等を行い、 ブロックチェーンメディアやSNSでビットコイン論文等の図解等を発信していました。
X (Twitter)

お問い合わせはこちらから

ご希望に応じて職務経歴書や過去のポートフォリオを提出可能ですので、必要な方はお申し付けください。
また内容とによっては返信ができない場合や、お時間をいただく場合がございます。あらかじめご了承ください。