Claude Codeがスキル、サブエージェント、MCPサーバー接続を通じて、Web開発のための機能をどのように拡張しているかを理解するための実践的なガイド。

Claude Codeにおけるスキル、エージェント、MCPサーバーの連携方法

こんな壁にぶつかったことがあるはずです。コードベース全体をAIチャットに貼り付け、詳細なプロンプトを追加したのに、返ってくるのは...役に立たない結果。さらに悪いことに、モデルが50,000トークン前に読んだ内容を見失って、存在しない関数名を幻覚し始めることもあります。

これがコンテキストウィンドウ問題です。そして、LLMにより多くのコードを投げつけても、賢くなるわけではない理由がここにあります。

Claude Codeは異なるアプローチでこれを解決します。より大きなコンテキストウィンドウを持つことではなく(それも役立ちますが)、持っているスペースを賢く使うことで解決します。これは、スキル、サブエージェント、MCPサーバーという3つの要素が連携することで実現されています。

これらのピースがどのように組み合わさるかをお見せしましょう。これを理解すれば、AIと戦うのをやめて、AIと協働できるようになります。

コンテキストウィンドウ問題

私が理解するのに時間がかかったことがあります。LLMは長い会話の冒頭を、あなたが期待するような形では実際には「記憶」していません。コンテキストウィンドウは、ファイリングキャビネットというよりスポットライトに近いのです。トークンを追加するにつれて、初期のコンテンツへの注意が薄れていきます。100,000トークンのコードを貼り付けると、モデルはあなたの質問に到達する頃には本質的に流し読みしている状態です。

これで、多くのフラストレーションを感じるAIの動作が説明できます。モデルは最初は賢く見えるのに、その後混乱します。以前伝えたことを忘れます。「読んだ」はずのファイルから詳細を幻覚しますが、明らかに保持していません。

解決策は、より大きなコンテキストウィンドウではありません。解決策は、それを必要としないことです。

Claude Codeが実際にどう考えるか

Claude Codeはエージェントです。これは派手に聞こえますが、計画し、実行し、結果を観察し、反復できることを意味するだけです。「プロジェクトの失敗しているテストを修正して」と依頼すると、コードベース全体を一度に理解しようとはしません。代わりに、焦点を絞ったステップで作業します。

プロジェクト構造を読んで、何がどこにあるかを理解する
テストを実行して、実際に何が失敗しているかを確認する
失敗している特定のテストと、それがテストするコードを見る
修正を行う
テストを再度実行する
まだ壊れている場合は、別のことを試す

各ステップは、必要なコンテキストのみで動作します。エージェントは、見たものすべての生のログではなく、学んだことの作業サマリーを維持します。これが、Claude Codeがコンテキストスペースを使い果たすことなく、複雑なバグに対して20回反復できる理由です。

実際にデバッグする方法と同じように考えてください。コードベース全体を頭の中に保持するわけではありません。1つの領域に焦点を当て、仮説を立て、テストし、調整します。Claude Codeも同じように動作します。

サブエージェント - 真のゲームチェンジャー

ここから本当に興味深くなります。Claude Codeはサブエージェントを生成できます。

サブエージェントは、独自のクリーンなコンテキストウィンドウを持つ別のClaudeインスタンスです。Claude Codeに1つを起動させ、焦点を絞ったタスクを与え、独立して作業させ、見つけたもののサマリーを受け取ることができます。サブエージェントの完全なコンテキストは、メインの会話を汚染することはありません。

これは大きいです。1つのエージェントがすべてを保持しようとする代わりに:

あなた: 「このコードベースをセキュリティ問題、パフォーマンス問題、テストカバレッジについて分析して」

メインエージェントがサブエージェントを生成: ├── サブエージェント1: セキュリティ分析(独自のコンテキスト、セキュリティ関連ファイルを読む) ├── サブエージェント2: パフォーマンスレビュー(独自のコンテキスト、ホットパスに焦点を当てる)
└── サブエージェント3: テストカバレッジ(独自のコンテキスト、テストファイルを調査)

各サブエージェントはメインエージェントにサマリーを返すメインエージェントはすべてを1つのレスポンスに統合

サブエージェントはそれぞれ数千行のコードを読むことができます。しかし、メインエージェントは彼らの凝縮された発見のみを受け取ります。メインコンテキストはクリーンなままで、複数の領域にわたる深い分析を得られます。

ジュニア開発者に委任するようなものだと考えてください。彼らがレビューしたすべての行を読む必要はありません。必要なのは彼らの結論と見つけた危険信号です。サブエージェントも同じように動作します。

サブエージェントを実際に使用する方法

Claude Codeにサブエージェントを生成するよう明示的に依頼できます。

「認証モジュールを詳細に分析するためにサブエージェントを生成して」
「すべてのデータベースクエリをN+1問題についてレビューするためにサブエージェントを使って」
「サブエージェントにテストファイルを調べさせて、カバレッジのギャップを報告させて」

サブエージェントは独自の新鮮なコンテキストを取得し、深い作業を行い、サマリーを返します。メインの会話は、すべての生の分析で肥大化しません。

これは大規模なコードベースに特に強力です。Claude Codeが途中で追跡を失う代わりに、実際にスケールする焦点を絞った分析が得られます。

スキルの役割

Claude Codeはタスクを分解し、サブエージェントを生成し、焦点を絞ったステップで作業できます。しかし、特定のことをうまく行う方法をどのように知るのでしょうか? それがスキルの出番です。

スキルは、Claudeが特定のタイプのタスクに取り組む前に読むパッケージ化された指示です。Claude CodeにPowerPointプレゼンテーションの作成を依頼すると、まず/mnt/skills/public/pptx/SKILL.mdにあるスキルファイルを読みます。このファイルには、ベストプラクティス、よくある落とし穴、実際に機能する正確なコードパターンが含まれています。

スキルには通常、以下が含まれます。

詳細な指示を含むSKILL.mdファイル
コードテンプレートと例
既知の制限と回避策
出力形式の仕様

重要な洞察は、スキルがオンデマンドでロードされることです。Claudeは、Pythonをデバッグしているときに、PowerPointの指示にコンテキストウィンドウスペースを無駄にしません。必要なときに関連するスキルをロードし、そのタスクにその専門知識を使用し、先に進みます。

これはツールとは異なります。ツールは、Claudeがweb_searchやbash_toolのようにデータを取得するために呼び出す関数です。スキルは、Claudeが問題にアプローチする方法を変える知識パッケージです。この区別は重要です。なぜなら、ツールはシステムプロンプトでトークンを消費する(ツールが多いほど、コードのためのスペースが少なくなる)のに対し、スキルは関連する場合にのみロードされるからです。

側面	ツール	スキル
動作方法	関数を呼び出し、結果を取得	指示をロードし、動作を変更
トークンコスト	常にコンテキストに存在	オンデマンドでロード
最適な用途	個別のアクション(API呼び出し、ファイル操作)	複雑なワークフロー(ドキュメント作成)

サブエージェントもスキルをロードできます。セキュリティを分析するサブエージェントは、メインの会話をそれらの指示で乱雑にすることなく、セキュリティ固有のスキルをロードできます。

反復ループ

常に見られるパターンの1つは反復ループです。Claude Codeは何かを生成し、それが機能するかをチェックし、正しくなるまで問題を修正します。

コードを生成
それを実行する(またはlintする、または型チェックする)
機能するかを確認
機能しない場合、エラーを分析して再試行
合格するまで繰り返す

これが、Claude Codeがワンショットプロンプトでは見逃すバグを修正できる理由です。単にコードを生成して期待するだけではありません。自分の作業をテストし、実際のフィードバックに応答しています。

Claude CodeがReactコンポーネントを作成し、その後開発サーバーを実行してエラーをチェックするとき、このループを使用しています。関数を書いてテストを実行して機能することを確認するとき、同じことです。生成と検証のステップが連携して機能します。

これは、Claude Codeが予想よりも時間がかかる理由も説明します。遅いのではありません。徹底的なのです。テストを実行し、型エラーをチェックし、実際に機能するまで反復しています。

MCPサーバー - 外部システムへの接続

これまで、Claude Codeがどう考えるか(エージェント的なステップ、サブエージェント)と何を知っているか(スキル)について話してきました。しかし、外部システムへの接続はどうでしょうか? それがMCPの出番です。

Model Context Protocolは、Claude Codeがデータベース、GitHub、ファイルシステム、CI/CDパイプライン、そしてほぼすべてのものと通信する方法です。MCPをAIのためのUSB-Cと考えてください。互換性のあるAIシステムが互換性のあるサービスに接続できる標準インターフェースです。

MCPサーバーは3種類の機能を公開します。

ツール - Claudeが呼び出せる関数、データベースのクエリやプルリクエストの作成など

リソース - Claudeが読み取れるデータソース、ファイルの内容やデータベーススキーマなど

プロンプト - 一般的なインタラクションのための再利用可能なテンプレート

Web開発では、最も有用なMCPサーバーには以下が含まれます。

ファイルシステムサーバー - プロジェクト内のファイルの読み書き(安全のためにサンドボックス化)
GitHubサーバー - リポジトリ、PR、issue、ワークフローの管理
データベースサーバー - 自然言語を通じてPostgreSQL、MySQL、SQLiteをクエリ

TypeScriptでの簡単なMCPサーバーは次のようになります。 typescript import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'; import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';

const server = new McpServer({ name: 'code-analyzer', version: '1.0.0' });

server.registerTool( 'analyze_complexity', { description: 'Analyze cyclomatic complexity of a file', inputSchema: { filePath: { type: 'string' } } }, async ({ filePath }) => { const result = await analyzeFile(filePath); return { content: [{ type: 'text', text: JSON.stringify(result) }] }; } );

const transport = new StdioServerTransport(); await server.connect(transport);

MCPサーバーの力は、サブエージェントとどのように連携するかから来ています。サブエージェントはMCPを通じてデータベースをクエリし、数千行を分析し、関連する発見のみを返すことができます。生データはメインコンテキストに触れることはありません。

すべてをまとめる

実際の例を見てみましょう。Claude Codeに「このPRをレビューして、データベースマイグレーションが安全かチェックして」と依頼します。

実際に何が起こるかは次のとおりです。

メインエージェントがコードレビューのための関連スキルをロード
PR変更を詳細に分析するためにサブエージェントを生成
そのサブエージェントがGitHub MCPサーバーを呼び出してPR詳細を取得
別のサブエージェントがマイグレーションファイルを読み、MCPを通じて現在のデータベーススキーマをクエリ
サブエージェントが焦点を絞ったサマリーを返す:「マイグレーションはインデックスを追加、安全に見える」または「警告:まだ参照されている列を削除します」
メインエージェントがサブエージェントの発見を明確なレスポンスに統合

重い作業が独自のコンテキストを持つサブエージェントで行われることに注目してください。メインエージェントはオーケストレーションと要約を行います。会話はクリーンなままで、深い分析を得られます。

これがワークフローにとって重要な理由

このアーキテクチャを理解することで、Claude Codeとの作業方法が変わります。

コンテキストウィンドウと戦うのをやめる。 サブエージェントが深い分析を別々に処理することを理解すると、コードベース全体をメインの会話に貼り付けようとするのをやめます。サブエージェントに重い読み取りをさせましょう。

大きなタスクにはサブエージェントを明示的に使用する。 Claude Codeが理解してくれることを期待する代わりに、伝えます。「決済モジュールを分析するためにサブエージェントを使って」または「セキュリティ、パフォーマンス、テストレビューのためにサブエージェントを生成して」。アーキテクチャに逆らうのではなく、それと協働しています。

一部のタスクが他のタスクよりもうまく機能する理由を理解する。 サブエージェントに委任できるタスクは素晴らしくスケールします。1つのコンテキストで絶え間ないやり取りを必要とするタスクは、より速く制限に達します。

反復ループを信頼する。 バグを修正するとき、Claudeに反復させます。実際にコードを実行して失敗を観察することで、予期しなかった問題を見つけることがよくあります。最初の試みの後に中断しないでください。

実践的なヒント

大きなタスクではサブエージェントを明示的に依頼する。 「認証システムをレビューするためにサブエージェントを生成して」は、Claude Codeが委任する必要があることを理解してくれることを期待するよりもうまく機能します。

Claudeに最初にスキルを読ませる。 ドキュメントを作成したり、特定のファイル形式で作業したりする場合、Claudeは開始前に関連するスキルファイルを読むとより良いパフォーマンスを発揮します。

繰り返しの統合にはMCPサーバーを接続する。 データベース出力やGitHub PRの詳細をプロンプトにコピー&ペーストする代わりに、関連するMCPサーバーを接続します。Claudeは必要なものを正確に引き出します。

カスタムツールを構築する前にエコシステムをチェックする。 MCPエコシステムは、Stripe、Cloudflare、CIシステム、統合したいほとんどのサービスをカバーする5,000以上のコミュニティサーバーに成長しました。必要なものはおそらく誰かがすでに構築しています。

間違っているときはフィードバックを与える。 Claude Codeが間違った結果を出したとき、何が間違っていたかを伝えます。反復ループはあなたのフィードバックにも機能します。

より大きな視点

MCPは最近Linux Foundationに寄贈され、OpenAI、Google、Microsoftが支援メンバーとして参加しました。これは、プロトコルがAnthropicだけのものではなく、業界標準のインフラストラクチャになりつつあることを示しています。

サブエージェント(別々のコンテキストでの並列作業)、スキル(オンデマンドでロードされるドメイン専門知識)、MCPサーバー(外部システムへのクリーンな接続)の組み合わせは、現代のAIコーディングアシスタントが実際にどのように機能するかを表しています。魔法ではありません。実際の制約を解決する優れたアーキテクチャです。

特にサブエージェントパターンは、深く理解する価値があります。これは、大規模なコードベースで窒息するAIと、スケールするAIの違いです。Claude Codeに大きなものを分析するよう依頼すると、すべてを1つのコンテキストに詰め込んで祈るのではありません。焦点を絞ったサブエージェントに委任し、それぞれがクリーンなコンテキストを持ち、その発見を統合しています。

これらのピースを理解することで、システムに逆らうのではなく、システムと協働できるようになります。より良い結果が得られ、壁にぶつかることが少なくなり、AIを信頼するタイミングと手動で引き継ぐタイミングがわかるようになります。

作成者 Namiru.ai - あなたのウェブサイト用のプラグアンドプレイAIチャット。