canonical_url: https://yycode.net/docs/ja/vscode-gui-guide
lang: ja
updated_at: 2026-07-04T13:33:48.616Z
source_html: https://yycode.net/docs/ja/vscode-gui-guide

# yycode × Claude Code VS Code GUI 操作チュートリアル


## 前提条件

- [Node.js 環境インストール](nodejs-setup) を完了済み
- Claude Code をインストール済み（`npm install -g @anthropic-ai/claude-code`）

---

## 1. VS Code をインストール

[VS Code 公式サイト](https://code.visualstudio.com/Download) にアクセスし、対応するプラットフォームのインストーラーをダウンロードします。

Mac ユーザーは正しいチップアーキテクチャを選んでください。

- **ARM64**：M1 / M2 / M3 / M4 チップ
- **x64**：Intel チップ

---

## 2. Claude Code for VS Code 拡張機能をインストール

VS Code を開き、左側の **拡張機能マーケット**（Extensions）をクリックし、`Claude Code for VS Code` を検索します。公開者が **Anthropic** であることを確認して **インストール** をクリックします。

![](https://r2.bozhouai.com/dragoncode/file-20260401164747215.png)

インストール後、任意のプロジェクトを開き、右上の **Claude Code アイコン** をクリックして拡張機能パネルを開きます。

![](https://r2.bozhouai.com/dragoncode/file-20260401164814316.png)

---

## 3. API Key を作成

[yycode コンソール](https://yycode.net/console/token) にログインし、**令牌管理** ページに入り、**添加令牌** をクリックします。

![](https://r2.yycode.net/yycode/i9bq1Ik.png)
![](https://r2.yycode.net/yycode/9KXR1Ik.png)

キー名を入力し、グループ（モデルと倍率）を選択します。必要に応じて IP 制限、额度限制、模型限制、有効期限を設定できます。初心者はデフォルト設定のまま使うことをおすすめします。

> **セキュリティ上の注意**：API Key はアカウント認証情報と同等です。大切に保管し、コードリポジトリへコミットしたり公開共有したりしないでください。

---

## 4. キーを導入


キー横の **コピー** ボタンをクリックして API Key を取得します。

![](https://r2.yycode.net/yycode/EDOv1Ik.png)

次の 2 つの環境変数を設定する必要があります。

| 変数名 | 値 |
|---|---|
| `ANTHROPIC_BASE_URL` | `https://yycode.net` |
| `ANTHROPIC_AUTH_TOKEN` | あなたの API Key |

**一時設定（現在のターミナルセッションのみ有効）**

Windows (PowerShell)：
```powershell
$env:ANTHROPIC_BASE_URL = "https://yycode.net"
$env:ANTHROPIC_AUTH_TOKEN = "YOUR_API_KEY"
```

macOS / Linux：
```bash
export ANTHROPIC_BASE_URL="https://yycode.net"
export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY"
```

**永続設定（再起動後も有効）**

Windows (PowerShell)：
```powershell
[System.Environment]::SetEnvironmentVariable("ANTHROPIC_BASE_URL", "https://yycode.net", [System.EnvironmentVariableTarget]::User)
[System.Environment]::SetEnvironmentVariable("ANTHROPIC_AUTH_TOKEN", "YOUR_API_KEY", [System.EnvironmentVariableTarget]::User)
```

macOS (Zsh)：
```bash
echo 'export ANTHROPIC_BASE_URL="https://yycode.net"' >> ~/.zshrc
echo 'export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY"' >> ~/.zshrc
source ~/.zshrc
```

Linux (Bash)：
```bash
echo 'export ANTHROPIC_BASE_URL="https://yycode.net"' >> ~/.bashrc
echo 'export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY"' >> ~/.bashrc
source ~/.bashrc
```

---

## 5. 公式ログインをスキップ

初回に拡張機能を開くと、Anthropic 公式ログインページが表示され、3 種類のログイン方法が出る場合があります。

**どれも選ばないでください**。3〜5 秒待つとページは自動的に消えます。前の手順で環境変数を正しく設定していれば、拡張機能は自動的に Dragon Code の API Key を使用するため、ログイン不要です。

![](https://r2.bozhouai.com/dragoncode/file-20260401164915737.png)

ログインページが自動で消えない場合は、左下の設定をクリックし、Claude code を検索して **Disable Login Prompt** にチェックを入れて手動で閉じます。
![](https://r2.bozhouai.com/dragoncode/file-20260401165140845.png)

![](https://r2.bozhouai.com/dragoncode/file-20260401165116806.png)

設定成功後の画面は次のようになります。

![](https://r2.bozhouai.com/dragoncode/file-20260401165223172.png)

---

## 6. 使い始める

入力欄に自然言語で要件を記述し、会話形式で Claude Code とやり取りします。拡張機能は現在のプロジェクトのコードを自動的に読み取り、変更できます。

![](https://r2.bozhouai.com/dragoncode/file-20260401165343382.png)

---

## 7. 使い方のコツ

### 3 つの操作モード

左下で操作モードを切り替えられます。

![](https://r2.bozhouai.com/dragoncode/file-20260401165410771.png)

**1. Ask before edits（編集前に確認）**

最も保守的なモードです。Claude は毎回の変更前に差分を表示し、確認を得てからファイルへ書き込みます。使い始めでツールに慣れていない場合や、重要なコード変更を段階的に確認したい場合に適しています。

**2. Edit automatically（自動編集）**

最も自動化されたモードです。Claude はコードファイルを直接変更し、逐次確認は行いません。要件が明確で、素早く変更を反映したい場合に適しています。変更が想定範囲を超える可能性があるため、作業後に Git diff で変更範囲を確認することをおすすめします。

**3. Plan mode（計画モード）**

コードを直接変更せず、先にプロジェクト構造をスキャンして完全な修正方案と実行手順を提示し、確認後に実行します。コードリファクタリング、複数ファイル連動の変更、アーキテクチャ調整など複雑なタスクに適しています。先に方案を確認してから手を動かすことで、大規模変更の制御不能を避けられます。

### 複数ウィンドウで並行開発

右上の **+** をクリックすると複数の Claude Code ウィンドウを開けます。たとえば 1 つを開発用、もう 1 つをテスト用にできます。

![](https://r2.bozhouai.com/dragoncode/file-20260401170043951.png)

### プロジェクトファイルを参照

入力欄に `@` を入力してファイル名を選ぶと、そのファイル内容を Claude Code のコンテキストとして渡せます。

![](https://r2.bozhouai.com/dragoncode/file-20260401170057102.png)

### ファイルをアップロード

`/attach file` と入力し、ファイル選択画面からファイルをアップロードします。

![](https://r2.bozhouai.com/dragoncode/file-20260401170128374.png)

> **注意**：右下の添付アイコンは **ファイル参照**（コンテキスト追加）であり、ファイルアップロードではありません。区別してください。

### モデルを切り替える

`/model` と入力し、**Switch Model** を選択して、必要に応じてモデルを切り替えます。

![](https://r2.bozhouai.com/dragoncode/file-20260401170141185.png)

---

## よくある質問（FAQ）

**Q：拡張機能をインストールしたのに Claude Code アイコンが見つかりません。**
A：拡張機能が正常にインストールされているか確認し、VS Code を再起動してみてください。アイコンはエディター右上のツールバーにあります。

**Q：ログインページがずっと消えません。**
A：対話ボックスに `/config` と入力し、`Disable Login Prompt` にチェックを入れてログイン提示を閉じてください。

**Q：拡張機能で接続失敗または 401 エラーが表示されます。**
A：`ANTHROPIC_BASE_URL` が `https://yycode.net` であること、`ANTHROPIC_AUTH_TOKEN` が正しく未期限切れであることを確認してください。

**Q：別のモデルや倍率に切り替えるには？**
A：[yycode コンソール](https://yycode.net/console/token) で異なるグループのキーを作成し、CC Switch で複数設定をすばやく切り替えます。

**Q：VS Code はどのバージョンを選べばよいですか？**
A：Mac ユーザーはチップに応じて選択します。M シリーズチップは ARM64、Intel チップは x64。Windows ユーザーはデフォルト版をそのままダウンロードすれば大丈夫です。