VS CodeでGitHub Copilotを設定する方法

GitHub Copilotは、入力中にコード補完を提案するAI搭載のコーディングアシスタントで、より少ないエラーでより速くコードを書くことができます。VS Codeを使用するWebデベロッパーの方であれば、Copilotの設定はわずか数分で完了し、生産性を大幅に向上させることができます。このガイドでは、インストールプロセス、プランオプション、そして基本的な設定について説明し、AIアシスタンスを使ってすぐにコーディングを開始できるようにします。

GitHub Copilotとは何か、なぜ使用するのか？

GitHub Copilotは、GitHubとOpenAIが開発したAIペアプログラマーで、エディタ内で直接インテリジェントなコード提案を提供します。コードのコンテキストを分析し、行全体やコードブロックを提案し、数十億行のパブリックコードから学習して関連性の高い補完を提供します。

開発者がCopilotを使用する理由：

• ボイラープレートコードや反復的なパターンにかける時間を削減
• 新しいAPIやコーディングアプローチの発見を支援
• 新しい言語やフレームワークの学習を加速
• フローを維持することでコンテキストスイッチを最小限に抑制

GitHub Copilot無料プラン vs 有料プラン

インストール前に、オプションを理解しましょう：

Copilot無料プラン：

• 月間2,000回の補完と50回のチャットメッセージの制限
• GPT-4oモデルへのアクセス
• 基本的なコード提案とチャット機能
• Copilotを試したり、時々使用したりするのに最適

Copilot Individual（月額$10）：

• 無制限の補完とチャット
• 複数のAIモデル（GPT-4o、Claude 3.5 Sonnet、o1-preview、o1-mini）
• マルチファイル編集を含む高度な機能
• 30日間の無料トライアル利用可能

Copilot Business/Enterprise（月額$19-39/ユーザー）：

• Individualのすべての機能
• エンタープライズセキュリティとコンプライアンス
• 管理者コントロールと使用状況分析
• チームコラボレーション機能

VS CodeでGitHub Copilotをインストールする

ステップ1：拡張機能をインストール

1. VS Codeを開く
2. Ctrl+Shift+X（Windows/Linux）またはCmd+Shift+X（Mac）を押して拡張機能を開く
3. “GitHub Copilot”を検索
4. 公式のGitHub Copilot拡張機能でInstallをクリック

ステップ2：GitHubにサインイン

インストール後、ステータスバー（右下）にCopilotアイコンが表示されます。

1. Copilotアイコンをクリック
2. “Sign in to GitHub”を選択
3. ブラウザのプロンプトに従って認証
4. 認証後、VS Codeに戻る

Copilotサブスクリプションをお持ちでない場合、無料トライアルを開始するか、無料ティアを選択するよう促されます。

ステップ3：設定を確認

Copilotが動作していることを確認するには：

1. .js、.py、または.html拡張子の新しいファイルを作成
2. 関数やHTML構造の入力を開始
3. グレーの「ゴーストテキスト」提案を探す
4. Tabを押して提案を受け入れる

基本的な設定

テレメトリとプライバシーの管理

デフォルトでは、Copilotはテレメトリデータを収集する場合があります。プライバシー設定を管理するには：

1. VS Code設定を開く（Ctrl+,またはCmd+,）
2. “telemetry”を検索
3. 一般的なVS Codeテレメトリについてtelemetry.telemetryLevelを”off”に設定

Copilot固有の設定については：

1. “github.copilot”を検索
2. “GitHub > Copilot: Enable”を見つける
3. Copilotをグローバルに無効にするにはチェックを外すか、言語別設定を構成

ワークスペース固有の設定

機密プロジェクトでCopilotを無効にするには：

1. 拡張機能ビューを開く（Ctrl+Shift+X）
2. GitHub Copilotを見つける
3. 歯車アイコンをクリック
4. “Disable (Workspace)“を選択
5. プロンプトが表示されたらVS Codeをリロード

提案動作のカスタマイズ

設定で”github.copilot”を検索して調整：

• Inline Suggest：自動提案の有効/無効
• Editor > Enable Auto Completions：提案が表示されるタイミングを制御
• Enable：特定の言語のみでCopilotを設定

GitHub Copilotの効果的な使用

基本的なコード補完

入力時に、Copilotはグレーのテキストでコードを提案します。主要なショートカット：

• Tab：提案を受け入れる
• Esc：提案を却下
• Alt+]またはOption+]：次の提案
• Alt+[またはOption+[：前の提案
• Ctrl+Enter：複数の提案を含むCopilotパネルを開く

高度な機能

インラインチャット（Ctrl+IまたはCmd+I）：

• コードを選択してショートカットを押す
• Copilotに選択部分のリファクタリング、説明、改善を依頼
• コードから離れることなく素早く編集するのに最適

チャットパネル：

• アクティビティバーからチャットビューを開く
• プロジェクト全体を参照するために@workspaceを使用
• コードベースについて質問したり、新しい実装を要求
• 利用可能なモデルはサブスクリプション階層により異なる

スマートアクション：

• ソース管理ビューでコミットメッセージを生成
• 既存のコードから単体テストを作成
• 関数にドキュメントを追加
• コンテキスト提案でエラーを修正

GitHubアカウントの切り替え

Copilotサブスクリプションが別のGitHubアカウントにある場合：

1. アクティビティバーのアカウントアイコン（または左下のプロフィールアイコン）をクリック
2. 現在のGitHubアカウントからサインアウト
3. ステータスバーのCopilotアイコンをクリック
4. “Sign in to GitHub”を選択
5. 正しいアカウントで認証

一般的なトラブルシューティング

Copilotがコードを提案しない：

• ファイル拡張子がサポートされているか確認
• サインインしているか確認（ステータスバーをチェック）
• ワークスペースでCopilotが無効になっていないか確認
• サブスクリプションステータスと制限を確認
• VS Codeウィンドウのリロードを試す（Ctrl+RまたはCmd+R）

提案の品質が悪い：

• ファイルにより多くのコンテキストを提供
• 関数の前に説明的なコメントを書く
• 明確な変数名と関数名を使用
• 関連するインポートと型定義を含める

ネットワークの問題：

• ファイアウォール設定がgithub.comへの接続を許可しているか確認
• 企業ネットワーク内にいる場合、プロキシ設定を確認
• コマンドパレットでgithub.copilot.advanced.debug.testConnectionコマンドでテスト

まとめ

VS CodeでGitHub Copilotを設定することで、あなたのスタイルに適応するAI搭載の提案により、コーディング体験が変革されます。無料プランでその機能を探索する場合でも、プロフェッショナル開発のために有料機能を活用する場合でも、設定プロセスは簡単です。基本的な補完から始めて、素早い改善のためにインラインチャットを試し、機能全体を構築するためにチャットパネルを探索してください。適切な設定とプライバシー設定を整えれば、AIペアプログラマーとより速く、より効率的にコーディングする準備が整います。

よくある質問

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.