Go to Qiita Advent Calendar Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day 16

Microsoft Azure Tech Advent Calendar 2025

@tbuchi888inMicrosoft

VS Code + Azure OpenAI で始める、GitHub Copilot ライクな Chat ベース開発環境構築

Posted at

学習・検証目的で GitHub Copilot が使えない環境でも、GitHub Copilot ライクな Chat ベース開発環境を構築したい。と思ったことはありませんか？

GitHub Copilot は高度な AI コーディング支援ツールで、コードの自動補完やチャットによる質問回答を驚くほどスムーズにこなします。しかし、諸般の事情により使えないケースもあります。

こうした環境での代替手段の1つとして、Azure OpenAI Service と オープンソースの VS Code 拡張 Cline を組み合わせる方法があります。

Azure OpenAI は Microsoft Azure 上で GPT-4/5 等といったモデルを利用できるサービスで、自身や自社テナント内で AI をホストできます。一方、Clineは VS Code 上で動作するオープンソースの AI コーディングアシスタント拡張で、ChatGPT のようなチャット形式でコード生成や編集を支援してくれます。

本記事では、学習・検証目的で 「VS Code + Cline（無償版OSS） + Azure OpenAI」でGitHub Copilotに近いチャットベースのコーディング環境 を構築する方法を解説します。

本記事は筆者個人の見解であり、所属組織の公式見解ではありません。
本記事の内容は 2025/12/13時点での情報に基づいています。
また、Clineの無償版オープンソースの利用については、コミュニティサポートとなります。

重要な注意事項
本記事は筆者個人の技術検証結果であり、以下の点にご注意ください。:

  • 本記事は技術的な学習・検証目的での構成例です。
  • Microsoft公式の見解や推奨ではありません。
  • 本番環境での利用前に、組織のセキュリティポリシーに照らした十分な評価が必要です。
  • GitHub Copilotが利用可能な環境では、GitHub Copilotの利用を第一に検討してください。

全体構成図: VS Code 拡張と Azure OpenAI、MCP サーバーの関係

構成は、以下 Mermaid 図の通りです。VS Code 上の Cline 拡張が Azure OpenAI および MCP サーバー とどう連携するかを表しています。

  • VS Code エディタ内で、開発者は Cline のチャット UIに対し自然言語で指示や質問を送る
  • Cline 拡張は Azure OpenAI の GPT モデルに API 経由でリクエストを送り、コード提案や回答を受け取る
  • 必要に応じて、Cline は MCP サーバーを介しローカル環境でコマンド実行やブラウザアクセスなどエディタ外の操作も行う（MCP: Model-Context Protocol）
  • AI から得た回答はチャット UI に表示され、ユーザーが承認するとエディタ内のファイルにコードが反映される

VS Code 上で Azure の強力な AI モデルを活用し、チャット形式でコーディング支援を受けることか可能です。次章以降で、この環境の具体的な構築方法を説明します。

前提条件

環境構築にあたり、以下の準備が必要です。

  • Visual Studio Code（最新版を推奨）
  • Azure OpenAI Service を利用できる Azure サブスクリプション
    • Azure OpenAI GPT-4/5 などのモデルが デプロイ可能
    • Azure OpenAI の エンドポイント URL と API キー 認証によるアクセス（注意を参照）
  • Cline 拡張（VS Code Marketplace からインストール可能）

補足: Cline は VS Code 向けのオープンソース AI エージェント拡張です。OpenAI の API キー（または互換 API）をユーザー自身で用意する必要があり、今回は Azure OpenAI のキーを使用します。データは Azure 内で処理されるため、機密コードを外部 SaaS 等に持ち出さずに AI 支援を受けることができます。

注意: 本記事では学習・検証目的のため、Cline から Azure OpenAIへの認証について　API Key を利用しています。本番環境などで利用する場合は、Azure OpenAI について Private End Point など を利用したネットワークの閉域化構成でのアクセスはもちろんのこと、Managed ID認証や、API Managementを利用するなど、自身や自社の規則に合わせて十分なセキュリティの検討を行なってください。

セットアップ手順

それでは、VS Code + Cline + Azure OpenAI 環境を構築していきます。
大まかに「Azure 側の設定」と「VS Code 側の設定」に分けて説明します。

1. Azure OpenAI リソースの作成とモデルデプロイ (Azure CLI)

Azure 側の準備として、Azure OpenAI のリソースとモデルを用意します。Azure ポータル上で GUI 操作しても良いですが、ここでは再現性のため Azure CLI を用いた手順を記載します。

(1) リソースグループおよび OpenAI リソースの作成

# Azure CLI でログイン（ブラウザ認証が開きます）
az login

# (必要に応じて) OpenAI サービスのプロバイダー登録
az provider register -n Microsoft.CognitiveServices

# リソースグループの作成
RG_NAME="rg-my-aoai"
LOCATION="eastus2"
az group create --name $RG_NAME --location $LOCATION

# Azure OpenAI リソースの作成
OPENAI_NAME="my-aoai01"
az cognitiveservices account create \
  --name $OPENAI_NAME \
  --resource-group $RG_NAME \
  --location $LOCATION \
  --kind OpenAI \
  --sku S0 \
  --custom-domain $OPENAI_NAME

(2) モデルのデプロイ
作成した Azure OpenAI リソースに、利用するモデル（例: gpt-4.1 や gpt-5-chat）をデプロイします。
--sku-capacityについては、ご自身の環境により適切な値を入れてください。

# 利用可能なモデル一覧を確認
az cognitiveservices account list-models -g $RG_NAME -n $OPENAI_NAME -o table 

# gpt-5-mini モデルをデプロイ (名称やバージョンは上の結果を参照して調整)
DEPLOYMENT_NAME="gpt-4.1"
MODEL_NAME="gpt-4.1" 
MODEL_VERSION="2025-04-14"
az cognitiveservices account deployment create -g $RG_NAME -n $OPENAI_NAME \
    --deployment-name $DEPLOYMENT_NAME \
    --model-name $MODEL_NAME --model-version $MODEL_VERSION \
    --model-format OpenAI --sku-name "GlobalStandard" \
    --sku-capacity 50

注意: Azure OpenAI の利用には審査や承認が必要な場合があります。また、GPT-4/5 などの高性能モデルは一部リージョン限定や使用枠制限があります。ご自身の環境で利用可能なモデルを選択してください。
また、一部の新しいモデルなどでは Cline 側が対応しておらず利用できないことがありますのでご注意ください。

(3) エンドポイント URL と API キーの取得
Azure Portal へログインし、作成した Azure OpenAI リソースの名前で検索します。

image.png

画面下のExplore Foundry portalをクリックして Foundry portal へ移動します。
image.png

左メニューから 共有リソース-デプロイをクリックして、先ほど作成したモデルを表示します。
image.png

表示されたモデル名（今回はgpt-4.1）をクリックし、エンドポイントから
ターゲットURLおよびキーをクリックしてコピーアイコンより取得しメモしておきます。
image.png

また、「1. API キーを使用した認証」から、api_version="2024-12-01-preview"の値をメモしておきます。
image.png

これらの値は VS Code 拡張の設定で使用します。
以上で Azure 側の準備は完了です。

注意: 高額請求となるリスクもありますので、キー情報の取り扱いには十分にご注意ください。

2. VS Code 拡張「Cline」のインストールと Azure 接続設定

次に、ローカル PC の VS Code にて Cline 拡張の導入と設定 を行います。

(1) Cline 拡張をインストール
VS Code の拡張機能パネルで「Cline」を検索し、インストールします。
image.png

インストール後、左のサイドバーに Cline のアイコンが表示されます。今回は Azure OpenAI を利用するのでBring my own API keyを選択し、Continueをクリックします。

image.png

(2) Azure OpenAI への接続設定
続いて Cline 拡張に Azure OpenAI を使わせるための設定を行います。
以下を入力してContinueで利用開始します。

  • API Provider: "OpenAI Compatible"
  • Base URL: 手順 1 で取得したエンドポイント URL
  • OpenAI Compatible API Key: 手順 1 で取得した API キー
  • Model ID: デプロイ名（例: "gpt4.1"）
  • Set Azure API version: チェックし、手順 1 で取得したAPI Vesion(例: 2024-12-01-preview)

image.png

正常に接続できているか、動作を確認します。
チャットボックスに「こんにちは」など適当なメッセージを入力して送信し、AI からレスポンスが返ってくれば接続成功です。

image.png

image.png

補足: Cline は OpenAI 社の公式 API キー (api.openai.com) も使用できますが、本記事では provider を OpenAI Compatible に設定することで Azure OpenAI を利用しています。これにより、AI 呼び出しがすべて 自身や自社の Azure 環境内で完結し、データが外部に出ないようにすることができます。

3. MCP サーバーの設定と起動（任意）

MCP (Model-Context Protocol) を設定すると、AI エージェントがエディタ外の操作（ターミナルコマンド実行やウェブ閲覧など）も行えるようになります。必須ではありませんが、Cline の高度な機能を試す場合に有効化を検討してください。

MCP サーバー設定手順:

Manage MCP Serversタブをクリック
image.png

設定アイコンをクリック
image.png

Marketplaceタブからインストールする MCP Server を選択可能です。
image.png

また、Remote Serversタブをクリックし、URLから追加することも可能です。
image.png

以下は、Remote Serversとして、Microsoft Learn MCP Serverを設定後の例となります。
image.png

注意: 外部の MCP Server を設定した場合、MCP Server へのリクエストにより、AIとのやり取りの情報が外部へ流れてしまうリスクがありますので設定の際はご注意ください。

実践: チャットで AI コーディング支援を使ってみる

準備が整ったら、実際に チャットベースのコーディング支援 を試します。例として、簡単な React の ToDo リストアプリを AI 支援により作成します。

チャット指示の例: React で ToDo リストアプリを作成

  1. Cline チャットを開く: VS Code のサイドバーにある Cline のアイコンをクリックし、チャットウィンドウを表示します。
  2. 要件を入力: チャットボックスに以下のように要件を記述して送信します。
    以下は自然言語による仕様説明です。ペアプロの相手に要件を伝える感覚での箇条書きです。
    React でシンプルな ToDo リストアプリを作成してください。
    \- テキスト入力欄と追加ボタンがある
    \- ボタン押下で入力値をリストに追加
    \- リストには現在のタスクが表示される
  1. AI からの提案を確認: 数秒待つと、AI から回答が返ってきます。例として以下のような内容が表示されるはずです。
    • 新しく App.jsx と index.js を作成する提案
    • App.jsx 内に記述する React コンポーネントのコードスニペット
    • 必要に応じて「これらのファイルを作成してもいいですか？」という確認メッセージ
  2. コードの反映: AI の提案内容を確認し、良さそうであれば「Yes」や「はい」などと返信して承認します。すると、VS Code のエディタに実際にファイルが生成され、コードが挿入されます（まだ保存されていない場合、自動で保存されることもあります）。不適切な提案だと思えば「No」と返答してスキップさせたり、「～に修正してください」と指示し直すことも可能です。
  3. 追加の会話で改善: 生成されたコードを動かしたり内容を読んだりして、さらに改善したい点があればチャットで依頼します。例えば「空の時は 'タスクなし' と表示してください」と要望すれば、AI がその変更差分を提案します。確認して承認することで、コードが更新されます。

image.png

image.png

image.png

生成されたコードの例

上記の会話を経て AI が生成した App.jsx の例を見てみましょう。以下は Cline によって自動生成・編集された React コンポーネントの一例です。

// App.jsx (AI が生成した例)
import { useState } from 'react';
import './App.css';

function App() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

  const handleAdd = () => {
    if (task.trim() === '') return;
    setTasks([...tasks, task]);
    setTask('');
  };

  const handleInputKeyDown = (e) => {
    if (e.key === 'Enter') handleAdd();
  };

  return (
    <div className="App" style={{ maxWidth: 400, margin: '40px auto', textAlign: 'center' }}>
      <h1>ToDo リスト</h1>
      <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
        <input
          type="text"
          value={task}
          onChange={e => setTask(e.target.value)}
          onKeyDown={handleInputKeyDown}
          placeholder="タスクを入力"
          style={{ flex: 1, padding: 8, fontSize: 16 }}
        />
        <button onClick={handleAdd} style={{ padding: '8px 16px', fontSize: 16 }}>
          追加
        </button>
      </div>
      <ul style={{ textAlign: 'left', padding: 0, listStyle: 'none' }}>
        {tasks.map((t, i) => (
          <li key={i} style={{ padding: '8px 0', borderBottom: '1px solid #eee' }}>
            {t}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

このように、テキスト入力とボタンを備え、ボタン押下で Todo リストに項目が追加されるコンポーネントが生成されました。AI の提案は場合によって多少異なりますが、チャットで要件を伝えるだけでここまでのコードを自動生成してくれるのは非常に強力です。

さらに、チャットで会話を続けることでコードの改善もできます。例えば、上記生成後に「リストが空の時は 'タスクなし' と表示して」と依頼すれば、AI は todos.length === 0 ? 'タスクなし' : ... のような条件付き表示を追加する差分を提案するでしょう。それを承認すれば、コードに反映されます。

Copilot と操作感の違い: GitHub Copilot はエディタでコードを書いていると自動で補完候補が表示されますが、Cline はこちらからチャットでAIに話しかける形で操作します。そのため、常時表示される提案はありませんが、まとまった要件を一度に任せたり、生成コードについて説明を求めたりできる点で、より対話的なペアプログラミングに近い体験が得られます。また、AI の提案内容は即座にファイルに書き込まれず、人間が確認してから適用できるので、誤った変更が突然入り込むリスクを低減できます。

Cline拡張機能（OSS無償版） + Azure OpenAI の特徴

観点 Cline + Azure OpenAI
コスト 拡張機能は無料（OSS）。Azure OpenAI の使用料のみ（従量課金）から利用可能。
導入の手軽さ Azure リソース準備や API キー設定が必要。初期構築に手間。
エディタ統合度 チャット UI が主体。必要時に手動でプロンプト入力。インライン補完は原則なし。
AI モデル Azure 上で選択したモデルを利用（GPT-4/5 等）。自身や自社でカスタムモデルも適用可能。但し新しいモデルへの追従など遅い場合があるので、利用モデルについては注意が必要。
データ管理 企業の Azure 環境内で完結可能。Private End Point を利用したネットワークの閉域化構成にてアクセスも可能。ただし社外MCPサーバーの利用には注意が必要。
チャット UI Cline のチャット UI はシンプル。
自律的な動作 (エージェント) MCP 対応によりビルド・テスト実行やブラウザ閲覧など自動化可能。
拡張性 OSS のため拡張・改良が可能。モデルや動作を自由にカスタマイズできる。
サポート OSS の無償版の利用は開発コミュニティによるサポート（GitHub Issues や Discord）。問題があれば https://github.com/cline/cline/issues を、まずは確認。なお、有償版Clineによる有償サポートもあります。https://cline.bot/pricing

まとめ: Github Copilot は手軽さと洗練された体験や、Github との機能統合、サポートなどが魅力で、Cline + Azure OpenAI はデータ制御や、利用の仕方によってはコストが強みと言えます。
例えば「すぐにAI補完を使って生産性を上げたい」なら　Github Copilot が適していますし、コミュニティによるサポート等が許容でき、「自身の環境に合わせた AI 支援環境を構築したい」のなら Cline（OSS無償版） + Azure OpenAI がフィットするケースも出てきます。どちらが優れているというより、利用シーンや要件によって最適解が異なる形です。

なお、もちろんGithub Copilot と併用することも可能です。

参考リンク

以上、学習・検証目的での VS Code + Cline（OSS無償版）拡張機能 と Azure OpenAI による Copilot ライクな開発環境の構築方法を解説しました。オーブンソースでのコミュニティによるサポートや、各ツールの特性を理解し、ぜひ自身のプロジェクトに最適な形で AI コーディング支援を取り入れてみてください。この記事がその一助になれば幸いです。

重要な注意事項（再掲）
本記事は筆者個人の技術検証結果であり、以下の点にご注意ください。:

  • 本記事は技術的な学習・検証目的での構成例です。
  • Microsoft公式の見解や推奨ではありません。
  • 本番環境での利用前に、組織のセキュリティポリシーに照らした十分な評価が必要です。
  • GitHub Copilotが利用可能な環境では、GitHub Copilotの利用を第一に検討してください。
1
0
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
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?