Claude Code VSCode拡張機能完全ガイド【2025年最新】インストールから実践活用まで

はじめに

2025年5月28日、AnthropicはついにClaude CodeのVSCode公式拡張機能をリリースしました。これまでCLIツールとして提供されていたClaude Codeが、VSCode内で直接利用できるようになり、開発体験が大きく向上しました。

本記事では、Claude Code VSCode拡張機能のインストールから実践的な活用方法まで、徹底的に解説します。

Claude Code VSCode拡張機能とは

公式リリースの経緯

2025年5月28日: VSCode Marketplaceで公式リリース

背景:

従来はCLIツールとしてターミナルで動作
ユーザーからの要望に応えて公式拡張機能を開発
CursorのようなGUIベースの統合開発環境を実現

主な特徴

VSCode完全統合:

IDE内でClaude Codeを直接操作
ターミナルとブラウザを行き来する必要がない
VSCodeの全機能と連携

直感的なUI:

右サイドバーにセッションコンソールを表示
Cursorライクな操作感
コード差分の視覚的表示

マルチエージェントワークフロー:

複数タスクの自動分割
並列処理による効率化
タスク間の依存関係管理

インストール方法

前提条件

必要な環境:
- Visual Studio Code: 最新版推奨
- Node.js: v18以上
- Claude アカウント: ProまたはMax 5xプラン

ステップ1: VSCode Marketplaceからインストール

方法A: 拡張機能検索

1. VSCodeを起動
2. 左サイドバーの拡張機能アイコンをクリック
   (またはCtrl+Shift+X / Cmd+Shift+X)
3. 検索バーに「Claude Code」と入力
4. 「Claude Code for VS Code」を選択
5. 「インストール」ボタンをクリック

方法B: Marketplace URLから直接

1. ブラウザで以下にアクセス:
   https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code

2. 「Install」ボタンをクリック

3. VSCodeが自動的に開き、インストール画面が表示

4. 「インストール」を確定

ステップ2: 発行元の信頼確認

初回インストール時:
1. 「Anthropic PBC」の信頼確認ダイアログが表示
2. 「信頼する」を選択
3. 拡張機能が有効化される

ステップ3: 認証

1. VSCode右下に「Sign in to Claude Code」通知が表示
2. 「Sign in」をクリック
3. ブラウザでClaudeアカウントにログイン
4. 認証が完了するとVSCodeに戻る

Windows環境での注意点

WSL経由でのインストールが必要:

# WSL(Windows Subsystem for Linux)をインストール
wsl --install

# WSLを起動
wsl

# WSL内でVSCodeを開く
code .

# WSL内で拡張機能をインストール
# 通常の手順と同じ

詳細: WindowsでVS CodeからClaude Code拡張を使う手順

基本的な使い方

インターフェース概要

┌────────────────────────────────────┐
│ VSCode                             │
│ ┌──────────────┬─────────────────┐ │
│ │              │                 │ │
│ │              │  Claude Code    │ │
│ │  エディタ     │  セッション     │ │
│ │              │  コンソール      │ │
│ │              │                 │ │
│ │              │  プロンプト入力  │ │
│ │              │  タスク一覧      │ │
│ │              │  コード差分表示  │ │
│ │              │                 │ │
│ └──────────────┴─────────────────┘ │
└────────────────────────────────────┘

セッション開始

方法1: コマンドパレット
1. Ctrl+Shift+P / Cmd+Shift+P
2. 「Claude Code: Start Session」を実行

方法2: サイドバーアイコン
1. 右サイドバーのClaude Codeアイコンをクリック
2. 「New Session」をクリック

方法3: ショートカットキー
Ctrl+Shift+C / Cmd+Shift+C(デフォルト)

プロンプト入力

1. セッションコンソールのプロンプト欄にカーソルを合わせる

2. 自然言語で指示を入力:
   例: 「このReactコンポーネントにダークモード対応を追加して」

3. Enterキーで送信

4. Claude Codeがタスクを自動分割して実行

コード変更の確認

差分表示:

1. Claude Codeがコード変更を提案
2. VSCodeの差分ビューアーが自動的に開く
3. 変更内容を視覚的に確認
   - 赤: 削除された行
   - 緑: 追加された行
4. 「Accept」または「Reject」を選択

複数ファイルの一括確認:

1. タスク一覧で変更されたファイルを確認
2. 各ファイルをクリックして差分表示
3. ファイルごとに個別に承認または却下

実践的な活用例

例1: AWS CloudFormationテンプレートの拡張

シナリオ

既存のCloudFormationテンプレートにALB(Application Load Balancer)を追加する

手順

1. プロンプト入力:
   「このCloudFormationテンプレートにALBを追加して、
   既存のEC2インスタンスをターゲットグループに登録」

2. Claude Codeが自動実行:
   - タスク分割:
     a. ALBリソース定義の作成
     b. ターゲットグループの作成
     c. リスナー設定
     d. セキュリティグループの更新

   - 各タスクを順次実行
   - YAMLリソース定義を生成

3. 差分確認:
   - 追加されたリソースをレビュー
   - セキュリティグループルールを確認

4. デプロイ:
   「このテンプレートをデプロイして」
   → Claude CodeがCLIコマンドを実行

参考: Claude CodeのVSCode拡張レビュー

例2: Next.jsアプリの機能追加

シナリオ

ブログサイトに検索機能を追加

手順

1. プロンプト入力:
   「このNext.jsブログに全文検索機能を追加して。
   Algoliaを使ってください」

2. Claude Codeの実行:
   タスク分割:
   - Algoliaライブラリのインストール
   - 検索コンポーネントの作成
   - 検索API RouteHandlerの作成
   - 既存ページへの検索ボックス統合
   - インデックス作成スクリプト

3. 確認:
   - 各ファイルの変更を確認
   - package.jsonの依存関係を確認

4. テスト:
   「開発サーバーを起動してテストして」
   → Claude Codeがnpm run devを実行

例3: リファクタリング

シナリオ

クラスコンポーネントを関数コンポーネントに変換

手順

1. エディタでコンポーネントファイルを選択

2. プロンプト入力:
   「この5つのクラスコンポーネントを
   React Hooksを使った関数コンポーネントに変換」

3. Claude Codeの実行:
   - 各コンポーネントを並列処理
   - state → useState変換
   - ライフサイクル → useEffect変換
   - thisの削除

4. 差分確認:
   - 変換結果をレビュー
   - テストファイルの確認

5. テスト実行:
   「すべてのテストを実行して」
   → Claude Codeがnpm testを実行

Cursorとの比較

機能比較

Claude Code VSCode拡張:

長所: 無料のVSCodeで利用可能、Claude最新モデルに対応、マルチエージェント機能
短所: ProまたはMax 5xプラン必須、拡張機能のカスタマイズ性が低い

Cursor:

長所: IDE全体が最適化、コード補完が高速、豊富なテーマとプラグイン
短所: 有料($20/月)、Claude以外のモデルも利用、エディタ移行が必要

使い分けのポイント

Claude Code VSCode拡張を選ぶべき人:
- VSCodeに慣れている
- 既存のVSCode環境を維持したい
- Claudeの最新機能を優先
- 複雑なマルチエージェントタスクを実行

Cursorを選ぶべき人:
- 新しいエディタに抵抗がない
- リアルタイムコード補完を重視
- 複数のAIモデルを使い分けたい
- オールインワンソリューションを求める

参考: Claude CodeとVSCodeの拡張機能比較ガイド

高度な機能

マルチエージェントワークフロー

概要:

複数のタスクを並列処理し、依存関係を自動管理する機能

使い方:

1. 複数タスクを含むプロンプト:
   「Next.jsアプリ全体をTypeScriptに移行して:
   1. すべてのJSファイルをTSに変換
   2. 型定義ファイルを作成
   3. tsconfig.jsonを設定
   4. ビルドエラーを修正」

2. Claude Codeが自動実行:
   - エージェント1: ファイル変換(並列)
   - エージェント2: 型定義作成(並列)
   - エージェント3: tsconfig.json設定(優先)
   - エージェント4: エラー修正(直列、変換後)

3. タスク一覧で進捗確認:
   - 完了: tsconfig.json設定 ✓
   - 実行中: ファイル変換 75%
   - 待機中: エラー修正

コンテキスト管理

選択範囲の自動追加:

1. エディタでコードを選択

2. 右クリック > 「Add to Claude Code Context」

3. セッションコンソールに選択範囲が自動追加

4. プロンプト入力時に参照される

ファイル参照:

プロンプト内で@記号を使用:

例: 「@src/components/Header.tsxのスタイルを
    @styles/theme.tsのテーマ変数を使って更新」

Past Conversations機能

2025年9月30日追加:

過去のセッションを閲覧・再開する機能

使い方:

1. サイドバーの「Past Conversations」をクリック

2. 過去のセッション一覧が表示

3. セッションを選択して内容を確認

4. 「Resume」で続きから再開

トラブルシューティング

問題1: 拡張機能が自動インストールされない

症状

ターミナルでclaude-codeを起動しても拡張機能がインストールされない

解決方法

# 手動インストール
1. VSCode Marketplaceから手動でインストール
2. VSCodeを再起動
3. 拡張機能が有効化されていることを確認

# または、CLIから強制インストール
claude-code --install-vscode-extension

参考: Claude CodeのVSCode拡張が自動インストールされない事象への対応

問題2: Windows環境で動作しない

症状

「Claude Code does not currently support Windows」エラー

解決方法

# WSL経由で使用
1. WSLをインストール
   wsl --install

2. WSL内でVSCodeを起動
   code .

3. WSL内で拡張機能をインストール

参考: WindowsでVS CodeからClaude Code拡張を使う手順

問題3: 認証エラー

症状

「Failed to authenticate with Claude」

解決方法

1. ブラウザのキャッシュをクリア

2. VSCodeで再認証:
   - コマンドパレット: Claude Code: Sign Out
   - 再度サインイン

3. ProまたはMax 5xプランを確認
   - 無料プランでは使用不可

問題4: セッションが重い

症状

レスポンスが遅い、フリーズする

解決方法

1. コンテキストを圧縮:
   /compact コマンドを実行

2. 不要なファイルをコンテキストから削除

3. セッションを再起動

4. VSCodeの他の拡張機能を一時的に無効化

ショートカットキー

デフォルトキーバインド

セッション開始: Ctrl+Shift+C / Cmd+Shift+C
プロンプトフォーカス: Ctrl+Shift+P / Cmd+Shift+P
コンテキストに追加: Ctrl+Shift+A / Cmd+Shift+A
差分を承認: Ctrl+Enter / Cmd+Enter
差分を却下: Esc

カスタマイズ

// keybindings.json
{
  "key": "ctrl+alt+c",
  "command": "claude-code.startSession"
},
{
  "key": "ctrl+alt+p",
  "command": "claude-code.focusPrompt"
}

設定のカスタマイズ

settings.jsonでの設定

{
  "claude-code.autoCompact": true,
  "claude-code.compactThreshold": 100000,
  "claude-code.showDiffInEditor": true,
  "claude-code.autoAcceptSimpleChanges": false,
  "claude-code.maxParallelAgents": 5,
  "claude-code.defaultModel": "claude-sonnet-4-20250514"
}

推奨設定

{
  // 自動コンテキスト圧縮
  "claude-code.autoCompact": true,

  // 差分をエディタで表示
  "claude-code.showDiffInEditor": true,

  // 簡単な変更は自動承認しない(安全のため)
  "claude-code.autoAcceptSimpleChanges": false,

  // 並列エージェント数
  "claude-code.maxParallelAgents": 3
}

よくある質問

Q1: 無料で使える?

A: 拡張機能自体は無料ですが、Claude ProまたはMax 5xプラン($20または$100/月)が必要です。

Q2: CLIツール版と併用できる?

A: はい。拡張機能とCLIツールは独立しており、両方インストールして使い分けられます。

Q3: Cursorから移行すべき?

A: VSCodeに慣れている場合は移行の価値あり。ただし、Cursorの統合感も魅力的なので、用途に応じて選択を。

Q4: オフラインで使える?

A: いいえ。Claude APIに接続するため、常時インターネット接続が必要です。

Q5: プロジェクトごとに設定を変えられる?

A: はい。.vscode/settings.jsonでプロジェクト固有の設定が可能です。

まとめ

Claude Code VSCode拡張機能の主な利点

VSCode完全統合: 慣れた環境で利用可能
直感的なUI: Cursorライクな操作感
マルチエージェント: 複雑なタスクを自動分割
差分表示: コード変更を視覚的に確認
無料(Proプラン契約者): 追加費用なし

推奨される使い方

1. 日常的なコーディング: GitHub Copilot
2. 複雑な設計・リファクタリング: Claude Code VSCode拡張
3. 大規模プロジェクト: Cursor

今後の展望

2025年5月のリリース以降、急速に機能が追加されています:

Past Conversations機能(2025年9月)
マルチエージェントワークフロー強化
Windows ネイティブサポート(開発中)

Claude Code VSCode拡張機能は、VSCodeユーザーにとって強力な開発パートナーになります。まずはインストールして、実際のプロジェクトで試してみましょう!

はじめに

Claude Code VSCode拡張機能とは

公式リリースの経緯

主な特徴

インストール方法

前提条件

ステップ1: VSCode Marketplaceからインストール

方法A: 拡張機能検索

方法B: Marketplace URLから直接

ステップ2: 発行元の信頼確認

ステップ3: 認証

Windows環境での注意点

基本的な使い方

インターフェース概要

セッション開始

プロンプト入力

コード変更の確認

実践的な活用例

例1: AWS CloudFormationテンプレートの拡張

シナリオ

手順

例2: Next.jsアプリの機能追加

シナリオ

手順

例3: リファクタリング

シナリオ

手順

Cursorとの比較

機能比較

使い分けのポイント

高度な機能

マルチエージェントワークフロー

コンテキスト管理

Past Conversations機能

トラブルシューティング

問題1: 拡張機能が自動インストールされない

症状

解決方法

問題2: Windows環境で動作しない

症状

解決方法

問題3: 認証エラー

症状

解決方法

問題4: セッションが重い

症状

解決方法

ショートカットキー

デフォルトキーバインド

カスタマイズ

設定のカスタマイズ

settings.jsonでの設定

推奨設定

よくある質問

Q1: 無料で使える?

Q2: CLIツール版と併用できる?

Q3: Cursorから移行すべき?

Q4: オフラインで使える?

Q5: プロジェクトごとに設定を変えられる?

まとめ

Claude Code VSCode拡張機能の主な利点

推奨される使い方

今後の展望

Related Articles