🐰

うさぎでもわかる!Claude Codeでプロジェクト設定とMCP活用ガイド

に公開

うさぎでもわかる!Claude Codeでプロジェクト設定とMCP活用ガイド

こんにちは、うさぎです!今日はAnthropicが提供する新しい開発ツール「Claude Code」の便利な使い方について紹介します。特にプロジェクト設定、MCP(Model Context Protocol)の活用法、API化の方法など、実践的な内容をお届けします。

Claude Codeとは

Claude Codeは、Anthropicが開発したターミナルベースのエージェントコーディングツールです。コードの理解、リファクタリング、デバッグ、ドキュメント作成など、開発者の様々なタスクをサポートします。Claude LLMの強力な能力を直接ターミナルから活用できる点が特徴で、現在はリサーチプレビューとしてベータ版が提供されています。

Claude Code概要

基本的なコマンド

Claude Codeでは様々なスラッシュコマンドを使ってClaude LLMの動作を制御できます。主なコマンドには以下があります:

  • /help - ヘルプと利用可能なコマンドを表示
  • /init - CLAUDE.mdファイルでプロジェクト初期化
  • /clear - 会話履歴をクリア
  • /compact [指示] - オプションの指示でフォーカスした会話をコンパクトに
  • /config - 設定の確認・変更
  • /cost - トークン使用統計を表示
  • /doctor - Claude Codeインストールの健全性確認
  • /memory - CLAUDE.mdメモリファイルを編集

うさぎ的にはよく使うのは /init/memory/help かな〜、初めて使う時はこれだけでも覚えておくといいぴょん!

CLI操作

ターミナルからClaude Codeを操作する基本的なCLIコマンドは以下の通りです:

# 対話型REPLを起動
claude

# 初期プロンプトでREPLを開始
claude "プロジェクトについて説明して"

# ワンオフクエリを実行して終了
claude -p "この関数を説明して"

# パイプからの入力を処理
cat logs.txt | claude -p "これを説明して"

# 設定を行う
claude config set --global theme dark

うさぎでも簡単に使えるシンプルなコマンドばかりなので安心ぴょん!

プロジェクト作成方法

インストール手順

まずはClaude Codeをインストールしましょう。Node.js 18以上が必要です。

# グローバルインストール(sudoは使わないでください!)
npm install -g @anthropic-ai/claude-code

# プロジェクトディレクトリに移動
cd your-project-directory

# Claude Codeを起動
claude

うさぎワンポイントアドバイス:sudo npm install -gは使わないでください!権限問題やセキュリティリスクにつながる可能性があります。問題が発生した場合は、ユーザー書き込み可能な新しいnpmプレフィックスを作成することをお勧めします:

# グローバルパッケージのリストを保存
npm list -g --depth=0 > ~/npm-global-packages.txt

# グローバルパッケージ用のディレクトリを作成
mkdir -p ~/.npm-global

# 新しいディレクトリパスを使用するようnpmを設定
npm config set prefix ~/.npm-global

# PATHを更新(シェルに合わせて適切なファイルを選択)
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc

プロジェクト初期化

プロジェクトを始める際は、/initコマンドを使ってCLAUDE.mdファイルを生成し、プロジェクトにClaude Codeの基本設定を導入することができます。このガイドには、Claude LLMがプロジェクトを理解するための基本的な情報が含まれます。

# プロジェクトディレクトリでClaude Codeを起動
cd your-project-directory
claude

# プロジェクト初期化コマンドを実行
/init

これを実行すると、プロジェクトディレクトリにCLAUDE.mdファイルが生成されます。このファイルにはプロジェクトの基本的な情報や指示を記述することができます。

開発コンテナの利用

Claude Codeは一貫した安全な環境が必要なチーム向けに開発コンテナの構成も提供しています。このあらかじめ設定されたdevcontainer設定は、VS CodeのRemote - Containers拡張機能や同様のツールとシームレスに連携します。これにより、すべての開発者が同じ環境で作業でき、「自分の環境では動くのに」問題を回避できます。

プロジェクト指示設定方法

Claude Codeでは、プロジェクトごとに特定の指示や設定を行うことができます。これにより、Claude LLMがプロジェクトの特性や要件を理解し、より的確な支援を提供できるようになります。

プロジェクト設定の概念図

CLAUDE.mdファイル

Claude Codeの中心となるのがCLAUDE.mdファイルです。このファイルはClaude LLMの「メモリ」として機能し、プロジェクトに関する重要な情報や指示を保存します。

# プロジェクト指示
このプロジェクトはNode.jsベースのウェブアプリケーションです。
主要な機能はユーザー認証とデータの可視化です。

# コーディングスタイル
- ESLintルールに従ってください
- 関数は小さく、単一責任の原則に従ってください
- 非同期処理にはasync/awaitを使用してください

# プロジェクト構造
- src/: ソースコード
- tests/: テストコード
- docs/: ドキュメント

メモリファイルの配置場所

CLAUDE.mdファイルは複数の場所に配置できます:

  1. プロジェクトルート(最も一般的):CLAUDE.mdとしてgitリポジトリに含めるか、CLAUDE.local.mdとして個人設定用に.gitignoreに追加できます
  2. 親ディレクトリ:モノレポの場合、root/fooでClaudeを実行し、root/CLAUDE.mdroot/foo/CLAUDE.mdの両方を自動的にコンテキストに取り込めます
  3. 子ディレクトリ:Claude Codeは子ディレクトリのファイルを操作するときに、必要に応じて子ディレクトリのCLAUDE.mdファイルを読み込みます
  4. ホームフォルダ~/.claude/CLAUDE.mdに配置すると、すべてのClaude Codeセッションに適用されます

うさぎメモ:複数のCLAUDE.mdファイルが存在する場合、Claude Codeは再帰的にそれらを読み込みます。親ディレクトリから始めて、現在の作業ディレクトリまでのすべてのCLAUDE.mdまたはCLAUDE.local.mdファイルを読み込むぴょん!

メモリの編集

Claude Codeでメモリファイルを編集するにはいくつかの方法があります:

  1. /memoryコマンドを使用して直接編集
  2. 通常のテキストエディタでファイルを編集
  3. 新機能:#キーを押して直接メモリを追加(例:# タスク形式に従ってくださいと入力するとメモリに追加される)

カスタムスラッシュコマンド

繰り返し使用するワークフロー(デバッグループ、ログ解析など)には、.claude/commandsフォルダ内にMarkdownファイルとしてプロンプトテンプレートを保存できます。これらは/を入力すると表示されるスラッシュコマンドメニューから利用できるようになります。

これらのコマンドをgitにチェックインすることで、チーム全体で利用可能にできます。それぞれのチームメンバーが独自のコマンドを追加することもできるので、効率化につながります。

MCP設定方法

Model Context Protocol (MCP)は、大規模言語モデル(LLM)が外部ツールやデータソースにアクセスするためのオープンプロトコルです。Claude Codeでは、このMCPを活用して様々な外部ツールと連携できます。

MCP設定のフロー図

MCPとは何か

MCPはクライアント-サーバーアーキテクチャを採用しており、Claude Code(クライアント)が様々な特化したサーバーに接続することができます。これにより、LLMに外部ツールやデータソースへのアクセス能力を提供します。

注意点:サードパーティのMCPサーバーは自己責任で使用してください。特にインターネットと通信するMCPサーバーを使用する場合は、プロンプトインジェクションのリスクにさらされる可能性があるため、特に注意が必要です。

MCP設定の基本

Claude CodeでMCPサーバーを設定するには、claude mcpコマンドを使用します:

# 基本構文
$ claude mcp add [引数...]

# ローカルサーバーを追加する例
$ claude mcp add my-server -e API_KEY=123 -- /path/to/server arg1 arg2

# 構成されたサーバーを一覧表示
$ claude mcp list

# 特定のサーバーの詳細を取得
$ claude mcp show my-server

設定には-sまたは--scopeフラグを使用して、設定が保存される場所を指定できます:

  • project(デフォルト):プロジェクトディレクトリで実行した場合に利用可能
  • global:すべてのプロジェクトで利用可能

環境変数は-eまたは--envフラグで設定できます(例:-e KEY=value)。

MCPの活用方法

Claude Codeは、MCPサーバーとクライアントの両方として機能します。クライアントとして、任意の数のMCPサーバーに接続してそのツールにアクセスできます:

  1. PostgreSQLなどのデータベース接続
  2. Puppeteerによるウェブ自動化
  3. Sentryやその他の監視ツールとの連携

うさぎのワンポイント:MCPサーバーの起動に関するデバッグに役立つ場合は、--mcp-debugフラグを付けてClaudeを起動すると、設定の問題を特定するのに役立つぴょん!

MCP自動承認方法

デフォルトでは、Claude Codeはシステムを変更する可能性のあるアクション(ファイル書き込み、多くのbashコマンド、MCPツールなど)に対して許可を要求します。これは安全性を優先するための意図的に保守的なアプローチです。しかし、この許可プロセスを自動化する方法もいくつかあります。

自動承認の設定方法

MCPツールの自動承認を設定するには、以下の4つの方法があります:

  1. セッション中に「Always allow」を選択
    セッション中にツールを使用する際に表示されるプロンプトで「Always allow」を選択すると、そのセッション中は自動的に許可されます。

  2. /allowed-toolsコマンドの使用
    Claude Code起動後に/allowed-toolsコマンドを使用して、許可リストにツールを追加または削除できます。例えば:

    • Edit - ファイル編集を常に許可
    • Bash(git commit:*) - gitコミットを許可
    • mcp__puppeteer__puppeteer_navigate - PuppeteerのMCPサーバーでのナビゲートを許可
  3. 設定ファイルの手動編集
    .claude/settings.json~/.claude.jsonを直接編集できます(前者をソース管理にチェックインしてチームと共有することをお勧めします)。

  4. .mcp.jsonファイルのチェックイン
    例えば、PuppeteerやSentryサーバーを.mcp.jsonに追加することで、コードベースで作業する全員がこれらをすぐに使用できるようになります。

安全性を考慮した承認設定

自動承認を設定する際は、安全性のバランスを考慮することが重要です:

  1. 読み取り専用ツール - Bash(ls:*), GrepToolなどは比較的安全
  2. 書き込みツール - Edit, Replace, Bash(rm:*)などは慎重に
  3. 外部アクセスツール - インターネットにアクセスするMCPツールはプロンプトインジェクションのリスクがあるため最も注意が必要

うさぎメモ:許可ルールと拒否ルールの両方を設定できますが、拒否ルールは許可ルールよりも優先されますぴょん!

API化して外部公開する方法

Claude Codeの機能を外部サービスと統合したり、より広いチームで共有したりするためには、API化が効果的な方法です。

API連携の構造図

Claude APIを通じた統合

Claude CodeはAnthropicのClaude APIを基盤としています。このAPIを使用して、独自のアプリケーションやサービスとClaude Codeを統合することができます。

主な機能:

  • テキストとコード生成:詳細なレスポンス、コード生成、デバッグなど
  • 200Kトークンのコンテキストウィンドウ:大きなデータセットと長い会話を効果的に処理
  • ツール統合:より動的な機能のためにClaude LLMを外部ツールと連携
  • 高度なセキュリティ:SOC 2 Type II準拠とHIPAAオプションによる機密データ処理
  • SDK対応:PythonとTypeScriptで簡単に統合可能

開発コンテナ設定による環境の標準化

チーム全体での一貫した環境を実現するために、Claude Codeは開発コンテナの構成を提供しています。この設定はVS CodeのRemote - Containers拡張機能などと連携し、すべての開発者が同じ環境でClaude Codeを使用できるようにします。

これにより:

  1. 環境差異による問題を回避
  2. 新メンバーのオンボーディングを簡素化
  3. ツールバージョンの管理を一元化

SDKを活用した連携

Claude APIには主に2つのSDKが用意されています:

  1. Python SDK
import anthropic

# Claudeクライアントの初期化
client = anthropic.Anthropic()

# モデルの呼び出し
response = client.messages.create(
    model="claude-3-opus-20240229",
    max_tokens=1000,
    messages=[
        {"role": "user", "content": "このコードの問題点を教えて"}
    ]
)
  1. TypeScript SDK
import { Anthropic } from '@anthropic-ai/sdk';

// Claudeクライアントの初期化
const anthropic = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});

// モデルの呼び出し
const response = await anthropic.messages.create({
  model: 'claude-3-opus-20240229',
  max_tokens: 1000,
  messages: [
    { role: 'user', content: 'このコードの問題点を教えて' }
  ],
});

セキュリティ考慮事項

API化して外部公開する際は、以下のセキュリティ考慮事項に注意することが重要です:

  • API Keyの管理: APIキーを公開の場所(ソースコードリポジトリ、ブログ投稿、SNS投稿など)に公開しないでください
  • アクセス制御: スコープベースのアクセス制御とレート制限を実装
  • コンプライアンス: SOC 2 Type II準拠とHIPAA対応(医療情報保護)のオプション
  • データ保護: 転送中のデータ暗号化、保存データの保護、アクセス監査ログの維持

うさぎ注意:ターミナルでClaude Codeを使う際も、API Keyの管理には十分注意するぴょん!

応用例と実践テクニック

実際の開発現場での活用事例

  1. オンボーディング高速化
    Anthropicでは、Claude Codeを使用してエンジニアの立ち上げ時間を大幅に短縮し、他のエンジニアの負担を軽減しています。特別なプロンプトは必要なく、質問をするだけでClaudeがコードを探索して回答を見つけます。

  2. Gitとの対話
    多くのAnthropicエンジニアは、git操作の90%以上をClaude Codeで行っています。コミットメッセージの作成、コードレビュー、プルリクエストの管理など、日常的なgit作業が効率化されます。

  3. デバッグ効率化
    エラーメッセージの診断や修正提案を通じて、デバッグプロセスを大幅に効率化します。Claudeにエラーを共有し、修正を提案してもらい、それを適用することができます。

効率化のためのTips

  1. コンテキストを絞り込む
    長いセッションでは、Claude LLMのコンテキストウィンドウに無関係な会話、ファイル内容、コマンドが蓄積され、パフォーマンスが低下することがあります。タスク間で/clearコマンドを頻繁に使用して、コンテキストウィンドウをリセットしましょう。

  2. 拡張思考モードの活用
    Claude Code(Claude 3.7 Sonnet)は拡張思考モードをサポートしています。より計画が必要なタスクでは、Claude LLMに「think」または「think deeply」と指示して、より深い考察を促すことができます。

  3. カスタムスラッシュコマンドの活用
    繰り返しのワークフロー(デバッグループ、ログ解析など)では、.claude/commandsフォルダ内にMarkdownファイルとしてプロンプトテンプレートを保存しましょう。これらは/を入力すると表示されるスラッシュコマンドメニューから利用できるようになります。

トラブルシューティング

  1. インストール問題
    権限問題やセキュリティリスクを回避するため、sudo npm install -gは使用しないでください。代わりに、ユーザー書き込み可能な新しいnpmプレフィックスを作成することをお勧めします。

  2. MCPサーバー接続問題
    MCPサーバーの起動に関するデバッグに役立つ場合は、--mcp-debugフラグを付けてClaudeを起動してください。これにより、設定の問題を特定しやすくなります。

  3. コンテキスト長の問題
    長いコンテキストの場合は、長文データ(~20K+トークン)をプロンプトの上部に配置し、クエリやタスクの指示を下部に配置すると、Claudeのパフォーマンスが大幅に向上します。

まとめ

Claude Codeは、Anthropicが開発したターミナル統合型のAIコーディングツールとして、コードベースを理解し、開発者の日常的なタスクを効率化する強力なアシスタントです。本記事では、基本的な使い方からプロジェクト設定、MCP活用、API連携まで、Claude Codeの幅広い機能と応用方法を紹介しました。

特に以下の点が重要です:

  1. プロジェクト指示設定: CLAUDE.mdファイルを通じてプロジェクト固有の指示や設定を行うことで、より的確な支援を受けられます。
  2. MCP活用: 外部ツールやデータソースとの連携を通じて、Claude LLMの能力を拡張できます。
  3. 自動承認設定: 繰り返し使用するツールやコマンドの承認を自動化することで、ワークフローをスムーズにします。
  4. API連携: Claude APIとSDKを活用して、独自のアプリケーションやサービスとの統合が可能です。

Claude Codeは現在ベータ版(リサーチプレビュー)として提供されていますが、今後もさらなる機能の追加や改善が期待されます。開発者が日常的なコーディングタスクを効率化し、より創造的な問題解決に集中できるよう支援するツールとして、その可能性は大きく広がっています。

うさぎも日々の開発でClaude Codeを活用していますが、特にコードの理解やリファクタリング、デバッグのサポートが非常に役立っています。皆さんもぜひClaude Codeを試して、開発ワークフローを革新してみてくださいぴょん!

Discussion