0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

VS CodeのContinueを使ってローカルAIエージェントでコードアシストしてみた

0
Last updated at Posted at 2026-06-24

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を参照してください。

基本的には、

  1. Ollamaをインストール
  2. Gemma 3を取得
  3. Ollama APIを起動
  4. 各アプリからローカルAPIへ接続

という流れで利用できます。

Continueによるコード生成だけでなく、

  • ローカルRAG
  • エージェント実験
  • 業務支援AI
  • Unity連携

など、同じローカルLLM環境を複数の用途で使い回せるのが大きなメリットです。

クラウドAPIの利用料金を気にせず、完全ローカル環境でAIアプリケーションを試したい方は参考にしてみてください。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?