- 対象者: 開発者、DevOpsエンジニア、ソフトウェア開発マネージャー、テスター
- 学べること: GitHub Copilotを使用してコードを作成し、作業にコメントを追加する方法
- 作成するもの: GitHub Copilot AIがコードやコメントの提案を生成するC#ファイル
- 前提条件: GitHub Copilotは無料で利用可能です。GitHub Copilotにサインアップしてください。
- 所要時間: このコースは1時間以内で完了可能です。
このモジュールを終了する頃には、以下のスキルを習得できます:
- GitHub Copilotから提案を生成するプロンプトを作成する
- GitHub Copilotを活用してプロジェクトを改善する
以下のCodespacesボタンを右クリックして、新しいタブでCodespaceを開いてください
"GitHub Codespaces
この演習では、新しいエンドポイントを追加し、特定の場所をリクエストしてその場所の天気予報を返すようにWeather BackEnd Appを更新する手順を確認します。
リポジトリをCodespacesで開くと、完全に機能するCodespaceが新しいブラウザウィンドウに表示されます。このリポジトリのすべてはこの1つのCodespace内に含まれています。例えば、エクスプローラーパネルでBackEndプロジェクトとFrontEndプロジェクトの主要なコードを見ることができます。
プロジェクトを実行する前に、GitHub Copilot Chatを使用してプロジェクトの内容や異なるコンポーネントについて質問してみましょう。
- GitHub Copilot Chatをメインナビゲーションバーから開きます。
What is this project doing, and what are the key components?を入力して送信をクリックします。
GitHub Copilot Chatはプロジェクト全体を分析し、プロジェクトの目的、使用している技術、主要なコンポーネントについての概要を提供します。
ここからファイルをクリックしてナビゲートしたり、What APIs are available? のようなフォローアップの質問をすることができます。
プロジェクトの内容を理解したので、実際に実行してみましょう。
BackEndプロジェクトを実行するには、「Run and Debug」パネルに移動し、「BackEnd」プロジェクトを選択します。
選択したプロジェクトをデバッグ開始します。Weather APIプロジェクト（BackEndプロジェクト）はポート8080で実行されます。Portsパネルから公開されたURLをコピーできます。
注意: アプリケーションを実行すると「このページは動作していません」というエラーメッセージが表示される場合があります。それは、以下で説明するエンドポイントに移動する必要があるためです。
BackEndアプリケーションはランダムな天気予報データを生成するweatherforecastというエンドポイントを公開しました。現在実行中のアプリケーションをテストするには、公開されたURLに/weatherforecastを追加します。最終的なURLは以下のようになります:
https://< your url>.app.github.dev/weatherforecastブラウザで実行中のアプリケーションは以下のようになります。
次に、アプリケーションにブレークポイントを設定し、APIの各呼び出しをデバッグします。「BackEnd」プロジェクトのProgram.csファイルに移動します。このファイルはSampleApp\BackEnd\Program.csというパスにあります。
24行目にブレークポイントを追加し（F9キーを押す）、URLでブラウザを更新してエンドポイントをテストします。ブラウザには天気予報が表示されず、Visual Studioエディタでプログラムの実行が24行目で一時停止していることを確認できます。
F10キーを押すと、32行目までステップバイステップでデバッグできます。32行目で生成された値を確認できます。アプリケーションは今後5日間の天気のサンプル値を生成しているはずです。変数forecastには、これらの値を含む配列が格納されています。
これでデバッグを停止できます。
おめでとうございます！これで、GitHub Copilot を使用してアプリに機能を追加する準備が整いました。
コードベースで作業を開始すると、通常、コードをリファクタリングしたり、コードに関する詳細なコンテキストや説明を入手したりする必要が生じます。GitHub Copilot Chat を使用すると、AI を活用した会話を通じてこれらのタスクを実行できます。
「BackEnd」プロジェクトのファイルProgram.csを開きます。このファイルはSampleApp\BackEnd\Program.csというパスにあります。
では、GitHub Copilotでスラッシュコマンドを使ってコードの一部を理解してみましょう。22行目から35行目までを選択し、CTRL + Iを押してインラインチャットを開き、/explainと入力してください。
GitHub Copilotのバージョンに応じて、インライン応答またはチャットパネルの更新が表示されます。GitHub Copilotは選択したコードの詳細な説明を作成します。要約されたバージョンは以下のようになります:
The selected C# code is part of an ASP.NET Core application using the minimal API feature. It defines a GET endpoint at "/weatherforecast" that generates an array of WeatherForecast objects. Each object is created with a date, a random temperature, and a random summary. The endpoint is named "GetWeatherForecast" and has OpenAPI support for standardized API structure documentation.
スラッシュコマンドは、コードに対して特定のアクションを実行するためにチャット内で使用できる特別なコマンドです。例えば、以下を使用できます:
/docto add a documentation comment/explainto explain the code/fixto propose a fix for the problems in the selected code/generateto generate code to answer your question
/testsコマンドを使ってコードのテストを生成してみましょう。39行目から42行目までを選択し、CTRL + I を押してインラインチャットを開き、/testsと入力（または/testsスラッシュコマンドを選択）して、このレコードの新しいテストセットを生成します。
この時点で、GitHub Copilot は新しいクラスを提案します。新しいファイルを作成するには、まず [Accept] を押す必要があります。
新しいクラスProgramTests.csが作成され、プロジェクトに追加されました。このテストはXUnitを使用していますが、/tests use MSTests for unit testingのようなコマンドを実行することで、別のユニットテストライブラリを使用してテストを生成することもできます。
重要: このプロジェクトではテストファイルは使用しません。続行するには、生成されたテストファイルを削除する必要があります。
最後に、/doc を使ってコードのドキュメントを自動生成しましょう。39行目から42行目までを選択し、CTRL + I を押してインラインチャットを開き、/doc と入力（またはコマンドを選択）して、このレコードのドキュメントを生成します。
インラインチャット、チャットパネル、スラッシュコマンドは、GitHub Copilot を使った開発環境を支える素晴らしいツールの一部です。さあ、このアプリに新機能を追加する準備が整いました。
「BackEnd」プロジェクトのProgram.csファイルに移動します。このファイルはSampleApp\BackEnd\Program.csというパスにあります。
ファイルの最後に移動し、Copilotに都市名を含む新しいレコードを生成するよう依頼します。
// create a new internal record named WeatherForecastByCity that request the following parameters: City, Date, TemperatureC, Summary生成されたコードは以下のようになります:
// create a new internal record named WeatherForecastByCity that request the following parameters: City, Date, TemperatureC, Summary
internal record WeatherForecastByCity(string City, DateOnly Date, int TemperatureC, string? Summary)
{
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}以下のアニメーションでプロンプトがどのように機能するかを確認できます:
次に、/weatherforecastに似た新しいAPIエンドポイントを生成し、都市名も含めます。新しいAPIエンドポイント名は**/weatherforecastbycity**になります。
重要: コードは必ず.WithOpenApi();行の後に配置してください。この行は36行目に始まります。また、新しい提案された行をすべて定義するまで[Tab]を押して提案を受け入れてください。
次に、以下のコメントを追加してGitHub Copilotで新しいエンドポイントを生成します:
// Create a new endpoint named /WeatherForecastByCity/{city}, that accepts a city name in the urls as a paremeter and generates a random forecast for that city以下の例では、前のエンドポイントの後にいくつかの空行を追加し、その後GitHub Copilotが新しいエンドポイントを生成しました。エンドポイントのコアコードが生成されると、GitHub Copilotはエンドポイント名（49行目）とOpenAPI仕様（50行目）のコードも提案しました。[Tab]を押してこれらの提案を受け入れてください。
重要: このプロンプトは複数行のC#コードを生成します。生成されたコードが期待通りに動作することを確認するために必ずチェックしてください。
生成されたコードは以下のようになります:
// Create a new endpoint named /WeatherForecastByCity/{city}, that accepts a city name in the urls as a paremeter and generates a random forecast for that city
app.MapGet("/WeatherForecastByCity/{city}", (string city) =>
{
var forecast = new WeatherForecastByCity
(
city,
DateOnly.FromDateTime(DateTime.Now),
Random.Shared.Next(-20, 55),
summaries[Random.Shared.Next(summaries.Length)]
);
return forecast;
})
.WithName("GetWeatherForecastByCity")
.WithOpenApi();最後に、「Run and Debug」パネルからプロジェクトを開始して新しいエンドポイントが動作していることを確認します。
「Run and Debug」を選択し、「BackEnd」プロジェクトを選択します。
次に、[Run]を押してプロジェクトをビルドして実行します。プロジェクトが実行されると、Codespace URLと元のエンドポイントを使用して元のURLをテストできます:
https://< your code space url >.app.github.dev/WeatherForecastまた、新しいエンドポイントもテスト可能です。以下は異なる都市でのサンプルURLです:
https://< your code space url >.app.github.dev/WeatherForecastByCity/Toronto
https://< your code space url >.app.github.dev/WeatherForecastByCity/Madrid
https://< your code space url >.app.github.dev/WeatherForecastByCity/<AnyCityName>両方のテスト結果は以下のようになります:
🚀 おめでとうございます！この演習を通じて、GitHub Copilotを使ってコードを生成するだけでなく、それをインタラクティブかつ楽しく実行しました！GitHub Copilotを使用してコード生成だけでなく、ドキュメント作成やアプリケーションのテストなども行えます。
Copilot Editsを使用して、AIを活用したコード編集セッションを開始し、自然言語を使用して複数のファイルにわたるコード変更を迅速に反復します。Copilot Editsは、エディター内で直接編集を適用し、周囲のコードの完全なコンテキストで変更を確認できます。
ユーザーが検索したい都市を入力し、新しいAPIを呼び出す新しい機能を追加してみましょう。
- EditsモードウィンドウをGitHub Copilot Chatで開きます。
2. Editsウィンドウの**+Add Files...ボタンを選択し、FetchData.razorとWeatherForecastClient.csを追加します。
3. チャットに以下を入力します: ユーザーが天気を知りたい都市を入力できるようにUIを更新し、新しいエンドポイントを都市で呼び出すforecastクライアントを使用してテーブルを更新し、都市も表示するようにしてください。
4. 送信ボタンを選択すると、Editsが変更の反復計画を生成します。
5. 編集内容を確認し、EditsウィンドウでAccept**をクリックしてすべての変更を受け入れます。
6. アプリケーションを実行します。
注意: アプリケーションが実行されない場合や新しいエンドポイントが呼び出されない場合は、変更されたファイルの内容を確認し、エンドポイントが正しく呼び出されていることを確認してください。
ここから、スタイリングやアプリケーションに追加する他の機能について質問しながら、さらに反復を続けることができます。
Microsoftおよびその他の貢献者は、このリポジトリ内のMicrosoftドキュメントおよびその他のコンテンツについてCreative Commons Attribution 4.0 International Public Licenseに基づくライセンスを付与します。詳細はLICENSEファイルをご覧ください。また、このリポジトリ内のコードについてMITライセンスに基づくライセンスを付与します。詳細はLICENSE-CODEファイルをご覧ください。
Microsoft、Windows、Microsoft Azure、および/またはドキュメントで参照されているその他のMicrosoft製品およびサービスは、米国および/またはその他の国におけるMicrosoftの商標または登録商標である場合があります。このプロジェクトのライセンスは、Microsoftの名称、ロゴ、または商標を使用する権利を付与するものではありません。Microsoftの一般的な商標ガイドラインは、http://go.microsoft.com/fwlink/?LinkID=254653 で確認できます。
プライバシー情報については、https://privacy.microsoft.com/en-us/ をご覧ください。
Microsoftおよびその他の貢献者は、各自の著作権、特許、商標に基づくその他の権利を暗黙的、禁反言またはその他の方法で留保します。
免責事項:
この文書は、機械ベースのAI翻訳サービスを使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な箇所が含まれる可能性があります。元の言語で記載された原文が信頼できる情報源と見なされるべきです。重要な情報については、専門の人間による翻訳をお勧めします。この翻訳の利用に起因する誤解や解釈の誤りについて、当方は一切の責任を負いません。