VS Codeのコードアシスト環境を、完全ローカル(オフライン)かつ無料で構築した備忘録です。
今回は、新しくなったVS Code拡張機能「Continue」と、Ollamaで動く軽量・高性能モデル「Gemma 3」を連携させます。
最新バージョンのContinueは設定ファイルがJSONからYAML形式に変更されているため、ピンポイントで設定を書き換えるだけで動作させる手順をまとめました。
前提環境
- VS Code(拡張機能「Continue」インストール済み)
- Ollamaがバックグラウンドで起動していること
- 使用モデル:
gemma3:4b-it-q4_K_M-
ollama listで確認した正確なモデル名を使用
-
設定手順:config.yamlのピンポイント変更
Continueのチャット画面上部にある Main Config のドロップダウン(または歯車マーク)から config.yaml を開きます。
元ファイルにある Llama 3.1 8B などのデフォルト設定を、以下のように手元のGemma 3のモデル名へ変更します。
name: Main Config
version: 1.0.0
schema: v1
models:
- name: Gemma 3 4B
provider: ollama
model: gemma3:4b-it-q4_K_M
roles:
- chat
- edit
- apply
- name: Qwen2.5-Coder 1.5B
provider: ollama
model: qwen2.5-coder:1.5b-base
roles:
- autocomplete
- name: Nomic Embed
provider: ollama
model: nomic-embed-text:latest
roles:
- embed
変更後はファイルを保存(Ctrl + S)し、VS Codeを一度再起動します。
快適にローカルAIにコードアシストしてもらうコツ
軽量な4Bモデル(Gemma 3)などでコードレビューやセキュリティチェックを依頼する場合、単に
このコードの懸念点は?
のように質問すると、安全フィルター(ガードレール)が過剰反応し、定型文で拒絶されることがあります。
そこで、以下の2点を意識すると精度が向上します。
1. コンテキスト(コード)を明示して渡す
レビューしたいコード範囲をマウスで選択し、Ctrl + L を押してContinueのチャット欄へ取り込みます。
コードを実際に渡すことで、モデルが文脈を理解しやすくなります。
2. プロンプトを開発者目線にする
例えば、
- 「このコードの脆弱性をレビューして」
- 「セキュリティの観点からリファクタリングできるポイントを教えて」
- 「保守性を向上できる箇所を指摘して」
のように、開発上の相談であることを明示すると、ロジックをしっかり読み解いた回答を得やすくなります。
普通のAIチャットとしても使える
もちろん、コードに関係のない一般的な質問や雑談を投げる「普通のAIチャット」としても、そのままエディタ横でサクサク動きます。
クラウドサービスに依存せず、完全ローカルで動作するため、
- オフラインでも利用可能
- ソースコードを外部に送信しない
- 利用回数制限なし
- 無料
というメリットがあります。
PCのスペックに余裕がある方は、ぜひ完全ローカルな開発アシスタント環境を試してみてください。
AIに「電卓アプリを作って」と頼んでみる
試しに、Continueのチャットに
html+jsで電卓アプリを作って下さい。
と入力してみます。
すると、以下のようなHTML + JavaScriptのコードを生成してくれました。
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
body {
font-family: sans-serif;
text-align: center;
}
#display {
width: 200px;
margin: 20px auto;
padding: 10px;
font-size: 24px;
border: 1px solid #ccc;
text-align: right;
}
button {
width: 50px;
height: 50px;
margin: 5px;
font-size: 16px;
border-radius: 50%;
border: none;
background-color: #eee;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Calculator</h1>
<div id="display">0</div>
<button onclick="appendDisplay('7')">7</button>
<button onclick="appendDisplay('8')">8</button>
<button onclick="appendDisplay('9')">9</button>
<button onclick="appendDisplay('4')">4</button>
<button onclick="appendDisplay('5')">5</button>
<button onclick="appendDisplay('6')">6</button>
<button onclick="appendDisplay('1')">1</button>
<button onclick="appendDisplay('2')">2</button>
<button onclick="appendDisplay('3')">3</button>
<button onclick="appendDisplay('+')">+</button>
<button onclick="appendDisplay('-')">-</button>
<button onclick="appendDisplay('*')">*</button>
<button onclick="appendDisplay('/')">/</button>
<button onclick="calculate()">=</button>
<button onclick="clearDisplay()">C</button>
<script>
let displayValue = '0';
function appendDisplay(value) {
if (displayValue === '0') {
displayValue = value;
} else {
displayValue += value;
}
document.getElementById('display').textContent = displayValue;
}
function clearDisplay() {
displayValue = '0';
document.getElementById('display').textContent = '0';
}
function calculate() {
try {
const result = eval(displayValue);
displayValue = result.toString();
document.getElementById('display').textContent = displayValue;
} catch (error) {
displayValue = 'Error';
document.getElementById('display').textContent = displayValue;
}
}
</script>
</body>
</html>
コードはシンプルですが、
- HTMLで画面を構成
- CSSでボタンの見た目を整える
- JavaScriptで入力と計算処理を実装
という基本的な役割分担ができています。
また、ローカルLLMなので、気軽に
- 「0ボタンを追加して」
- 「小数点を入力できるようにして」
- 「ボタンを4×4のグリッドに並べて」
- 「ダークモードにして」
- 「evalを使わない実装に書き換えて」
といった追加指示を出しながら、対話形式で少しずつ改善していくこともできます。
数十行~数百行程度の小規模なプログラムであれば、完全ローカル環境でも十分実用的にコード生成やリファクタリングを行えることを確認できました。
Gemma 3を導入すると自作LLMアプリとも連携できる
gemma3:4b-it-q4_K_M をOllamaへ導入している場合、Continueだけでなく、私が開発しているローカルLLM連携アプリ群でも利用できます。
SAGBI AGI
自然言語による対話や実験的なAIエージェント機能を提供するアプリです。
Plower RAG
ローカルLLMとRAG(Retrieval-Augmented Generation)を組み合わせた文書検索・知識活用向けアプリです。
G1:M
UnityやAR、業務支援を視野に入れた実験的なAIエージェントプロジェクトです。
設定方法
各アプリのセットアップ手順や設定方法については、GitHubのREADMEを参照してください。
基本的には、
- Ollamaをインストール
- Gemma 3を取得
- Ollama APIを起動
- 各アプリからローカルAPIへ接続
という流れで利用できます。
Continueによるコード生成だけでなく、
- ローカルRAG
- エージェント実験
- 業務支援AI
- Unity連携
など、同じローカルLLM環境を複数の用途で使い回せるのが大きなメリットです。
クラウドAPIの利用料金を気にせず、完全ローカル環境でAIアプリケーションを試したい方は参考にしてみてください。