0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@k-umemura89

Claude CodeをVSCodeで使うためのメモ書き

0
Posted at

はじめに

Claude CodeをVSCodeのdevcontainer環境に組み込むことで、プロジェクトをまたいで一貫した開発環境を構築できないだろうかと考え、実践してみたメモ書き。(この記事もClaudeがほとんど書いています。)

1. Claude Code入りのDockerイメージを作る

なぜDockerイメージに含めるのか

  • npm install -g @anthropic-ai/claude-code を毎プロジェクトで実行する手間を省ける
  • Node.jsバージョンやCLIバージョンをチーム・プロジェクト間で統一できる
  • devcontainerの起動時間を短縮できる

デメリット

  • Claude Codeの更新が早すぎてイメージの再ビルドの回数が多く少し手間がかかる。

Dockerfile例

FROM mcr.microsoft.com/devcontainers/base:ubuntu-24.04

# Node.js（Claude Codeの実行に必要）
RUN curl -fsSL https://deb.nodesource.com/setup_22.x | bash - \
    && apt-get install -y nodejs

# Claude Code CLI をグローバルインストール
RUN npm install -g @anthropic-ai/claude-code

# 作業ユーザー
ARG USERNAME=vscode
USER $USERNAME

ビルドしてローカルに登録

docker build -t claudecode-container:1.0 .

devcontainer.json で参照

各プロジェクトの .devcontainer/devcontainer.json でこのイメージを指定します。

{
  "image": "claudecode-container:1.0",
  "remoteUser": "vscode",
  "containerUser": "vscode"
}

これでどのプロジェクトでも同じClaude Code環境が即座に使えます。

2. 基本的な使い方

起動

claude

VSCodeのターミナルで実行でCLIが起動します。初回だけログイン操作が必要です。(もしくは、APIキーの設定)

※私はProを契約しているのでAPIキーを使ったことがないため、従量課金でやっている方は要検討です...

export ANTHROPIC_API_KEY="sk-ant-..."

基本的な操作

操作 方法
チャット開始 claude を実行してそのままメッセージを入力
1回だけ実行 claude "バグを直して"
ファイルを渡す claude -f src/main.py "このコードを説明して"
会話をリセット /clear
終了 /exit または Ctrl+C

CLAUDE.md でプロジェクト固有の指示を書く

リポジトリのルートに CLAUDE.md を置くと、Claudeが自動的に読み込みます。

# CLAUDE.md

## ビルドコマンド
- `npm run build` でビルド
- `npm test` でテスト実行（特定ファイルは `npm test -- path/to/file.test.ts`）

## アーキテクチャ
- `src/` 以下がソースコード
- APIはRESTではなくtRPCを使用
- 状態管理はZustandのみ（ContextAPIは使わない）

Claudeはタスクに取り掛かる前にこのファイルを参照するため、プロジェクト固有のルールや文脈を毎回説明する手間が省けます。

パーミッション管理

Claudeがファイル編集・コマンド実行を行う際、都度確認が入ります。よく使うコマンド(テストコマンドや、サーバ起動など)を許可しておくと便利です。

# プロジェクト設定に追記（.claude/settings.json）
claude config add allowedTools "Bash(npm run *)"

3. .claude ディレクトリの構成

説明が前後しますが、Claude Codeの設定・カスタマイズはすべて .claude/ ディレクトリに集約されます。プロジェクト直下に置けばプロジェクト単位、~/.claude/ に置けばグローバルな設定になります。

.claude/
├── settings.json     # パーミッション・フック・MCPサーバーの設定
└── commands/         # カスタムスラッシュコマンド（スキル）置き場
    ├── review.md
    └── commit.md
ファイル / ディレクトリ 役割
settings.json 許可ツール・フック・MCPサーバーをまとめて管理
commands/*.md /ファイル名 で呼び出せるカスタムコマンドを定義

グローバル設定（~/.claude/）はすべてのプロジェクトに共通で適用され、プロジェクト設定（.claude/）はそのリポジトリ内でのみ有効です。同じキーが両方にある場合はプロジェクト設定が優先されます。.claude/ はGitで管理することでチームメンバーと設定を共有できます。

4. 応用的な使い方

スキル（カスタムスラッシュコマンド）

~/.claude/commands/ または .claude/commands/ にMarkdownファイルを置くと、/コマンド名 で呼び出せるカスタムスキルになります。

例：コードレビュースキル

<!-- .claude/commands/review.md -->
以下の観点でこのブランチの差分をレビューしてください。

1. バグの可能性がある箇所
2. パフォーマンス上の問題
3. セキュリティの懸念点（OWASP Top 10）

`git diff main...HEAD` の内容を対象にしてください。

# 使い方
/review

例：コミットメッセージ生成スキル

<!-- .claude/commands/commit.md -->
`git diff --staged` の内容を確認し、Conventional Commits形式でコミットメッセージを提案してください。
実際にコミットは行わず、メッセージ候補を3つ提示してください。

フック（自動トリガー）

特定のイベントに連動してシェルコマンドを実行できます。.claude/settings.json で設定します。

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "hooks": [
          {
            "type": "command",
            "command": "npm run lint --silent 2>&1 | head -20"
          }
        ]
      }
    ]
  }
}

上記の例では、Claudeがファイルを編集するたびにlintが自動実行され、結果がClaudeにフィードバックされます。これにより、Claudeが自分でlintエラーを検知して修正するループが作れます。

MCP（Model Context Protocol）サーバー

外部ツールをClaudeに接続できます。設定は ~/.claude/settings.json に記述します。

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "${GITHUB_TOKEN}"
      }
    },
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres", "postgresql://localhost/mydb"]
    }
  }
}

GitHubのMCPサーバーを追加するとIssueやPRの内容をClaudeが直接参照・操作できるようになります。

サブエージェント活用（/deep-research など）

Claude Codeには組み込みのスキルがいくつか用意されており、複雑なタスクをサブエージェントに並列実行させられます。

# ウェブ検索を使った深い調査
/deep-research 「RustのAsync RuntimeとTokioの内部実装について」

# コードレビュー（マルチエージェントによるクラウドレビュー）
/code-review ultra

セッションの継続（--resume）

# 直前のセッションを再開
claude --resume

# 特定のセッションIDで再開
claude --resume <session-id>

長いタスクを途中で中断してから再開したいときに使えます。

まとめ

レベル やること
入門 Dockerイメージ化 → devcontainerで使用
基本 CLAUDE.md でプロジェクト文脈を共有
中級 カスタムスキル・フックで繰り返し作業を自動化
上級 MCPサーバーで外部ツールと連携

devcontainerにClaude Codeを組み込む構成は嫌いだという人がいることもわかっていますが、ローカル環境を汚さずに使えるのはおすすめです。プロジェクト固有のskillsやコマンドを全員一律に使えるようになるのもおすすめです。

Claudeのバージョン管理や作成したアプリをどのようにデプロイするかはまた別で考える予定です。

補足

  • Claude Codeが以下の補足を記載
  • ANTHROPIC_API_KEY はdevcontainerの remoteEnv か ~/.bashrc で設定しておくと毎回不要になります
  • claude --model claude-opus-4-8 のようにモデルを指定することも可能（デフォルトはSonnet）
  • スキルファイルは $ARGUMENTS プレースホルダーで引数を受け取れます（例：/review src/api.ts）
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?