
---

# VS Code 拡張機能 展開・開発手順メモ


## 1. 開発環境の準備

### 動作確認環境

* **VS Code バージョン:** 1.109.5

### セットアップ手順
配布されたソースコード（SRC）には `node_modules` ディレクトリが含まれていません。以下の手順に従って環境構築および実行を行ってください。

1. 配布されたフォルダーを展開（解凍）します。
2. 展開したフォルダーへ移動し、ターミナルで以下のコマンドを実行してプロジェクトをロードします。
```bash
code .

```


3. VS Code上のターミナル（PowerShell等）を開き、依存パッケージ（`node_modules`）を再インストールします。
```powershell
npm install

```



---

## 2. 設定ファイルの編集 (`config.json`)

ルートディレクトリにある `config.json` を開き、使用する環境に合わせて以下の項目を設定してください。

* **`apiKey`**: 利用するLLMプロバイダーのAPIキーを入力（`YOUR_API_KEY_HERE` を書き換え）
* **`baseURL`**: LLMプロバイダーのAPIエンドポイント
* *ローカルの Ollama を使用する場合の例:* `"http://localhost:11434/v1"`
* **`createCodePromptPath`**: "createCodePrompt.txt"

---
## 3.AI ASSISTANTの表示
### 💡 サイドバーに「AI ASSISTANT」が表示されない場合の対処法

環境によってアイコンが隠れている場合は、以下のいずれかの方法で表示させることができます。
1. VS Code上で **`F5`** または **`Ctrl + F5`** を押します。
2. 拡張機能がロードされた「拡張機能開発ホスト（Extension Development Host）」の新規ウィンドウが立ち上がります。
3. 新しく起動したウィンドウのサイドバー（アクティビティバー）に **「AI ASSISTANT」** のアイコンが表示されます。

* **方法1（エクスプローラーから有効化）**
左端の「エクスプローラー」のメニューを開き、一覧から **「AI 
Assistant」** にチェックを入れて有効化します。
![alt text](image-1.png)
* **方法2（コマンドパレットから起動）**
上部メニューの `View` ＞ `コマンドパレット...`（または `Ctrl + Shift + P`）を開き、**「AI Assistant」** と入力して該当するビューを選択します。
* **方法3（メニューからビューを開く）**
上部メニューの `View` ＞ `viewを開く...` を選択し、検索窓に **「AI Assistant」** と入力して対象のビューを指定します。
---
## 4. 実行・デバッグ方法

1. モデル一覧表示・選択 コマンド選択 
　　一覧が表示されない場合は、「config.json」の設定を確認してください。
2. モデル一覧に表示されたLLMを選択する

![alt text](image-5.png)

3. チャット（プログラム）を選択 コマンド選択

![alt text](image-6.png)

4. メッセージを入力し「Send」ボタンをクリックする
5. 「OpenAI」からの返事が表示されます。

![alt text](image-4.png)

※：今回使用しているLLMプロバイダーはOllamaですが、OpenAI 互換APIを使用している関係で「OpenAI」からの返事としています。

6. エディッタ画面にプログラム仕様を表示しコード化したい項目を選択し、「プログラム作成」をクリックします
　
![alt text](image-7.png)

利用するモデルにより時間が掛かる場合がありますが、新たな画面が開きプログラムが展開されます。

![alt text](image-8.png)

展開されたプログラムには、プログラム以外の記述が入る場合がありますので適時編集後ファイルを保存してください。（利用するLLMやプロンプトに依存します）

作成されたプログラムにmain関数が記述されてれば、「実行」可能です。

![alt text](image-10.png)

エラーが起きる場合は、表示されたエラーメッセージを「チャット」で問い合わせると
エラーの原因の解析や対処方法等をAIが答えてくれます。

![alt text](image-11.png)

## 5. コマンドの実装状況

現在、以下のコマンドがソースコード内に用意されています。

| コマンド名 | ステータス | 
| --- | --- | 
| **モデル一覧表示・選択** | **実装済み** |  
| **チャット** | **実装済み** ||
| **利用確認（モデル確認）** |  **実装済み**  |  
| **プログラム作成** |  **実装済み**  |  
| コードレビュー | ❌ 未実装 |
| コメント作成 | ❌ 未実装 |  
| インライン補完 | ❌ 未実装 |

---

## 95. ディレクトリ構成

プロジェクトの主要なファイルおよびフォルダー構成は以下の通りです。

### 99. ディレクトリ構成一覧

プロジェクト内のファイル・フォルダーの役割と、現在の実装ステータスの一覧です。

| 　　パス / ファイル名　　　 |  概要・役割 | ステータス / 備考 |
| --- | --- |  --- |
| **`config.json`** | LLM接続設定（APIキー、エンドポイントURLなど） | 要環境設定 |
| **`eslint.config.mjs`** | コード品質管理・構文チェック（Linter）の設定（Flat Config形式） | 開発環境用 |
| **`package-lock.json`** | インストールされたnpmパッケージの正確なバージョンを固定するファイル | 開発環境用 |
| **`package.json`** | プロジェクトのメタデータ、依存関係、VS Codeへのコマンド登録を定義 | **重要ファイル** |
| **`README.md`** |  拡張機能の概要、使い方、インストール方法などを記載する説明書 | ドキュメント |
| **`tsconfig.json`** |  TypeScriptのコンパイル設定（ターゲットやモジュールルール定義） | 開発環境用 |
| **`out/`** |  TypeScriptからコンパイル（ビルド）されたJavaScript（.js）の出力先 | 実行用成果物 |
| **`node_modules/`** |  `npm install` によってインストールされた外部ライブラリ群 | 配布時削除（要再インストール） |
| **`src/`** |  拡張機能のメインソースコードを格納 | フォルダ |
|     ├─ `extension.ts` |  拡張機能全体の起動と終了を管理 | エントリポイント |
| **`src/commands/`** |  各種機能（コマンド）の処理ロジックを格納 | フォルダ |
|     ├─ **`index.ts`** |  各コマンドをまとめて外部にエクスポートするエントリポイント | 共通管理 |
|     ├─ **`tools.ts`** |  APIクライアントや共通処理などをまとめた関数群 | 共通ユーティリティ |
|     ├─ **`modelConfirmation.ts`** |  利用確認（モデル確認）機能の実装 | **実装済み** |
|     ├─ **`listModels.ts`** |  モデル一覧表示・選択機能の実装 | **実装済み** |
|     ├─ **`chatWithProgram.ts`** |  チャット機能の実装 | **実装済み** |
|     ├─ **`createCode.ts`** |  プログラム作成機能の実装 | **実装済み** |
|     ├─ `codeReview.ts` |  コードレビュー機能の実装 | ❌ 未実装 |
|     ├─ `createComment.ts` |  コメント作成機能の実装 | ❌ 未実装 |
|     └─ `inlineCompletion.ts` |  インライン補完機能の実装 | ❌ 未実装 |


---
# ライセンス

- このプロジェクト本体のソースコードは MIT License で公開します。詳細は LICENSE を参照してください。

- 本プロジェクトが利用する外部ライブラリのライセンスについては，THIRD_PARTY_NOTICES.md を参照してください。

---
# 注意事項

- 本プロジェクトは記事用のサンプル実装です。
- 生成されたコードは，必ず内容を確認してから利用してください。
- 業務利用する場合は，利用する LLM，外部ライブラリ，モデル，配布形態に応じたライセンス確認を行ってください。
- API キーや接続情報をリポジトリへコミットしないように注意してください。
