VSCodeとGitHub Copilotの正しい使い方｜AI補完でつまずかないための実例＆Q&A集

はじめに – VSCodeとAIの連携で得られる未来とは？

このセクションで分かること： なぜ今AI×VSCodeが注目されているのか、その背景と活用のメリットを簡潔に紹介。

AI支援ツールがコーディング現場に急速に浸透しています。特にVisual Studio Code（VSCode）との連携は、実務開発者にとって最も手軽かつ効果的な選択肢です。

「よく似た処理を何度も書いている」
「あと少しで完成するコードが浮かばない」
「社内レビューでよく指摘される内容が自動で直せたら…」

こうした“現場のモヤモヤ”に、AI補完が驚くほどスムーズに応えてくれるようになりました。

この記事では、GitHub Copilotを中心に、VSCode上でAIと共に開発を進める方法を、失敗しない手順・コード例・活用のコツを交えて解説します。

VSCodeで使える代表的なAI拡張機能【2025年最新版】

このセクションで分かること： どのAI拡張機能があるか、何ができるかを知ることで、自分に合った選択肢を選べる。

GitHub Copilot
最も普及しているAI補完ツール。自然なコード補完やコメントからのコード生成が可能。GitHubとの連携が前提。
Amazon CodeWhisperer
AWSユーザーに最適。セキュリティチェックやクラウドコード生成に強み。
Continue
ChatGPTをVSCode内で扱える。プロンプトベースでコード編集を支援。
ChatGPT – Code Interpreter
Python環境が整っていれば、簡単な計算やコード検証も対応。

それぞれ得意分野が異なりますが、日常的な補完とリファクタに強いのはGitHub Copilotです。

GitHub Copilotの導入方法と基本設定

このセクションで分かること： 「どうインストールすればいいの？」という導入の壁を丁寧に解消。

ステップ 1：拡張機能から「GitHub Copilot」を検索

VSCode 左メニューの「拡張機能」アイコンをクリック
「GitHub Copilot」と入力し、インストール

ステップ 2：GitHub アカウントと連携

GitHub にログインしていない場合、認証画面が表示されます
利用には有償プランの加入が必要ですが、企業アカウントによっては提供済みのケースもあります

ステップ 3：設定の確認

推奨設定：「Editor: Inline Suggest Enabled」をON
「Tab」で補完を確定する形式が基本です

補足：動かない場合の対処

Ctrl + Shift + P → Copilot: Sign in を再実行
ネットワーク制限のある会社PCではプロキシ設定の確認も必要です

CopilotでAI補完を使ってみよう【実例付き】

このセクションで分かること： 補完の仕組みと使いどころを体感的に理解できる

以下はTypeScriptの具体例です：

// 配列の重複を取り除く関数
function removeDuplicates(arr: number[]): number[] {
  // Copilotが提案するコードをそのまま活用できます
  return [...new Set(arr)];
}

補完が効きやすい書き方のコツ

関数名とコメントを先に書く
- AIは文脈や自然言語コメントをもとに提案を生成します
短く具体的な説明を心がける
- // メールアドレスのバリデーションのように具体化することで精度UP

AIを活用したコードレビュー・リファクタの可能性

このセクションで分かること： 単なる補完ではない、AIによるサポートの拡張領域を知る

// before: ループでユニークな要素を抽出
const unique = [];
for (let i = 0; i < arr.length; i++) {
  if (!unique.includes(arr[i])) {
    unique.push(arr[i]);
  }
}

// after: Copilot提案による改善
const unique = [...new Set(arr)];

このように、“もっとスマートに書ける方法”を提案してくれるのがCopilotの真価です。

VSCodeには、AIレビューを実行する以下のような拡張機能もあります：