- 対象者: 開発者、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の各呼び出しをデバッグします。Program.cs file in the BackEnd project. The file is in the following path SampleApp\BackEnd\Program.cs.
Add a breakpoint in line 24 (press F9) and refresh the browser with the Url to test the endpoint. The browser should not show the weather forecast, and in the Visual Studio Editor we can see how the program execution was paused at line 24.
Pressing F10 we can debug step-by-step until line 32, where we can see the generated values. The application should have been generated samples Weather values for the next 5 days. The variable forecast has an array containing these values.
You can stop debugging now.
Congratulations! Now you are ready to add more features into the app using GitHub Copilot.
As we start working in our codebase, we usually need to refactor some code, or get more context or explanations about it. Using GitHub Copilot Chat, we can have AI-driven conversations to perform these tasks.
Open the file Program.cs in the BackEnd project. The file is in the following path SampleApp\BackEnd\Program.cs.
Now let's use a slash command, in GitHub Copilot to understand a piece of code. Select lines 22-35, press CTRL + I to open the inline chat, and type /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
Let's use the /tests command to generate tests to the code. Select lines 39-42, press CTRL + I to open the inline chat, and type /tests (or select the /tests slash command) to generate a new set of tests for this record.
At this point, GitHub Copilot will suggest a new class. You need to first press [Accept] to create the new file.
A new class ProgramTests.cs was created and added to the project. This tests are using XUnit, however, you can ask to generate tests using another Unit Test library with a command like this one /tests use MSTests for unit testing.
Important: We are not going to use the test file in this project. You must delete the generated test file to continue.
Finally, let's use the /doc to generate automatic documentation to the code. Select lines 39-42, press CTRL + I to open the inline chat, and type /doc (or select the command) to generate the documentation for this record.
Inline chat, the Chat Panel, and slash commands are part of the amazing tools that support our development experience with GitHub Copilot. Now we are ready to add new features to this App.
Go to the Program.cs file in the BackEnd project. The file is in the following path 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翻訳サービスを使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な箇所が含まれる可能性があります。元の言語で記載された原文が信頼できる情報源と見なされるべきです。重要な情報については、専門の人間による翻訳をお勧めします。この翻訳の利用に起因する誤解や解釈の誤りについて、当方は一切の責任を負いません。