1
3

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 + GitHub Copilotで始めるAI開発環境 ── インストールから最初のコード補完まで

1
Posted at

GitHubアカウントを作って、Student Developer Packも申請した。GitHub Copilotが使えるらしい——でもVS Codeをどう入れて、どこを触ればAIの補完が動くのか。調べると情報が散らばっていて、何から手をつければいいかわかりません。

この記事では、VS Codeのインストールから初期設定、GitHub Copilotの有効化、そして実際にAIのコード補完を体験するところまでを一本道で案内します。上から順に進めれば、30分後にはCopilotがコードを提案してくれる環境が手に入ります。

この記事のゴールと前提

30分後の状態

この記事を終えると、以下の3つをVS Code上で体験した状態になります。

  1. コード補完(Tab) — AIがコードの続きを提案し、Tabで採用する
  2. Copilot Chat — サイドバーでコードの説明や修正を相談する
  3. Agent Mode — 指示を出すとCopilotが自律的にファイルを作成・編集する

前提条件の確認

前提 状態 まだの場合
macOS環境 Intel / Apple Silicon どちらもOK
GitHubアカウント 作成済み macOSでGitHubを始める完全ガイド を参照
Homebrew インストール済み 同上
GitHub Student Pack 承認済み(推奨) 学生がAI開発環境を無料で揃える方法 を参照

Student Packがなくても、この記事の手順はすべて進められます。GitHub Copilot Freeプラン(月2,000回のコード補完 + 月50回のChat)が自動で適用されます。

VS Codeをインストールする

Homebrewでインストールする

ターミナルを開いて、以下のコマンドを実行します。

brew install --cask visual-studio-code

インストールが完了したら、バージョンを確認します。

code --version

バージョン番号が表示されれば成功です。code コマンドが見つからない場合は、ターミナルを一度閉じて開き直してください。

code コマンドを使うと、ターミナルからVS Codeを起動できます。たとえば code . と打つと、現在のディレクトリをVS Codeで開けます。この操作は開発中に頻繁に使います。

初回起動時の画面構成

VS Codeを起動すると、Welcome タブが表示されます。これは閉じて構いません。画面は主に4つのエリアで構成されています。

エリア 位置 役割
サイドバー ファイルツリー、検索、拡張機能、ソース管理
エディタ 中央 コードを書く場所
ステータスバー 下端 言語モード、Copilotアイコン、ブランチ名
ターミナルパネル 下部 統合ターミナル(Ctrl+` で開閉)

この後の手順で「ステータスバー」「コマンドパレット」という言葉が出てきます。ステータスバーは画面の一番下の帯、コマンドパレットは Cmd+Shift+P で開くコマンド入力欄です。

VS Codeを日本語化して基本設定を整える

Japanese Language Packで日本語化する

VS Codeのメニューやダイアログを日本語にします。

  1. Cmd+Shift+P でコマンドパレットを開く
  2. Configure Display Language と入力して選択
  3. 一覧から 日本語 を選択
  4. VS Codeが再起動され、メニューが日本語に変わる

日本語が一覧に表示されない場合は、拡張機能サイドバー(Cmd+Shift+X)で「Japanese Language Pack」を検索してインストールしてください。インストール後、再度 Configure Display Language を実行します。

初心者向けの推奨設定3つ

Cmd+,(カンマ)で設定画面を開きます。上部の検索バーに設定名を入力すると、該当の項目が表示されます。

設定名 効果
editor.formatOnSave チェックON 保存時にコードが自動整形される
files.autoSave afterDelay 一定時間後に自動保存される
editor.minimap.enabled チェックOFF ミニマップを非表示にして画面を広く使える

3つとも必須ではありませんが、設定しておくと快適です。特に files.autoSave は保存し忘れによるトラブルを防げます。

GitHub Copilotを有効化する

VS CodeからCopilotをセットアップする

最新のVS Codeには、ステータスバーからCopilotをセットアップする仕組みが用意されています。マーケットプレイスで拡張機能を検索してインストールする必要はありません。

古い記事やチュートリアルでは「GitHub Copilot拡張機能をインストール」という手順が書かれていることがあります。2026年4月現在、VS Codeを最新版にしていれば、ステータスバーのアイコンからセットアップを開始できます。

ステータスバーの右側にCopilotのアイコン(✨のようなスパークルマーク)が表示されていることを確認してください。表示されていない場合は、VS Codeのバージョンが古い可能性があります。brew upgrade visual-studio-code で更新してください。

GitHubアカウントでサインインする

Copilotを使うには、GitHubアカウントとの連携が必要です。

  1. ステータスバーのCopilotアイコンをクリック
  2. Set up Copilot」を選択(バージョンによっては「Use AI Features」と表示される場合もあります)
  3. ブラウザが開き、GitHubの認証画面が表示される
  4. GitHubの画面でVS Codeへのアクセスを許可する
  5. VS Codeに戻り、ステータスバーのCopilotアイコンがアクティブ状態に変わる

GitHub Student Packを申請済みであれば、自動的にCopilot Studentプラン(Pro相当)が適用されます。未申請の場合はCopilot Freeプランが適用されます。

有効化の確認方法

Copilotが正しく有効化されたかを確認します。

ステータスバーのCopilotアイコンにマウスカーソルを合わせてください。現在のプラン(Student / Free)と利用状況が表示されます。

より詳しい情報(残りのプレミアムリクエスト数など)は、GitHubの Copilot設定ページ で確認できます。

コード補完を体験する ── 最初の「Tab」

テスト用のファイルを作る

ここからは、実際にCopilotの補完を試します。テスト用のPythonファイルを作成します。

  1. Cmd+N で新しいファイルを作成
  2. Cmd+Shello.py として保存(場所はデスクトップでもどこでもOK)

Pythonを選んだ理由は、Copilotの補完効果がわかりやすいことと、セットアップが簡単なことです。

事前にターミナルで python3 --version を実行して、バージョンが表示されることを確認してください。表示されない場合は brew install python でインストールできます。また、VS Codeのステータスバー右下に「Python」と表示されていることも確認してください。「プレーンテキスト」になっている場合は、ファイル名が .py で終わっているか確認してください。

コメントを書いてTabを押す

以下のコメントを入力して、Enterで次の行に移動します。

hello.py
# 1から10までの合計を計算する関数

次の行にカーソルが移ると、薄いグレーのテキストが表示されます。これがCopilotのゴーストテキスト——AIが提案するコードです。

hello.py
# 1から10までの合計を計算する関数
def sum_1_to_10():        # ← このような提案が薄いグレーで表示される
    return sum(range(1, 11))
操作 キー 説明
提案を採用 Tab ゴーストテキストがそのまま確定される
提案を却下 Esc ゴーストテキストが消える
次の候補 Option+] 別の提案に切り替える
前の候補 Option+[ 前の提案に戻る

Tab を押すと、提案がそのまま確定されます。これが最初のコード補完です。コメントに書いた意図をCopilotが読み取り、関数を生成してくれます。

続けて、関数の下に以下を入力してみます。

hello.py
# 結果を表示する

Copilotが print(sum_1_to_10()) のような呼び出しコードを提案するはずです。Tabで採用したら、ターミナルで実行して結果を確認してみます。

python3 hello.py

55 と表示されれば成功です。コメントで意図を伝え、Tabで採用し、実行して確認する——この繰り返しがCopilotの基本的な使い方です。

Copilotがコメントからコードを生成できるのは、エディタで開いているファイルの内容やコメントをコンテキストとしてAIモデルに送信しているためです。コメントが具体的であるほど、AIが意図を正確に汲み取れます。

補完が出ないときの確認ポイント

ゴーストテキストが表示されない場合は、以下を順に確認してください。

  1. ステータスバーのCopilotアイコンがアクティブ状態か
  2. ファイルの言語モードが「Python」になっているか(ステータスバー右下)
  3. コメントの末尾でEnterを押して、カーソルが次の行にあるか
  4. コメントの内容が具体的か(「関数を書く」より「1から10までの合計を計算する関数」の方が提案精度が高い)

Copilot Chatに質問する

サイドバーのChatパネルを開く

コード補完の次は、Copilot Chatを試します。Chatはコードについて自然言語で質問できる機能です。

Ctrl+Cmd+I でChatパネルが開きます。先ほどの hello.py を開いた状態で試してください。

コードの説明を聞いてみる

Chatの入力欄に、以下のように入力してみます。

この関数を説明して

Copilotが hello.py のコードを読み取り、関数の動作を日本語で説明してくれます。

もう1つ試してみます。

このコードをテストする関数を書いて

Copilotがテストコードを生成し、「Apply」ボタンが表示されます。このボタンをクリックすると、提案されたコードがエディタに直接挿入されます。

Chatでは、コードの説明・修正案・リファクタリング・テスト生成など、幅広い相談ができます。「何を聞いていいかわからない」ときは、まず「このコードの改善点を教えて」と聞いてみるのがおすすめです。

インラインチャットで部分的に指示する

Chatパネルを開かずに、エディタ上で直接Copilotに指示を出す方法もあります。

  1. 修正したいコードを選択する
  2. Cmd+I でインラインチャットが開く
  3. 指示を入力する(例:「docstringを追加して」)
  4. 提案が表示される → Accept で採用、Discard で却下

インラインチャットは、ピンポイントな修正に向いています。エディタから視線を動かさずに修正を完結できるのが利点です。

Agent Modeでファイル生成を試す

Agent Modeに切り替える

ここまではCopilotが「提案」して、自分が「採否を判断」する形でした。Agent Modeでは、Copilotがさらに一歩踏み込んで自律的にファイル作成・編集・ターミナル実行を行います。

Chatパネル上部のモード切替ドロップダウンを確認します。

モード 動作
Ask 質問に回答するだけ(ファイル変更なし)
Edit 指定ファイルをインライン編集する(ターミナル実行やファイル新規作成は行わない)
Agent ファイル作成・編集・ターミナル実行を自律的に行う

ドロップダウンから「Agent」を選択してください。

簡単なプロジェクトを生成してみる

Agent Modeで以下のように入力してみます。

Pythonで簡単なじゃんけんゲームを作って。
ユーザーがグー・チョキ・パーを入力し、コンピュータとの勝負結果を表示する。

Copilotが以下のような動作を自動で行います。

  1. ファイル(例: janken.py)を新規作成
  2. コードを生成して書き込み
  3. 必要に応じてターミナルで動作確認を実行

ターミナルコマンドの実行時には許可を求めるダイアログが表示されます。内容を確認して「Allow」を選択してください。

Agent Modeが生成したコードやコマンドは、必ず目を通してから実行してください。AIの出力をそのまま信用せず、「何をしているか理解してから進める」習慣をつけることが大切です。

生成が完了したら、ターミナルパネル(Ctrl+`)を開いて動かしてみます。

python3 janken.py

ここまでで、Copilotの3つの使い方を一通り体験できました。

  • コード補完: コメント1行から関数を生成
  • Chat: 自然言語でコードの説明や修正を相談
  • Agent Mode: プロジェクトごとファイルを生成

Agent Modeを使うときの注意点

Agent Modeは強力ですが、使い方にコツがあります。

  • プレミアムリクエストを消費します。1回のメッセージ送信につき1リクエスト消費です。詳しくは次のセクションで説明します
  • 指示は具体的に書くほど精度が上がります。「Webアプリを作って」より「Flaskで、名前を入力するとあいさつを返すWebアプリを作って」の方が良い結果になります
  • 学習目的ならAskモードが効率的な場合もあります。コードの意味を理解したいときは、Agentで自動生成するよりAskで説明を聞く方が学びになります

プレミアムリクエストの仕組みを知る

月間の利用枠を把握する

GitHub Copilotには、プランごとに月間の利用枠が設定されています。

プラン インライン補完(Tab) プレミアムリクエスト(Chat等)
Copilot Student 無制限 月300回
Copilot Free 月2,000回 月50回

利用枠は毎月リセットされます(有料プランは1日UTC基準、Freeプランはアクティベーション日基準)。

2026年3月以降、Studentプランではプレミアムモデル(Claude Opus、GPT-5.4など)の手動選択が制限されています。ただし、モデル選択を「Auto」にしておけば、Copilotが状況に応じてこれらのモデルを自動的に使ってくれるため、実用上の影響はありません。

何がプレミアムリクエストを消費するか

すべてのCopilot操作が同じように消費されるわけではありません。

操作 消費 備考
インライン補完(Tab) 補完枠を消費 プレミアムリクエストとは別カウント
Chatメッセージ 1回消費 モデルによって倍率あり
Agent Modeメッセージ 1回消費 同上
インラインチャット(Cmd+I) 1回消費 Chatと同じ枠

モデルによって消費倍率が異なります(例: Claude Opusは3倍消費)。前述のとおり「Auto」設定にしておけば、倍率を意識する必要はありません。

月末に枠を使い切らないコツ

月300回(Student)は余裕がありそうに見えますが、Agent Modeを多用すると思ったより早く消費します。以下のように使い分けると長持ちします。

  • コードの続きを書いてほしい → インライン補完(Tab)で対応。プレミアムリクエストを消費しません
  • コードの意味を知りたい → Chatで質問(1リクエスト消費)
  • 複数ファイルを一気に作りたい → Agent Mode(1メッセージ1リクエスト消費)
  • 残り回数の確認 → ステータスバーのCopilotアイコンをホバー、またはGitHub Settings → Copilot

まずはインライン補完を中心に使い、ChatやAgent Modeは「調べても解決しない」場面で頼るようにすると、月末に枠が足りなくなることはありません。

困ったときの対処法

よくあるトラブルと解決策

症状 原因 対処
Copilotアイコンが表示されない VS Codeのバージョンが古い brew upgrade visual-studio-code で更新
コード補完が出ない Copilotが無効 or 言語未対応 ステータスバーでCopilot状態と言語モードを確認
認証でエラーになる トークン期限切れ コマンドパレット →「GitHub Copilot: Sign Out」→ 再サインイン
Chatが応答しない プレミアムリクエスト枠超過 月初のリセットを待つ、または残り枠を確認
Agent Modeが選択できない VS Codeのバージョンが古い VS Codeを最新版に更新
補完が的外れ コンテキスト不足 コメントを具体的に書く、関連ファイルを開いておく

公式ドキュメントの参照先

困ったときは、以下の公式ドキュメントが最も正確です。

まとめ

この記事では、VS Codeのインストールから GitHub Copilotの有効化、そしてコード補完・Chat・Agent Modeの体験までを一本道で進めました。

完了した内容を振り返ります。

ステップ 内容
VS Codeインストール brew install --cask visual-studio-code
日本語化 Japanese Language Pack
Copilot有効化 GitHubアカウントでサインイン
コード補完 コメント → Tab で採用
Chat Ctrl+Cmd+I で質問・相談
Agent Mode 自律的にファイル生成

次のステップ

Copilotの基本操作を覚えたら、日常の学習に取り入れてみてください。

  • エラーメッセージをChatに貼る — 「このエラーの原因と対処法を教えて」と聞くだけで、デバッグの手がかりが得られます
  • Agent Modeで小さなプロジェクトを作る — 「電卓アプリ」「天気取得スクリプト」など、小さなテーマで試すと使い勝手がわかります
  • Cursorも試してみる — Student Packで1年無料です。VS Codeのフォークなので操作感はほぼ同じで、追加のAI機能が使えます
1
3
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
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?