> ## Documentation Index
> Fetch the complete documentation index at: https://docs.acedata.cloud/llms.txt
> Use this file to discover all available pages before exploring further.

# Claude Code for VS Code 使用教程

> Claude Code 集成指南 - Ace Data Cloud

Claude Code は Anthropic が提供する **Agentic Coding** ツールであり、世界最強のプログラミングエージェントの一つとも言われています。Claude Code の VS Code 拡張は、ネイティブなグラフィカルインターフェースを提供し、インライン Diff ビュー、`@`-mentions 参照、計画レビューなどの機能をサポートしており、VS Code で Claude Code を使用するための推奨方法です。

この文書では、AceData Cloud のプロキシサービスを通じて、VS Code で Claude Code 拡張を設定し使用する方法を主に説明します。

## 申請プロセス

Claude Code を使用するには、まず [Claude Messages サービスページ](https://platform.acedata.cloud/documents/claude-messages) にアクセスし、「Acquire」ボタンをクリックして、リクエストに必要な資格情報を取得します：

![](https://cdn.acedata.cloud/nyq0xz.png)

まだログインまたは登録していない場合は、自動的にログインページにリダイレクトされ、登録とログインを促されます。ログインまたは登録後、現在のページに自動的に戻ります。

初回申請時には無料のクレジットが付与され、Claude Code サービスを無料で体験できます。

## プラグインのインストール

### システム要件

* VS Code 1.98.0 以上（Cursor もサポート）

### インストール手順

VS Code / Cursor の拡張マーケットプレイスで、`Cmd+Shift+X`（Mac）または `Ctrl+Shift+X`（Windows/Linux）を押して拡張ビューを開き、**Claude Code** を検索し、Anthropic が公式にリリースしたプラグインを見つけて「Install」をクリックしてインストールします：

![VS Code Marketplace 中の Claude Code プラグイン](https://cdn.acedata.cloud/10ddf71320.png)

以下のリンクから直接インストールすることもできます：

* [VS Code インストールリンク](vscode:extension/anthropic.claude-code)
* [Cursor インストールリンク](cursor:extension/anthropic.claude-code)

インストール後、ポップアップの情報提示で信頼を選択すれば、インストールが完了します。

> インストール後に拡張が表示されない場合は、VS Code を再起動するか、コマンドパネルで「Developer: Reload Window」を実行してください。

## AceData Cloud API の設定

プラグインを初めて開くと、Anthropic の公式アカウントにログインするように促されます。公式ログインをスキップし、AceData Cloud のプロキシ API を設定することで使用できます。**公式のサブスクリプションは不要です**。

### ステップ 1：環境変数の設定

以下のいずれかの場所で環境変数を設定できます：

**オプション A：ユーザーレベルの設定（すべてのプロジェクトに適用）**

`~/.claude/settings.json` を編集（存在しない場合は作成）し、`env` 設定を追加し、`{token}` を AceData Cloud コンソールで取得した API トークンに置き換えます：

```json theme={null}
{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "{token}",
    "ANTHROPIC_BASE_URL": "https://api.acedata.cloud"
  }
}
```

**オプション B：プロジェクトレベルの設定（現在のプロジェクトのみ）**

プロジェクトのルートディレクトリに `.claude/settings.json`（共有設定）または `.claude/settings.local.json`（個人設定、gitignored）を作成します：

```json theme={null}
{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "{token}",
    "ANTHROPIC_BASE_URL": "https://api.acedata.cloud"
  }
}
```

> **ヒント**：API トークンは [AceData Cloud コンソール](https://platform.acedata.cloud/console) で確認できます。`ANTHROPIC_AUTH_TOKEN` の値には自動的に `Bearer` プレフィックスが追加され、サーバーに送信されます。プロジェクトレベルの設定はユーザーレベルの設定よりも優先されます。チームプロジェクトでは `.claude/settings.json` で共有設定を使用し、個人の敏感情報は `.claude/settings.local.json` に保存することをお勧めします。

### ステップ 2：ログイン提示を無効にする（オプション）

毎回開くたびにログイン提示を見たくない場合は、VS Code の設定で **Disable Login Prompt** にチェックを入れます：

設定で「Claude Code login」を検索し、**Disable Login Prompt** オプションにチェックを入れれば完了です。

設定が完了したら、Claude Code プラグインパネルを再度開くことで、正常に使用を開始できます。

## Claude Code パネルを開く

インストールと設定が完了したら、Claude Code を開く方法はいくつかあります：

| 方法             | 操作                                                   |
| -------------- | ---------------------------------------------------- |
| **エディターツールバー** | エディタの右上隅にある ✦ Spark アイコンをクリック（ファイルを開く必要があります）        |
| **ステータスバー**    | 下部のステータスバー右側の「✱ Claude Code」をクリック（ファイルを開く必要はありません）   |
| **コマンドパネル**    | `Cmd+Shift+P` / `Ctrl+Shift+P` を押し、「Claude Code」を検索  |
| **ショートカットキー**  | `Cmd+Esc`（Mac）/ `Ctrl+Esc`（Windows/Linux）でフォーカスを切り替え |

Cursor / Copilot などのツールがサイドバーを使用するのとは異なり、Claude Code はデフォルトで**エディタービュー**をチャットエリアとして採用しており、可視領域が広く、内容の表示が豊富です。パネルをサイドバーや他の位置にドラッグすることもできます。

![VS Code 中の Claude Code パネル](https://cdn.acedata.cloud/b84b878420.jpg)

## 基本使用

### 対話インタラクション

Claude Code パネルに自然言語を直接入力することで、Claude とインタラクションできます。例えば：

* 「このプロジェクトの全体アーキテクチャを分析して」
* 「このコードにバグがあるので、修正して」
* 「この関数をリファクタリングして、可読性を向上させて」
* 「このモジュールにユニットテストを書いて」

Claude Code は自動的にあなたのコードベースのコンテキストを理解し、ファイルを跨いで分析と編集を行います。Claude がファイルを修正する必要がある場合、Diff 比較ビューが表示され、変更を受け入れるか拒否するかを選択できます。

![VS Code 中の Claude Code 対話と提示](https://cdn.acedata.cloud/650377f5cc.png)

### コンテキスト参照

対話中に `@` 記号を使用することで、特定のファイルやコンテキストを参照できます：

* `@filename.py` — 指定ファイルを参照（あいまいマッチをサポート）
* `@src/components/` — ディレクトリ全体を参照（末尾にスラッシュが必要）
* `@terminal:name` — ターミナル出力を参照

エディタ内のコードを選択した後、`Option+K`（Mac）/ `Alt+K`（Windows/Linux）を押すことで、`@` 参照（例：`@app.ts#5-10`）を迅速に挿入できます。

### スラッシュコマンド

対話ボックス内の `/` アイコンをクリックするか、直接 `/` を入力することで、豊富な組み込み機能を使用できます：

よく使うコマンドには以下が含まれます：

| コマンド       | 機能              |
| ---------- | --------------- |
| `/new`     | 新しい対話を作成        |
| `/model`   | モデルを切り替える       |
| `/compact` | コンテキストを圧縮する     |
| `/mcp`     | MCP サービスを設定する   |
| `/config`  | 設定を開く           |
| `/usage`   | 使用量を確認する        |
| `/memory`  | Claude の記憶を管理する |
| `/help`    | ヘルプ情報を表示する      |

### 過去の対話を確認

パネルの上部にあるドロップダウンメニューをクリックすることで、過去の対話履歴を確認できます。キーワード検索や時間帯（Today、Yesterday、Last 7 days など）でブラウズでき、以前のインタラクション内容を簡単に振り返ることができます。任意の対話をクリックすると、完全なメッセージ履歴を復元できます。

### コード変更のレビュー

Claude がファイルを修正する必要がある場合、Diff 比較ビューが表示され、元のコードと修正後の比較が示されます。各変更を受け入れるか拒否するかを選択でき、Claude に異なるアプローチを伝えることもできます：
![VS Code 中的 Diff 对比视图](https://cdn.acedata.cloud/c42381ea9f.png)

### 権限モード

パネルの下部にあるモードインジケーターを使用して、異なる権限モードを切り替えることができます：

| モード                   | 説明                                |
| --------------------- | --------------------------------- |
| **Default（Ask）**      | 操作の前に毎回確認を求める（デフォルト）              |
| **Plan**              | Claudeが計画を立て、承認を待ってから実行する         |
| **acceptEdits**       | ファイル編集を自動的に受け入れるが、ターミナルコマンドは確認が必要 |
| **bypassPermissions** | すべての権限提示をスキップし、完全自動化（慎重に使用）       |

### 複数セッションの並行

コマンドパネルの **Open in New Tab** または **Open in New Window** を使用して、複数の独立した対話を開始できます。各対話は独自の履歴とコンテキストを維持し、異なるタスクを並行して処理できます。

## その他の設定

### モデルの切り替え

Claude Codeは、Claude Sonnet、Claude Opusなど、異なるモデルの切り替えをサポートしています。 `/model` コマンドまたはプラグイン設定の **Selected Model** で設定できます。

### 自動モード

プラグイン設定で **Initial Permission Mode** を `bypassPermissions` に設定すると、Claude Codeがファイル編集やターミナルコマンドなどの操作を行う際に、逐一ポップアップ確認が表示されず、完全自動化されたワークフローを実現します。

また、`acceptEdits` に設定することで、編集を自動的に受け入れつつ、ターミナルコマンドは確認が必要な半自動モードを実現できます。

> **注意**：自動モードを有効にする前に、そのリスクを理解していることを確認してください。信頼できるプロジェクト環境での使用をお勧めします。

### ターミナルでCLIを使用

コマンドラインスタイルを好む場合は、VS Codeの設定で **Use Terminal** にチェックを入れると、Claude CodeがCLIモードで統合ターミナル内で実行されます。また、VS Codeの統合ターミナルを直接開き、`claude` コマンドを実行することもできます。

## よくある質問

### 接続に失敗した場合は？

1. `~/.claude/settings.json` または `.claude/settings.json` の環境変数設定が正しいことを確認してください。特に `ANTHROPIC_AUTH_TOKEN` と `ANTHROPIC_BASE_URL`
2. APIトークンが有効であることを確認してください（[コンソール](https://platform.acedata.cloud/console)で確認可能）
3. ネットワーク接続が正常であることを確認し、`https://api.acedata.cloud` にアクセスできることを確認してください
4. VS Codeを再起動して再試行してください

### Sparkアイコンが表示されない？

1. ファイルが開いていることを確認してください（フォルダーを開くだけでは不十分です）
2. VS Codeのバージョンが1.98.0以上であることを確認してください
3. コマンドパネルで「Developer: Reload Window」を実行してください
4. または、下部のステータスバーの「✱ Claude Code」を直接クリックしてください

### 残りのクレジットを確認するには？

[AceData Cloudコンソール](https://platform.acedata.cloud/console)にログインすると、現在のアカウントの残りのクレジットと使用状況を確認できます。

## さらに詳しく

* 📖 [Claude Code VS Code公式ドキュメント](https://code.claude.com/docs/en/vs-code)
* ⌨️ [VS Codeコマンドとショートカットのリファレンス](https://code.claude.com/docs/en/vs-code#vs-code-commands-and-shortcuts)
* 🔧 [AceData Cloud Claude Codeサービス](https://platform.acedata.cloud/documents/claude-messages)
* 💬 何か質問がある場合は、プラットフォームのカスタマーサポートにお問い合わせください
