演習 - Visual Studio Code と連携して動作するように GitHub Copilot を設定する
この演習では、JavaScript の個人ポートフォリオ フロントエンド Web アプリケーション用の GitHub テンプレートを使って新しいリポジトリを作成します。
GitHub Copilot を設定する方法
GitHub Copilot を使用するには、以下の手順を完了する必要があります。
GitHub アカウント:
- GitHub アカウントを作成します。 Copilot は GitHub サービスであるため、使用するには GitHub アカウントが必要です。 アカウントをお持ちでない場合は、 GitHub Web ページ にアクセスして無料で作成してください。
サインアップして GitHub Copilot を有効にします。
- GitHub Copilot 無料アカウントを設定するか、1 回限り 30 日間の試用版で GitHub Copilot Pro 試用版のサブスクリプションにサインアップできます。 学習目的では、使用制限がある Copilot Free オプションで十分である必要があります。
- GitHub Copilot の無料試用版の条件に注意することが重要です。GitHub Copilot の無料試用版オファーを選択した場合は、サインアップ時に支払い形式が要求されます。 30 日間の終了前にキャンセルしない限り、試用期間が終了するまで料金は適用されません。
ヒント
GitHub Copilot には、 1 か月あたり 2,000 個のコード オートコンプリートと 50 個のチャット メッセージを含む Free レベルが用意されています。 使用を開始するには、Visual Studio Code を開き、GitHub Copilot アイコンをクリックし、[Sign in to Use GitHub Copilot for Free] をクリックします。 ブラウザーで開いたウィンドウで GitHub アカウントにログインします。 詳細については、こちらを参照してください。 教師、学生、選択したオープンソースの保守担当者は、Copilot Pro を無料で受け取ることができます。方法については、以下をご覧ください: https://aka.ms/Copilot4Students。
-
拡張機能をインストールします。
- GitHub Copilot は、Visual Studio、Visual Studio Code、JetBrains IDE、VIM、XCode など、主要な IDE の拡張機能として利用できます。
- インストールするには、IDE の拡張機能マーケットプレースで "GitHub Copilot" を検索し、インストール手順に従います。 たとえば、VS Code マーケットプレースでは、インストールするオプションとして GitHub Copilot、GitHub Copilot Chat、GitHub Copilot for Azure があります。
環境を設定する
まず、GitHub Copilot 拡張機能を事前に構成した Codespaces 環境を立ち上げる必要があります。
次のボタンを選択して、事前に構成した環境で Codespace を開きます。
[codespace の作成] ページで、codespace の構成設定を確認した後に、[新しい codespace の作成] を選択します
Codespace が起動するまで待ちます。 この起動プロセスには数分かかることがあります。
このプロジェクトの残りの演習は、この開発コンテナーのコンテキストで行われます。
重要
すべての GitHub アカウントでは、2 つのコア インスタンスで毎月最大 60 時間無料で Codespaces を使用できます。 詳細については、「GitHub Codespaces に月単位で含まれるストレージとコア時間」を参照してください。
JavaScript ポートフォリオ
完了すると、Codespaces の下部にターミナル セクションが読み込まれます。 Codespaces により、コンテナーに必要なすべての拡張機能と依存関係がインストールされます。 完了すると、このテンプレートは、npm start を使用して Codespace 内で Web アプリケーションを開始するように構成されます。
Web アプリケーションが正常に起動すると、Codespace 内のポート 1234 でサーバーが実行されていることを示すメッセージがターミナルに表示されます。