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

# VSCode で Cline を使用して APIMart を統合する

> Visual Studio Code で Cline 拡張機能を使用して APIMart API サービスを設定する詳細ガイド。このガイドでは、VSCode で Cline を通じて APIMart の AI モデルを使用してコード開発、デバッグ、最適化を行う方法を説明します。

## はじめに

Cline（旧 Claude Dev）は、開発者がエディタ内で直接 AI アシスタントと対話し、コード作成、デバッグ、リファクタリングなどのタスクを実行できる強力な VSCode 拡張機能です。APIMart API を設定することで、Cline でさまざまな高度な AI モデルを使用できます。

## 準備

開始する前に、以下を確認してください：

1. **Visual Studio Code がインストール済み**\
   [公式サイト](https://code.visualstudio.com/)から VSCode をダウンロードしてインストール

2. **Cline 拡張機能がインストール済み**\
   VSCode 拡張機能マーケットプレイスで「Cline」を検索してインストール

3. **APIMart API キーを取得済み**\
   [APIMart コンソール](https://apimart.ai/keys)にログインして API キーを取得（`sk-` で始まる）

<Note>
  **ヒント：** APIMart アカウントをお持ちでない場合は、まず [APIMart](https://apimart.ai) で登録して API キーを取得してください。
</Note>

## ステップ 1：Cline 拡張機能をインストール

### 1.1 拡張機能マーケットプレイスを開く

VSCode で：

1. 左側のアクティビティバーの **拡張機能** アイコンをクリック（または `Ctrl+Shift+X` / `Cmd+Shift+X` を押す）
2. 検索ボックスに **Cline** と入力
3. Cline 拡張機能を見つける（作成者：Cline）
4. **インストール** ボタンをクリック

### 1.2 インストールの確認

インストール完了後：

1. 左側のアクティビティバーに **Cline** アイコン（ロボットの頭）が表示されます
2. アイコンをクリックして Cline サイドバーを開きます
3. 初回起動時は「Hi, I'm Cline」というウェルカムメッセージが表示されます
4. 2つのオプションが表示されます：
   * **Get Started for Free** - 公式の無料トライアルを使用
   * **Use your own API key** - 自分の API キーを使用

<Frame>
  <img src="https://mintcdn.com/apicore/0c3FfTpBvR13Ca4x/images/integrations/cline/extension-install.png?fit=max&auto=format&n=0c3FfTpBvR13Ca4x&q=85&s=d547318458a38f26e5cb5eab0207cceb" alt="Cline 拡張機能のインストール" width="1510" height="1010" data-path="images/integrations/cline/extension-install.png" />
</Frame>

<caption>*VSCode 拡張機能マーケットプレイスで Cline を検索してインストール*</caption>

## ステップ 2：APIMart API を設定

### 2.1 自分の API キーを使用を選択

Cline ウェルカム画面で：

1. **Use your own API key** ボタンをクリック
2. API 設定インターフェースが開きます

<Frame>
  <img src="https://mintcdn.com/apicore/0c3FfTpBvR13Ca4x/images/integrations/cline/sidebar-settings.png?fit=max&auto=format&n=0c3FfTpBvR13Ca4x&q=85&s=2822806d4fde5ba8b48a19900a9865fc" alt="Cline ウェルカム画面" width="1919" height="1031" data-path="images/integrations/cline/sidebar-settings.png" />
</Frame>

<caption>*Cline ウェルカム画面、「Use your own API key」を選択して APIMart を使用*</caption>

<Note>
  **ヒント：** 以前に設定したことがある場合は、Cline サイドバー上部の **設定**（歯車アイコン）をクリックして設定にアクセスできます。
</Note>

### 2.2 API プロバイダーを設定

設定インターフェースで：

1. **API Configuration** セクションを展開
2. **API Provider** ドロップダウンから **OpenAI Compatible** を選択
3. OpenAI 互換の設定オプションが表示されます

<Note>
  **重要：** APIMart は OpenAI API フォーマットと完全に互換性があるため、「OpenAI Compatible」を選択します。
</Note>

### 2.3 API 設定を入力

以下の設定情報を入力します：

| 設定項目                          | 値                                        | 説明                  |
| ----------------------------- | ---------------------------------------- | ------------------- |
| **API Provider**              | `OpenAI Compatible`                      | ドロップダウンから選択         |
| **Base URL**                  | `https://api.apimart.ai/v1`              | APIMart API ベース URL |
| **OpenAI Compatible API Key** | `sk-xxxxxxxxxxxx`                        | APIMart API キー      |
| **Model ID**                  | `gpt-5` または `claude-sonnet-4-5-20250929` | 使用するモデル ID を入力      |

<Frame>
  <img src="https://mintcdn.com/apicore/0c3FfTpBvR13Ca4x/images/integrations/cline/api-config.png?fit=max&auto=format&n=0c3FfTpBvR13Ca4x&q=85&s=a12d36a260af9e0cbb1eeb94a220cd4e" alt="APIMart API を設定" width="1920" height="1031" data-path="images/integrations/cline/api-config.png" />
</Frame>

<caption>*設定インターフェースで API Provider、Base URL、API Key、Model ID を設定*</caption>

<Note>
  **設定の注意点：**

  * **API Key**：[APIMart コンソール](https://apimart.ai/keys)から取得した `sk-` で始まるキーである必要があります
  * **Base URL**：`https://api.apimart.ai/v1` に固定、`/v1` サフィックスに注意
  * **Model ID**：モデル ID を直接入力、例：`gpt-5`、`gpt-4o`、`claude-sonnet-4-5-20250929` など
  * 設定インターフェースの下部にモデルの機能（画像サポート、ブラウザ使用など）が表示されます
</Note>

### 2.4 設定を保存

設定完了後：

1. 右上の **Done** ボタンをクリック
2. 設定は自動的に保存されます
3. Cline は新しい設定を使用して即座に APIMart に接続します
4. Cline メイン画面に戻り、「What can I do for you?」と表示されます

## ステップ 3：適切なモデルを選択

### 推奨モデル

開発シナリオに応じて適切なモデルを選択：

**テキスト生成＆コード開発：**

* **gpt-5** ⭐ 最新モデル、最高のコード生成品質
  * 用途：複雑なアルゴリズム、アーキテクチャ設計、コードリファクタリング
  * 特徴：理解力が高く、コード品質が高い

* **gpt-4o** 高性能モデル
  * 用途：日常的な開発、コードレビュー、バグ修正
  * 特徴：高速で安定した品質

* **gpt-4o-mini** 💰 コスト効率が良い
  * 用途：シンプルなコード生成、コメント作成、ドキュメント生成
  * 特徴：コストパフォーマンスが高く、応答が速い

**Claude シリーズ（推論能力が強い）：**

* **claude-sonnet-4-5-20250929**
  * 用途：複雑な論理推論、アルゴリズム最適化
  * 特徴：推論能力に優れ、複雑な問題解決に適している

* **claude-haiku-4-5-20251001**
  * 用途：クイックコード補完、シンプルな Q\&A
  * 特徴：非常に高速、低コスト

<Tip>
  **モデル選択のヒント：**

  * 🚀 **複雑なプロジェクト、重要な機能：** `gpt-5`、`gpt-4o`、`claude-sonnet-4-5-20250929`
  * 💼 **日常的な開発、ルーチンタスク：** `gpt-4o`、`gpt-4o-mini`
  * 💰 **コスト重視、高頻度使用：** `gpt-4o-mini`、`claude-haiku-4-5-20251001`
</Tip>

### モデルの切り替え

Cline メイン画面の下部で：

1. 入力ボックスの下にあるモデルボタンを見つけます（現在のモデルが表示、例：`openai-compatible:clau...`）
2. このボタンをクリックしてモデルを切り替えます
3. または設定で **Model ID** フィールドを変更します
4. 変更は即座に反映され、VSCode の再起動は不要です

<Note>
  **ヒント：** 現在のモデルは入力ボックスの下のボタンに表示されます。クリックして素早く切り替えられます。
</Note>

## ステップ 4：Cline を使い始める

### 4.1 基本的な会話

設定完了後、AI アシスタントとチャット：

1. Cline メイン画面に「**What can I do for you?**」と表示されます
2. 下部の入力ボックス（「Type your task here...」と表示）にリクエストを入力
3. 例：「フィボナッチ数列を計算する関数を作成」
4. `Enter` を押して送信
5. AI がリクエストを分析し、コードを生成し、プロジェクトに直接適用できます
6. 各ステップの進捗状況がサイドバーに表示されます

### 4.2 コード生成

AI にコードを生成させる：

**例 1：関数を作成**

```
メールアドレス形式を検証する JavaScript 関数を作成してください
```

**例 2：機能を実装**

```
React Hooks を使用してメールとパスワード入力のあるユーザーログインフォームを実装してください
```

**例 3：テストを作成**

```
Jest を使用して calculateTotal 関数のユニットテストを作成してください
```

<Frame>
  <img src="https://mintcdn.com/apicore/0c3FfTpBvR13Ca4x/images/integrations/cline/chat-interface.png?fit=max&auto=format&n=0c3FfTpBvR13Ca4x&q=85&s=d8715c4d1f2ddb3f1dd1d2ba6f3083b3" alt="Cline チャットインターフェース" width="1920" height="1031" data-path="images/integrations/cline/chat-interface.png" />
</Frame>

<caption>*Cline で AI とチャットしてコードを生成*</caption>

### 4.3 コードの説明と改善

既存のコードを分析して最適化：

**右クリックメニューのショートカット：**

1. エディタで処理したいコードを選択
2. 右クリックすると Cline オプションが表示されます：
   * **Explain with Cline** - コードの機能とロジックを説明
   * **Improve with Cline** - コードを最適化して改善
3. 対応するアクションを選択
4. Cline がサイドバーに分析結果と改善提案を表示します

**会話を通じて：**

Cline サイドバーに直接入力することもできます：

```
このコードをリファクタリングして、可読性とパフォーマンスを向上させてください
```

<Frame>
  <img src="https://mintcdn.com/apicore/0c3FfTpBvR13Ca4x/images/integrations/cline/code-refactor.png?fit=max&auto=format&n=0c3FfTpBvR13Ca4x&q=85&s=cd87e44abe8d99e590cbf65cc25434d3" alt="コードの説明と改善" width="1920" height="1031" data-path="images/integrations/cline/code-refactor.png" />
</Frame>

<caption>*右クリックで「Explain with Cline」または「Improve with Cline」を使用してコードを素早く処理*</caption>

### 4.4 バグデバッグ

エラーを見つけて修正：

1. エラーメッセージや問題のあるコードを Cline に送信
2. 例：「このコードでエラーが発生：TypeError: Cannot read property 'name' of undefined」
3. AI が問題を分析して解決策を提供
4. 修正を直接適用できます

### 4.5 コード説明

複雑なコードを理解：

1. 理解しにくいコードスニペットを選択
2. Cline に入力：「このコードが何をするか説明してください」
3. AI が詳細な説明と動作原理を提供します

### 4.6 ドキュメント生成

コードドキュメントを自動生成：

**関数コメントを生成：**

```
この関数に JSDoc コメントを追加してください
```

**README を生成：**

```
このプロジェクトの README.md ファイルを生成してください
```

## 高度な機能

### 複数ファイル操作

Cline は複数のファイルを同時に処理できます：

1. **複数ファイルを作成**：
   ```
   ルート、コントローラー、モデルファイルを含む完全な Express.js API を作成してください
   ```

2. **一括変更**：
   ```
   プロジェクト内のすべての var を const または let に置き換えてください
   ```

3. **プロジェクトリファクタリング**：
   ```
   このプロジェクトを JavaScript から TypeScript に移行してください
   ```

<caption>*Cline は複数のファイルを同時に作成・変更できます*</caption>

### ターミナルコマンド実行

Cline はターミナルコマンドの実行を支援できます：

1. **依存関係をインストール**：
   ```
   axios と dotenv パッケージをインストールしてください
   ```

2. **スクリプトを実行**：
   ```
   npm test を実行してください
   ```

3. **Git 操作**：
   ```
   メッセージ「feat: add user authentication」で Git コミットを作成してください
   ```

**コマンド実行フロー：**

1. Cline がサイドバーに「**Cline wants to execute this command:**」と表示
2. 具体的なコマンドを表示（例：`gcc fibonacci.c -o fibonacci.exe`）
3. 下部に2つのボタンが表示：
   * **Run Command** - コマンドを実行
   * **Reject** - 実行を拒否
4. 「Run Command」をクリックすると、統合ターミナルでコマンドが実行
5. 結果がターミナルと Cline サイドバーに表示されます

<Warning>
  **セキュリティ注意：** Cline はターミナルコマンドを実行する前に明示的な確認が必要です。特にファイル削除やシステム設定に関わる機密操作では、「Run Command」をクリックする前にコマンド内容を慎重に確認してください。
</Warning>

### コンテキスト管理

Cline は会話コンテキストを自動的に管理します：

* **現在のファイルコンテキスト**：編集中のファイルを自動的に含む
* **選択したコードコンテキスト**：選択したコードスニペットを自動的に含む
* **プロジェクト構造コンテキスト**：プロジェクト構造を理解
* **エラーメッセージコンテキスト**：ターミナルエラーメッセージを自動的にキャプチャ

### カスタムプロンプト

カスタムプロンプトテンプレートを作成：

1. Cline 設定で **Custom Instructions** を見つける
2. 好みを追加、例：
   ```
   - JavaScript の代わりに TypeScript を使用
   - Airbnb コードスタイルに従う
   - アロー関数構文を使用
   - 関数型プログラミングスタイルを優先
   ```
3. AI はすべての対話でこれらの指示に従います

## よくある質問

### Q1: Cline が API キーが無効と表示する？

**解決策：**

1. **API Key 形式を確認**：
   * API Key が `sk-` で始まることを確認
   * 余分なスペースなしで完全にコピーされていることを確認

2. **Base URL を確認**：
   * `https://api.apimart.ai/v1` である必要があります
   * `/v1` サフィックスに注意

3. **キーの有効性を確認**：
   * [APIMart コンソール](https://apimart.ai/keys)でキーのステータスを確認
   * アカウント残高が十分であることを確認

4. **再設定**：
   * 既存の設定を削除
   * API Key と Base URL を再入力

### Q2: Cline の応答が遅い？

**解決策：**

1. **より高速なモデルに切り替え**：
   * `gpt-4o-mini` または `claude-haiku-4-5-20251001` を使用
   * これらのモデルは応答が速い

2. **コンテキストの長さを減らす**：
   * 一度に非常に長いコードを送信しない
   * 大きなタスクを小さなタスクに分割

3. **ネットワーク接続を確認**：
   * ネットワークが安定していることを確認
   * プロキシサーバーの使用を検討

4. **リクエスト内容を最適化**：
   * より具体的な質問をする
   * 曖昧すぎる質問を避ける

### Q3: Cline が生成するコードの品質が低い？

**解決策：**

1. **より高品質なモデルを使用**：
   * `gpt-5` または `claude-sonnet-4-5-20250929` に切り替え
   * これらのモデルはより高品質なコードを生成

2. **より詳細な要件を提供**：
   * 期待する実装を明確に述べる
   * サンプルコードや参照を提供
   * 技術スタックとフレームワークのバージョンを指定

3. **カスタム指示を使用**：
   * 設定でコード標準を追加
   * コーディングスタイルとベストプラクティスを指定

4. **反復的な最適化**：
   * AI と複数回の会話を行う
   * 徐々にコード品質を向上

### Q4: API 使用コストを管理するには？

**解決策：**

1. **適切なモデルを選択**：
   * 日常的な開発には `gpt-4o-mini` を使用
   * 複雑なタスクには `gpt-5` を使用

2. **質問方法を最適化**：
   * できるだけ具体的に
   * 同じ質問を繰り返さない

3. **コード選択を使用**：
   * 処理が必要なコード部分のみを選択
   * ファイル全体のコンテキストを送信しない

4. **使用状況を監視**：
   * 定期的に [APIMart コンソール](https://apimart.ai/overview)を確認
   * API 呼び出し頻度とコストを理解

### Q5: Cline が特定のファイルにアクセスできない？

**解決策：**

1. **ファイル権限を確認**：
   * ファイルに読み書き権限があることを確認
   * 特に Linux/macOS システムで

2. **.gitignore を確認**：
   * Cline はデフォルトで .gitignore 内のファイルを無視
   * 設定でこの動作を調整可能

3. **ワークスペース設定**：
   * ファイルが VSCode ワークスペース内にあることを確認
   * ワークスペース信頼設定を確認

4. **VSCode を再読み込み**：
   * `Ctrl+Shift+P` / `Cmd+Shift+P` を使用
   * 「Reload Window」コマンドを実行

## 使用のヒント

### 1. コンテキストを十分に活用

**完全な情報を提供：**

```
MongoDB データベースを使用する Express.js プロジェクトがあります。
登録、ログイン、JWT トークン検証を含むユーザー認証システムを作成してください。
プロジェクト構造は：
- src/models/
- src/controllers/
- src/routes/
- src/middleware/
```

### 2. 段階的な開発

**シンプルから始めて徐々に改善：**

```
ステップ 1：基本的なユーザーモデルを作成
ステップ 2：パスワード暗号化を追加
ステップ 3：登録とログインエンドポイントを実装
ステップ 4：JWT トークン検証を追加
```

### 3. コードレビューアシスタント

**AI にコードをレビューさせる：**

```
このコードをレビューして、以下をチェックしてください：
1. 潜在的なセキュリティ問題
2. パフォーマンス最適化の機会
3. コードスタイルの問題
4. 可能性のあるバグ
```

### 4. 新しい技術を学ぶ

**Cline を使って学習：**

```
React Hooks を学びたいです。
useState、useEffect、useContext の使用方法を示すサンプルプロジェクトを作成し、
各 Hook の動作を説明する詳細なコメントを追加してください。
```

### 5. 迅速なプロトタイピング

**アイデアを素早く検証：**

```
シンプルな TODO アプリを作成してください。要件：
- React と LocalStorage を使用
- 追加、削除、完了マーク機能
- シンプルな CSS スタイリング
- 単一の HTML ファイルで完成
```

### 6. ペアプログラミング

**AI と協力して開発：**

```
ソートアルゴリズムを実装しています。
前半を書いたので、残りを完成させてください：

function quickSort(arr) {
    if (arr.length <= 1) return arr;
    const pivot = arr[0];
    // 実装を続けてください...
}
```

## 機能ハイライト

Cline + APIMart で以下のことができます：

* 💻 **インテリジェントなコード生成** - 自然言語の説明から高品質なコードを生成
* 🔧 **コードリファクタリング** - コード構造とパフォーマンスを自動的に最適化
* 🐛 **バグデバッグ支援** - コードの問題を素早く特定して修正
* 📝 **ドキュメント生成** - コメント、README、API ドキュメントを生成
* 🧪 **テストケース作成** - ユニットテストと統合テストを自動生成
* 🔄 **コード移行** - 言語変換、フレームワーク移行
* 💡 **コード説明** - 複雑なコードロジックを理解
* 🎯 **ベストプラクティス提案** - コード標準と最適化アドバイスを提供
* 🚀 **迅速なプロトタイピング** - アイデアとコンセプトを素早く検証
* 🤖 **ターミナルコマンド実行** - 開発コマンドを自動実行

## キーボードショートカット

Cline の一般的なショートカット：

| ショートカット                        | 機能            | 説明                   |
| ------------------------------ | ------------- | -------------------- |
| `Ctrl+Shift+P` / `Cmd+Shift+P` | コマンドパレット      | すべての Cline コマンドにアクセス |
| `Ctrl+Shift+X` / `Cmd+Shift+X` | 拡張機能マーケットプレイス | 拡張機能のインストールと管理       |
| Cline アイコンをクリック                | サイドバーを開く/閉じる  | Cline に素早くアクセス       |
| `Ctrl+K Ctrl+I`                | インライン提案       | エディタで AI 提案を取得       |

<Tip>
  **ヒント：** VSCode のキーボードショートカット設定で Cline のショートカットをカスタマイズできます。
</Tip>

## ベストプラクティス

### 1. 明確なタスク説明

❌ **良くない質問：**

```
ログイン機能を書いて
```

✅ **良い質問：**

```
以下の要件でユーザーログイン機能を作成してください：
- React と TypeScript を使用
- フォームバリデーション（メール形式、パスワード長）
- axios を使用して API を呼び出す
- ログイン成功時に JWT トークンを localStorage に保存
- エラーハンドリングとユーザーフィードバック
```

### 2. コンテキスト情報を提供

**プロジェクト関連情報を含める：**

* 使用している技術スタックとフレームワーク
* 関連するファイル構造
* 既存のコード規約
* サードパーティライブラリの依存関係

### 3. 反復的な改善

**最初から完璧を期待しない：**

1. まず基本機能を生成
2. テストと検証
3. 改善フィードバックを提供
4. 徐々に改善

### 4. コードレビュー

**生成されたコードは必ずレビュー：**

* 論理的な正確性を確認
* セキュリティを検証
* エッジケースをテスト
* プロジェクト標準への準拠を確認

### 5. 会話の連続性を維持

**コンテキストの連続性を活用：**

```
ラウンド 1：ユーザーモデルを作成
ラウンド 2：作成したモデルに基づいて CRUD エンドポイントを作成
ラウンド 3：これらのエンドポイントに権限検証を追加
```

## サポート＆ヘルプ

問題が発生した場合：

* 📚 [APIMart ドキュメント](https://docs.apimart.ai)
* 📚 [Cline 公式ドキュメント](https://github.com/clinebot/cline)
* 💬 [Discord コミュニティ](https://discord.gg/V8zqssyZ5c)
* 🐦 [Twitter @APIMart\_](https://x.com/APIMart_)
* 📧 技術サポート：[zhihong@apimart.ai](mailto:zhihong@apimart.ai)

## ビデオチュートリアル

<Note>
  **近日公開：** Cline + APIMart のさまざまなユースケースとベストプラクティスをカバーする詳細なビデオチュートリアルを作成中です。
</Note>

***

<Card title="APIMart を始める" icon="rocket" href="https://apimart.ai">
  今すぐ APIMart に登録して API キーを取得し、VSCode で AI 支援開発を体験しましょう！
</Card>