事前準備
Visual StudioのAgentモードを有効にしよう。
6/17現在、Visual Studioをインストールした時点でのデフォルトではAgentモードが無効になっています。
Agentモードを有効にしましょう。
コンソールアプリケーションを作る
.NET 8あたりでコンソールアプリケーションを作成していきます。
今回の、Webアプリケーションの元ネタになるものです。
たとえば、GitHub Copilot Chatをエージェントモードにして以下のようにします。
1から100までの偶数を表示する
すると、以下のようにコードが生成されました。
// 1から100までの偶数を表示
for (int i = 2; i <= 100; i += 2)
{
Console.WriteLine(i);
}
ではこれをWebアプリケーションにしていきます。
ASP.NET Coreアプリケーションにする
GitHub Copilot Chatに以下のように入力していきます。
Webアプリケーションにしてください
すると、プロジェクトファイルを以下のように書き換えASP.NET Coreアプリケーションにするなどの変更をしていきます。
<Project Sdk="Microsoft.NET.Sdk.Web">
Program.csは以下のようになりました。
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.MapGet("/", () =>
{
var evenNumbers = Enumerable.Range(1, 100).Where(x => x % 2 == 0);
return string.Join("<br>", evenNumbers);
});
app.Run();
実行結果が以下のようになりました。
改行のHTMLマークアップが邪魔です。
ですので、再びGitHub Copilot Chatに以下のようにお願いします。
改行のマークアップは不要です
良い感じになりました。
さらに、データとして読みやすいようにJSON形式で返してもらうようにお願いしてみます。
JSON形式で返却するようにしてください
コードが以下のように最終的になりました。
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.MapGet("/", () =>
{
var evenNumbers = Enumerable.Range(1, 100).Where(x => x % 2 == 0).ToArray();
return Results.Json(evenNumbers);
});
app.Run();
JSON形式で返却されていることを確認できます。
さらに、Blazor WebAssemblyでこれを表示するフロントエンドを作ってもらいましょう
フロントエンドの作成
同じようにGitHub Copilot Chatにお願いしていきます。
今あるAPIのデータを表示するフロントエンドをBlazor WebAssemblyで作ってください。
同様に何回かエラーの末、GitHub Copilot Chatとのやり取りの末以下のようになりました。
結論
コードを1行も書かなくても簡単なものならCopilotで作れる！