VSCode、GitHub Copilot Chat で Web アプリを開発してみよう - 2

VSCode、GitHub Copilot Chat で Web アプリを開発してみよう - 2 鈴⽊ 章太郎 主席エンタープライズアーキテクト ヴイエムウェア株式会社 戦略ビジネス推進本部 © 2023 VMware, Inc.

鈴⽊ 章太郎 Twitter : @shosuz ヴイエムウェア株式会社 戦略ビジネス推進本部 主席エンタープライズアーキテクト Microsoft で13年間、テクニカルエバンジェリスト として .NET、Visual Studio、Windows、iOS、 Android、Microsoft Azure 等の開発者向け 技術啓発活動を実施。 その後 Dell、Accenture、Elastic での開発者 向け技術啓発活動等を経て現職。 2019年4⽉より2021年8⽉まで、内閣官房 IT 総合戦略室 政府 CIO 補佐官を兼務。 2021年9⽉より、デジタル庁 省庁業務サービス グループ ソリューションアーキテクト、AI チーム プロダクトマネージャを兼務。 ©2023 VMware, Inc.

OpenAI AI モデルの機能 OpenAI AI モデルの機能 は主に3 つの カテゴリ © 2023 VMware, Inc. 機能 例 ⾃然⾔語の⽣成 GPT さまざまな読み取りレベルの複雑なテキストの 要約、⽂章の⽂⾔の代替の提案など コードの⽣成 Codex プログラミング⾔語間でのコードの翻訳、コード 内のバグの特定とトラブルシューティングなど イメージの⽣成 DALL-E テキスト説明からのパブリケーション⽤イメージ の⽣成など 3

Agenda l 今回の実⾏環境等について l GitHub Copilot Chat Basics l プロトタイピングの実施 1 - 簡単なチャットアプリ作成 l プロトタイピングの実施 2 - チャットアプリ開発応⽤ l プロトタイピングの実施 3 – 既存データベースの利⽤ l GitHub Copilot Chat によるデバッグ l GitHub Copilot Tips l まとめ ©2023 VMware, Inc. 4

今回の実⾏環境等について Copilot for Business GPT-4 Preview を使ってみました︕ © 2023 VMware, Inc. 5

今回の実⾏環境 (7⽉からの変更点) 2023年8⽉時点での最新版 • Visual Studio Code 1.81.1 • GitHub Copilot v.1.104.341 • GitHub Copilot Chat v.0.6.0 preview • Billing 有効、GPT-4 有効（次々ページ以降） © 2023 VMware, Inc. 6

Markdown Preview Mermaid Support https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid • Mermaid 記法は、テキストのみ で、ガントチャートや円グラフなど のチャートや、クラス図やシーケン ス図のような UML で⽤いられる システム可視化表現を⾏える • ダイアグラム・チャート作成ツール とフローチャートのサポートを、VS Code の組み込み Markdown プレビューとノートブックの Markdown セルに追加 • 現在、Mermaid バージョン 10.2.3 をサポート © 2023 VMware, Inc. 7

• https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid

GPT-4 ベースの GitHub Copilot Chat ベータ公開 https://github.blog/2023-07-20-github-copilot-chat-beta-now-available-for-every-organization/ • 現在提供されている GitHub Copilot は GPT-3 の AI が ベース • コードエディタ内で、プログラマが コメントを記述するとそれに基づき コードを⾃動⽣成する機能等を 提供 • 強化された AI である GPT-4 を ⽤い、さらに⾼い精度でのコード ⽣成やバグの指摘などを始めとす る様々な新機能を備える • 今回のバージョンは、組織でサブ スクライブする必要あり（⼀⼈当 たり $14/⽉程度︖） © 2023 VMware, Inc. 8

• https://github.blog/2023-07-20-github-copilot-chat-beta-now-available-for-every-organization/

↑ 組織名 ↑ 組織住所 （法⼈番号も求め られるので正確に） ↑ PayPal メアド © 2023 VMware, Inc. 9

© 2023 VMware, Inc. 10

© 2023 VMware, Inc. 11

© 2023 VMware, Inc. 12

デフォルトは Blocked © 2023 VMware, Inc. Allowed に変更で有効になる 13

© 2023 VMware, Inc. 14

GitHub Copilot Chat Basics © 2023 VMware, Inc. 15

Slash コマンド + GitHub Copilot Chat • ヘルプを求めたり、VSCode 拡張機能を作成したり、単体テストを作成したりすることが簡単になる • スラッシュ コマンドの使⽤を開始するには、/ を⼊⼒ボックスに⼊⼒すると、複数のオプションが表⽰される • いずれかのオプションを選択し、質問して提案を取得 © 2023 VMware, Inc. 16

コードに関する GitHub Copilot Chat の質問 • 作業中のコードに関して Copilot Chat に特定の質問をするには、エディターでファイルを開き、チャット拡張機能に 移動 • たとえば、この特定のリポジトリと対話するのは初めてで、コードをよく理解していない場合、Copilot Chat に「この ファイルはどういう意味ですか?」と質問すれば、コードが何を⾏っているかについての推奨される説明が提供される © 2023 VMware, Inc. 17

GitHub Copilot Chat からのコード提案の使⽤ • Copilot Chat のチャットにコードの提案を求めるときは、Chat インターフェイスから提案をコピーするか、 [カーソル位置に挿⼊] ボタンをクリックすることで提案受け⼊れが可能 • 提案を新しいファイルに挿⼊したり、必要に応じてターミナルでコードを実⾏したりすることもできる • 例︓GitHub Copilot Chat に、マークダウンを使⽤して 2 つの画像を並べて挿⼊する⽅法を提案させる • 提供されたコード提案を Copy & Paste で完成 © 2023 VMware, Inc. 18

エディターで Copilot Chat セッションを開く • 作業を少し楽にするために、エディターで直接副操縦⼠の Chat セッションを開くことができる • これにより、Chat インターフェイスとファイルの間を⾏ったり来たりする必要がなくなる • 横にあるチャット アイコンをクリックし、上部の3つの点をクリックして [エディターでセッションを開く] を選択。これにより、 ファイルを開く場合と同様に、チャットがエディターに移動する © 2023 VMware, Inc. 19

プロトタイピングの実施 簡単なチャットアプリ作成 (.NET7, Blazor WebAssembly ASP.NET Core Hosted, SignalR 利⽤） © 2023 VMware, Inc. 20

簡単なチャットアプリの作り⽅ – 1 (2-3回実施した結果）
shosuz VSCode を使っていますので VSCode で答えてください。 あなたは熟練した .NET アーキテクトであり
開発者です。私の開発を⼿伝ってください。 .NET7, Blazor WebAssembly ASP.NET Core Hosted,
SignalR, を使った簡単なチャットアプリケーションの作り⽅を教えてください。まずは⼿順を⽰してもらえますか︖

GitHub Copilot はい、簡単なチャットアプリを作成する⼿順を以下に⽰します。
はい、承知しました。Visual Studio Code を使⽤して、.NET 7、Blazor WebAssembly ASP.NET Core
Hosted、SignalR を使⽤した簡単なチャットアプリケーションを作成する⼿順を以下に⽰します。
1. Visual Studio Code を開きます。
2. 新しいターミナルを開きます。
3. dotnet new blazorwasm --hosted --name ChatApp コマンドを実⾏して、Blazor WebAssembly
ASP.NET Core Hosted プロジェクトを作成します。
4. cd ChatApp/Server コマンドを実⾏して、Server プロジェクトのディレクトリに移動します。
5. dotnet add package Microsoft.AspNetCore.SignalR コマンドを実⾏して、SignalR パッケージを追
加します。
6. mkdir Hubs コマンドを実⾏して、Hubs ディレクトリを作成します。
7. touch Hubs/ChatHub.cs コマンドを実⾏して、ChatHub.cs ファイルを作成します。
8. code . コマンドを実⾏して、Visual Studio Code でプロジェクトを開きます。
9. ChatHub.cs ファイルを開き、以下のコードを追加します。

@page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
<h1>Chat</h1>
<div>
<input type="text" @bind-value="user" placeholder="User" />
<input type="text" @bind-value="message" placeholder="Message" />
<button @onclick="SendMessage">Send</button>
</div>
<ul>
@foreach (var item in messages)
{
<li>@item</li>
}
</ul>
@code {
private HubConnection hubConnection;
private string user;
private string message;
private List<string> messages = new();
protected override async Task OnInitializedAsync()
{
hubConnection = new HubConnectionBuilder()
.WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
.Build();

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;
namespace ChatApp.Server.Hubs
{
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
}

hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
{
messages.Add($"{user}: {message}");
StateHasChanged();
});
await hubConnection.StartAsync();
}
private async Task SendMessage()
{
if (hubConnection.State == HubConnectionState.Connected)
{
await hubConnection.SendAsync("SendMessage", user, message);
message = string.Empty;
}
}

10. cd ../Client コマンドを実⾏して、Client プロジェクトのディレクトリに移動します。
11. code . コマンドを実⾏して、Visual Studio Code で Client プロジェクトを開きます。
12. Pages ディレクトリ内にある Index.razor ファイルを開き、以下のコードを追加します。
© 2023 VMware, Inc.

}

21

簡単なチャットアプリの作り⽅ – 2 (2-3回実施した結果）
13. Server/Program.cs を下記のように⼊⼒します。
using ChatApp.Server.Hubs;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.ResponseCompression;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System.Linq;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();
builder.Services.AddSignalR();
builder.Services.AddResponseCompression(options =>
{
options.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});

14. ターミナルで、以下のコマンドを実⾏して、アプリケーションをビルドします。
dotnet build
15. ターミナルで、以下のコマンドを実⾏して、アプリケーションを実⾏します。
cd ..
cd Server
dotnet run --project ChatApp
16. ブラウザで http://localhost:5000 （指定されます）を開き、チャットアプリを使⽤します。
これで、簡単なチャットアプリが作成されました。

var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseWebAssemblyDebugging();
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseBlazorFrameworkFiles();
app.UseStaticFiles();
app.UseRouting();
app.MapRazorPages();
app.MapControllers();
app.MapFallbackToFile("index.html");
app.MapHub<ChatHub>("/chathub");
app.UseResponseCompression();
app.Run();

© 2023 VMware, Inc.

22

© 2023 VMware, Inc. 23

さらなる発展系は︖ 認証、データベース統合、エラーハンドリング、UI 改善… © 2023 VMware, Inc. 24

プロトタイピングの実施 チャットアプリ開発応⽤ （DB、認証、Azure OpenAI Service 他） © 2023 VMware, Inc. 25

最初に前提条件を与えてアプリをデプロイするインフラを作らせる
shosuz

GitHub Copilot

あなたは熟練した .NET 7 および Azure の開発者です。お⼿伝いをお願いします。下記より、⼿戻りが少ない
形での、開発の⼿順を⽰してください。その通りに順に機能を追加して、最後にアプリが完成できるようにしてくだ
さい。
下記を前提として、まず最初は、アプリをデプロイするクラウドのインフラを作っていただけますか︖zsh で az コマ
ンドを使ってスクリプトを作ってください。

了解しました。以下に az コマンドを使った zsh スクリプトを提⽰します。
#!/bin/zsh
# Azure にログインする
az login
# Azure Resource Group を作成する
az group create --name <resource-group-name> --location <location>
# Azure Cosmos DB を作成する
az cosmosdb create --name <cosmosdb-account-name> --resource-group <resource-group-name> --kind
GlobalDocumentDB --locations "Japan East"=0 --default-consistency-level Session --enable-multiple-writelocations true
# データベースを作成する
az cosmosdb database create --account-name <cosmosdb-account-name> --name <database-name> -resource-group <resource-group-name>
# コレクションを作成する
az cosmosdb collection create --account-name <cosmosdb-account-name> --database-name <database-name>
--name <collection-name> --resource-group <resource-group-name> --partition-key-path /partitionKey -throughput 400
# Azure Blob Storage を作成する
az storage account create --name <storage-account-name> --resource-group <resource-group-name> -location <location> --sku Standard_LRS
# コンテナーを作成する
az storage container create --name <container-name> --account-name <storage-account-name> --account-key
<storage-account-key>
# Azure Cognitive Search を作成する
az search service create --name <search-service-name> --resource-group <resource-group-name> --location
<location> --sku Basic
# インデックスを作成する
az search index create --name <index-name> --service-name <search-service-name> --resource-group
<resource-group-name> --schema @schema.json
# Azure OpenAI Service を作成する
az cognitiveservices account create --name <openai-account-name> --resource-group <resource-group-name>
--kind "TextAnalytics" --sku S0 --location <location>
# Azure Cognitive Search を有効にする
az cognitiveservices account network-rule add --name <openai-account-name> --resource-group <resourcegroup-name> --subnet <subnet-id>
# Azure OpenAI Service のナレッジベースを作成する
az cognitiveservices account create --name <openai-account-name> --resource-group <resource-group-name>
--kind Language --sku S0 --location <location>
このスクリプトでは、Azure CLI を使⽤して Azure にログインし、Azure リソースを作成する⼿順が含まれています。
必要に応じて、<resource-group-name>、<cosmosdb-account-name>、<database-name>、<collection-name>、
<storage-account-name>、<container-name>、<storage-account-key>、<search-service-name>、<index-name>、
26
<openai-account-name>、<subnet-id>、および <location> を適切な値に置き換えてください。また、az コマンドがインストールさ
れていることを確認してください。

--以下は、要約した前提条件です。
・ .NET 7 が必要です。
・このプロジェクトは、ASP.NET Core Hosted アプリケーションとして構築されています。これは、Blazor
WebAssembly アプリケーションと、サーバーサイドの ASP.NET Core アプリケーションを組み合わせたもので
す。
・ Blazor WebAssembly アプリケーションは、クライアント側で実⾏される C# コードを提供します。このアプ
リケーションは、SignalR Hub を使⽤して、リアルタイムでメッセージを送受信します。
・サーバーサイドの ASP.NET Core アプリケーションは、Azure Cosmos DB、Azure OpenAI Service、
Azure Cognitive Search、および Azure Blob Storage を使⽤して、チャットアプリケーションを構築するも
のです。
・ Azure Cosmos DB は、チャットアプリケーションのデータストアとして使⽤されます。
・ Azure OpenAI Service は、Assistant として使⽤され、ユーザーからのメッセージを受信し、ナレッジベー
スから返信を⽣成します。
・ Azure Cognitive Search は、ナレッジベースを検索するために使⽤されます。
・ Azure Blob Storage は、ファイルのアップロードおよびダウンロードに使⽤されます。
・ .NET 7 が使⽤されているため、Startup.cs は出てきません。

・IaC ツールとシェルを組み合わせる準備をしておく
・Azure Development Environment などで環境を予め
決めておくのも良いかもしれない（Team の場合）
・ある程度アーキテクチャも考えておく必要がある

© 2023 VMware, Inc.

ユーザーフローを考えさせプロジェクトの雛形を作らせる - 1 shosuz GitHub Copilot ありがとうございます。それでは、このインフラを前提として、先ほどの前提条件をもとに、アプリ 開発を進めていきます。 あなたは熟練した .NET 7 および Azure の開発者です。お⼿伝いをお願いします。 下記より、⼿戻りが少ない形での、開発の⼿順を⽰してください。その通りに順に機能を追 加して、最後にアプリが完成できるようにしてください。 --以下は、要約した前提条件です。 ・ .NET 7 が必要です。 ・このプロジェクトは、ASP.NET Core Hosted アプリケーションとして構築されています。 これは、Blazor WebAssembly アプリケーションと、サーバーサイドの ASP.NET Core アプリケーションを組み合わせたものです。 ・ Blazor WebAssembly アプリケーションは、クライアント側で実⾏される C# コードを 提供します。このアプリケーションは、SignalR Hub を使⽤して、リアルタイムでメッセージを 送受信します。 ・サーバーサイドの ASP.NET Core アプリケーションは、Azure Cosmos DB、Azure OpenAI Service、Azure Cognitive Search、および Azure Blob Storage を使⽤ して、チャットアプリケーションを構築するものです。 ・ Azure Cosmos DB は、チャットアプリケーションのデータストアとして使⽤されます。 ・ Azure OpenAI Service は、Assistant として使⽤され、ユーザーからのメッセージを 受信し、ナレッジベースから返信を⽣成します。 ・ Azure Cognitive Search は、ナレッジベースを検索するために使⽤されます。 ・ Azure Blob Storage は、ファイルのアップロードおよびダウンロードに使⽤されます。 ・ .NET 7 が使⽤されているため、Startup.cs は出てきません。 了解しました。以下は、⼿戻りが少ない形での開発⼿順の例です。 © 2023 VMware, Inc. 1. Blazor WebAssembly アプリケーションを作成する。 2. SignalR Hub を使⽤して、リアルタイムでメッセージを送受信するための Blazor コンポー ネントを作成する。 3. サーバーサイドの ASP.NET Core アプリケーションを作成する。 4. Azure Cosmos DB に接続するためのクラスを作成する。 5. Azure OpenAI Service に接続するためのクラスを作成する。 6. Azure Cognitive Search に接続するためのクラスを作成する。 7. Azure Blob Storage に接続するためのクラスを作成する。 8. チャットメッセージを格納するための Cosmos DB コレクションを作成する。 9. Assistant からの返信を格納するための Cognitive Search インデックスを作成する。 10. チャットメッセージを送信するための API エンドポイントを作成する。 11. チャットメッセージを取得するための API エンドポイントを作成する。 12. Assistant にメッセージを送信するための API エンドポイントを作成する。 13. ファイルのアップロードおよびダウンロードを処理するための API エンドポイントを作成する。 14. Blazor WebAssembly アプリケーションに、SignalR Hub を使⽤してメッセージを送 受信するためのコードを追加する。 15. Blazor WebAssembly アプリケーションに、チャットメッセージを送信するためのコードを 追加する。 16. Blazor WebAssembly アプリケーションに、チャットメッセージを取得するためのコードを 追加する。 17. Blazor WebAssembly アプリケーションに、Assistant にメッセージを送信するための コードを追加する。 18. Blazor WebAssembly アプリケーションに、ファイルのアップロードおよびダウンロードを処 理するためのコードを追加する。 上記の⼿順に従って、Blazor WebAssembly アプリケーションとサーバーサイドの ASP.NET Core アプリケーションを構築し、チャットアプリケーションを完成させることができま す。 27

ユーザーフローを考えさせプロジェクトの雛形を作らせる - 2 shosuz GitHub Copilot ありがとうございます。まずはフローを作ってみてください --以下は、要約した前提条件です。 ・ .NET 7 が必要です。 ・ このプロジェクトは、ASP.NET Core Hosted アプリケーショ ンとして構築されています。これは、Blazor WebAssembly アプリケーションと、サーバーサイドの ASP.NET Core アプリ ケーションを組み合わせたものです。 ・ Blazor WebAssembly アプリケーションは、クライアント側 で実⾏される C# コードを提供します。このアプリケーションは、 SignalR Hub を使⽤して、リアルタイムでメッセージを送受信 します。 ・ サーバーサイドの ASP.NET Core アプリケーションは、 Azure Cosmos DB、Azure OpenAI Service、Azure Cognitive Search、および Azure Blob Storage を使⽤ して、チャットアプリケーションを構築するものです。 ・ Azure Cosmos DB は、チャットアプリケーションのデータス トアとして使⽤されます。 ・ Azure OpenAI Service は、Assistant として使⽤され、 ユーザーからのメッセージを受信し、ナレッジベースから返信を⽣ 成します。 ・ Azure Cognitive Search は、ナレッジベースを検索する ために使⽤されます。 ・ Azure Blob Storage は、ファイルのアップロードおよびダウ ンロードに使⽤されます。 ・ .NET 7 が使⽤されているため、Startup.cs は出てきませ ん。 ::: mermaid graph TD; A[ユーザー] -->|ログイン| B[Azure Cosmos DB]; B -->|認証| C[チャットアプリ]; C -->|メッセージ送信| D[SignalR Hub]; D -->|メッセージ受信| C; C -->|メッセージ取得| B; C -->|Assistant に送信| E[Azure OpenAI Service]; E -->|Assistant からの返信| F[Azure Cognitive Search]; F -->|検索結果| C; B -->|ナレッジベースの作成| G[Azure OpenAI Service]; G -->|データの同期| H[Azure Blob Storage]; ::: © 2023 VMware, Inc. ・⼿動で実装する部分、あるいは他のアプリ・他のシステムで実装・設定等する 部分はフローに書かない ・可能な限り前提条件を⽰し具体的な指定をしておかないと思った通りにコード 等を⽣成してはくれない 28

ユーザーフローを考えさせプロジェクトの雛形を作らせる - 3
shosuz
ありがとうございます。先ほど⾒せていただいた⼿順に⽐べると、クラインアント側から作るよ
うなイメージですね。これは上記のインフラができていることを前提にしているからと理解して
良いですね︖
GitHub Copilot
はい、その通りです。上記のフローチャートは、Azure Cosmos DB、Azure OpenAI
Service、Azure Cognitive Search、および Azure Blob Storage がすでに構築さ
れていることを前提としています。Blazor WebAssembly アプリケーションとサーバーサイ
ドの ASP.NET Core アプリケーションを構築する前に、これらの Azure リソースを作成
する必要があります。
shosuz
ありがとうございます。それでは、1. から4. までを詳細にお願いします。
注意点は、.NET 7 であり Startup.cs は登場しないということ、ASP.NET Core
Hosted であること、アプリ名は、 ChatAppKB にしましょう。ある程度完全なコードを⽰
していただけますか︖
GitHub Copilot
了解しました。以下は、1. から 4. までの⼿順に従って、Blazor WebAssembly アプリ
ケーションを作成し、Azure Cosmos DB に接続するためのクラスを作成するためのコー
ド例です。

Visual Studio Code のターミナルで、以下のコマンドを実⾏して、Blazor コンポーネントを作
成します。
cd ChatAppKB.Client
dotnet new component -n Chat -o Pages
Chat.razor ファイルを開き、以下のコードを追加します。
html
<h1>Chat</h1>
<input type="text" @bind-value="message" />
<button @onclick="SendMessage">Send</button>
<ul>
@foreach (var message in messages)
{
<li>@message</li>
}
</ul>
@code {
private string message;
private List<string> messages = new List<string>();

1. Blazor WebAssembly アプリケーションを作成する。
Visual Studio Code のターミナルで、以下のコマンドを実⾏して、Blazor
WebAssembly アプリケーションを作成します。

private async Task SendMessage()
{
messages.Add(message);
await Task.CompletedTask;
}

dotnet new blazorwasm -o ChatAppKB.Client
2. SignalR Hub を使⽤して、リアルタイムでメッセージを送受信するための Blazor コン
ポーネントを作成する。
© 2023 VMware, Inc.

}
29

ユーザーフローを考えさせプロジェクトの雛形を作らせる - 4
3. サーバーサイドの ASP.NET Core アプリケーションを作成する。
public async Task AddItemAsync<T>(T item)
{
await _container.CreateItemAsync(item);
}

Visual Studio Code のターミナルで、以下のコマンドを実⾏して、ASP.NET Core ア
プリケーションを作成します。
dotnet new webapi -o ChatAppKB.Server

public async Task<IEnumerable<T>> GetItemsAsync<T>
(string queryString)
{
var query = _container.GetItemQueryIterator<T>
(new QueryDefinition(queryString));
List<T> results = new List<T>();
while (query.HasMoreResults)
{
var response = await query.ReadNextAsync();
results.AddRange(response.ToList());
}
return results;
}

4. Azure Cosmos DB に接続するためのクラスを作成する。
ChatApp KB.Server プロジェクトに、以下のコードを含む CosmosDbService.cs
ファイルを作成します。
using Microsoft.Azure.Cosmos;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace ChatAppGPT4.Server.Services
{
public class CosmosDbService
{
private readonly CosmosClient _cosmosClient;
private readonly Database _database;
private readonly Container _container;
public CosmosDbService(string connectionString,
string databaseName, string containerName)
{
_cosmosClient = new CosmosClient(connectionString);
_database = _cosmosClient.GetDatabase(databaseName);
_container = _database.GetContainer(containerName);
© 2023 VMware, Inc.
}

}
}
```
上記のコードでは、Cosmos DB に接続するための CosmosClient クラスを使⽤しています。
CosmosClient クラスは、Azure Cosmos DB に接続するためのクラスであり、Cosmos DB
のデータベース、コンテナー、およびアイテムを操作するためのメソッドを提供します。
CosmosDbService クラスは、CosmosClient クラスを使⽤して、Cosmos DB にアクセスす
るためのメソッドを提供します。

30

ユーザーフローを修正させる - 1 shosuz GitHub Copilot ありがとうございます。ただ、よくみてみると、このフローはちょっと 変です。 まず、ユーザーが問い合わせしたときにアシスタントが解答する 際に使う独⾃データは、 .pdf ファイルや、.docx ファイル等が 蓄積されたもので、Cosmos DB と Cognitive Services と によってチャンクに分解されてインデックス化されます。ベクトル 化も将来的にはしたいと思っています。 その意味で、チャットアプリから Azure Cognitive Search に 検索の依頼が来たときに、探しに⾏くのは、Azure Blob Storage ではないのでしょうか︖そこを修正願います。 そしてチャットアプリも普通のチャットアプリではなくて、ユーザーと アシスタント（Azure OpenAI Service）とのチャットです。 その辺りがちょっとこのフローではわかりにくいのでそこを修正して もらえますか︖ Mermaid 記法で VSCode で表⽰できるようにお願いします。 --::: mermaid graph TD; A[ユーザー] -->|ログイン| B[Azure Cosmos DB]; B -->|認証| C[チャットアプリ]; C -->|メッセージ送信| D[SignalR Hub]; D -->|メッセージ受信| C; C -->|メッセージ取得| B; C -->|Assistant に送信| E[Azure OpenAI Service]; E -->|Assistant からの返信| F[Azure Cognitive Search]; F -->|検索結果| C; B -->|ナレッジベースの作成| G[Azure OpenAI Service]; G -->|データの同期| H[Azure Blob Storage]; ::: 了解しました。以下は、修正版のフローチャートです。 © 2023 VMware, Inc. ::: mermaid graph TD; A[ユーザー] -->|ログイン| B[Azure Cosmos DB]; B -->|認証| C[Assistant]; C -->|メッセージ送信| D[SignalR Hub]; D -->|メッセージ受信| C; C -->|メッセージ取得| B; C -->|Assistant に送信| E[Azure OpenAI Service]; E -->|Assistant からの返信| F[Azure Cognitive Search]; F -->|検索結果| G[Azure Blob Storage]; B -->|ナレッジベースの作成| H[Azure OpenAI Service]; H -->|データの同期| G; ::: 修正内容は以下の通りです。 - チャットアプリが普通のチャットアプリではなく、ユー ザーと Assistant（Azure OpenAI Service）と のチャットであることを明確にしました。 - Azure Cognitive Search が検索するデータが Azure Blob Storage にあることを明確にしました。 ・途中から指⽰の修正を試み、新たな フローを⽣成させる 31

ユーザーフローを修正させる - 2 shosuz ありがとうございます。では、先ほどのフローに修正した結果、下記の開発⼿順は変更が必 要でしょうか︖その場合は、その新しい⼿順を⽰してください。 GitHub Copilot 以下は、⼿戻りが少ない形での開発⼿順の例です。 1. Blazor WebAssembly アプリケーションを作成する。 2. SignalR Hub を使⽤して、リアルタイムでメッセージを送受信するための Blazor コン ポーネントを作成する。 3. サーバーサイドの ASP.NET Core アプリケーションを作成する。 4. Azure Cosmos DB に接続するためのクラスを作成する。 5. Azure OpenAI Service に接続するためのクラスを作成する。 6. Azure Cognitive Search に接続するためのクラスを作成する。 7. Azure Blob Storage に接続するためのクラスを作成する。 8. チャットメッセージを格納するための Cosmos DB コレクションを作成する。 9. Assistant からの返信を格納するための Cognitive Search インデックスを作成する。 10. チャットメッセージを送信するための API エンドポイントを作成する。 11. チャットメッセージを取得するための API エンドポイントを作成する。 12. Assistant にメッセージを送信するための API エンドポイントを作成する。 13. ファイルのアップロードおよびダウンロードを処理するための API エンドポイントを作成する。 14. Blazor WebAssembly アプリケーションに、SignalR Hub を使⽤してメッセージを 送受信するためのコードを追加する。 15. Blazor WebAssembly アプリケーションに、チャットメッセージを送信するためのコード を追加する。 16. Blazor WebAssembly アプリケーションに、チャットメッセージを取得するためのコード を追加する。 17. Blazor WebAssembly アプリケーションに、Assistant にメッセージを送信するための コードを追加する。 18. Blazor WebAssembly アプリケーションに、ファイルのアップロードおよびダウンロードを © 2023 VMware, Inc. 処理するためのコードを追加する。 上記の⼿順に従って、Blazor WebAssembly アプリケーションとサーバーサイドの ASP.NET Core アプリケーションを構築し、チャットアプリケーションを完成させることができま す。 GitHub Copilot: フローの修正によって、開発⼿順に⼤きな変更は必要ありません。ただし、 以下の点に注意してください。 1. Azure Cognitive Search のインデックスを作成する必要があります。 2. Assistant からの返信を Azure Cognitive Search に格納する必要があります。 3. Azure OpenAI Service が Cosmos DB からデータを同期する必要があります。 これらの変更を反映するために、以下の⼿順を追加する必要があります。 1. Azure Cognitive Search のインデックスを作成するためのクラスを作成する。 2. Assistant からの返信を Azure Cognitive Search に格納するためのコードを追加す る。 3. Azure OpenAI Service が Cosmos DB からデータを同期するためのコードを追加す る。 上記の⼿順に従って、Blazor WebAssembly アプリケーションとサーバーサイドの ASP.NET Core アプリケーションを構築し、チャットアプリケーションを完成させることができま す。 ・フローの修正に伴い⼿順変更が必要か確認する 32

修正したユーザーフローにより最初のいくつかの⼿順を実装させる - 1
shosuz

では、1.-4. までの⼿順と、詳細、そして必要なソースコードを⽰してください。 .NET 7であ
ること(Startup.csは存在しない)、ASP.NET Core Hosted の雛形を使⽤してプロジェ
クトを作成すること、アプリ名は、ChatAppKB でお願いします。
GitHub Copilot

了解しました。以下に、1.-4. までの⼿順と必要なソースコードを⽰します。
1. Visual Studio Code を開き、新しい ASP.NET Core Hosted アプリケーションを作
成します。
dotnet new blazorwasm -o ChatAppKB --hosted
Blazor WebAssembly アプリケーションに、SignalR Hub を使⽤してメッセージを送受
信するためのコードを追加します。

var hubConnection = new HubConnectionBuilder()
.WithUrl(host.BaseAddress + "chathub")
.Build();
hubConnection.On<string, string>("ReceiveMessage", (user, message)
=>
{
Console.WriteLine($"{user}: {message}");
});
await hubConnection.StartAsync();
while (true)
{
Console.Write("Enter message: ");
var message = Console.ReadLine();

=== ChatAppKB/Client/Program.cs:

await hubConnection.SendAsync("SendMessage", "user", message);
}

using Microsoft.AspNetCore.SignalR.Client;
using System;
using System.Threading.Tasks;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new
Uri(builder.HostEnvironment.BaseAddress) });
var host = builder.Build();
await host.RunAsync();

© 2023 VMware, Inc.

=== ChatAppKB/Client/wwwroot/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initialscale=1.0" />
<title>ChatAppKB.Client</title>
<base href="/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>

33

修正したユーザーフローにより最初のいくつかの⼿順を実装させる - 2
<body>
<app>Loading...</app>
<script src="_framework/blazor.webassembly.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoftsignalr/5.0.11/signalr.min.js"></script>
<script>
async function start() {
try {
await DotNet.invokeMethodAsync('ChatAppKB.Client',
'StartSignalRConnection');
} catch (err) {
console.error(err);
setTimeout(() => start(), 5000);
}
}

var host = builder.Build();
await host.RunAsync();
var hubConnection = new HubConnectionBuilder()
.WithUrl(host.BaseAddress + "chathub")
.Build();
hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
{
Console.WriteLine($"{user}: {message}");
});
await hubConnection.StartAsync();
while (true)
{
Console.Write("Enter message: ");
var message = Console.ReadLine();

start();
</script>
</body>
</html>

await hubConnection.SendAsync("SendMessage", "user", message);
=== ChatAppKB/Client/Program.cs:

}

using Microsoft.AspNetCore.SignalR.Client;
using System;
using System.Threading.Tasks;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new
Uri(builder.HostEnvironment.BaseAddress) });
© 2023 VMware, Inc.

34

修正したユーザーフローにより最初のいくつかの⼿順を実装させる - 3 shosuz SignalR の NuGet ライブラリはいつインストールするのですか︖ GitHub Copilot SignalR の NuGet ライブラリは、Blazor WebAssembly アプリケーションとサーバーサイドの ASP.NET Core アプリケーションの両⽅でインストールする必要があります。Blazor WebAssembly アプリケーションでは、SignalR のクライアント パッケージをインストールし、 サーバーサイドの ASP.NET Core アプリケーションでは、SignalR のサーバー パッケージをイン ストールする必要があります。SignalR のクライアント パッケージは、Blazor WebAssembly アプリケーションのプロジェクトで、以下のコマンドを使⽤してインストールできます。 dotnet add package Microsoft.AspNetCore.SignalR.Client SignalR のサーバー パッケージは、サーバーサイドの ASP.NET Core アプリケーションのプロ ジェクトで、以下のコマンドを使⽤してインストールできます。 dotnet add package Microsoft.AspNetCore.SignalR これらのパッケージをインストールすることで、SignalR を使⽤してリアルタイムでメッセージを送 受信するためのコードを実装することができます。 ・まずはシナリオからインフラの要件を固める → インフラ作成スクリプトを作る（サービス名等も⽣成させても良い） ・前提条件とフローと⼿順を羅針盤としてプロンプトの解釈に制限を与えていく ・忘れっぽいので毎回前提条件をプロンプトに⼊れて忘れられないようにする（特に .NET 7 で実装している事を繰り返し伝えて おかないとすぐに Startup.cs のコードを返してくる） © 2023 VMware, Inc. 35

プロトタイピングの実施 既存データベースの利⽤ © 2023 VMware, Inc. 36

前回の内容 ユースケースからデータモデルを作成させる • あの司法試験がいよいよ2026年 から︖CBT になることが発表され た。これは実務に合わせたもの。 • それを踏まえて国家資格のユース ケースについて聞く。 Prompt : • 国家試験の資格試験のオンライン 受験システムが必要です。どんな ユースケースが考えられますか? © 2023 VMware, Inc. 37

前回の内容 基本的なデータモデルの提⽰ • 基本的なデータモデルが提⽰される • 実際のシステムでは更に詳細なエンティティやリレーショ ンシップを追加する可能性あり • 例︓管理者側システムと、ユーザー側システム、受験 経験者の管理、受験のセキュリティ確保、他 © 2023 VMware, Inc. 38

前回の内容 ⾃動⽣成させたサンプルデータ Prompt: • 各エンティティのサンプルデータを テーブル形式で出⼒してください。 GitHub Copilot • 以下に各エンティティのサンプル データをテーブル形式で出⼒し ます。 --• 以上が各エンティティのサンプル データです。これらのデータは、 受験者、試験、問題、回答、 採点、試験結果などの情報を 表しています。 © 2023 VMware, Inc. 39

ユーザーフローを考えさせプロジェクトの雛形を作らせる shosuz shosuz あなたは熟練した .NET 開発者です。私の開発を⼿伝ってください。 法律の問 題集クイズアプリを作ろうと思っています。 内容は、法律問題で、モバイルでも、 隙間時間でも解きやすいように⼀問⼀答の正誤問題です。将来的にはそれらの 組み合わせで多岐選択式にします（正しいものを選ぶ、間違っているものを選ぶ、 正しいものの個数を選ぶ、誤っているものの個数を選ぶ、等。今回は考えなくて 良いです） ユーザーフローを考えてください。 Blazor WebAssebly ASP.NET Core hosted アプリを作成します。 名前は LegalQuiz です。コマンドを教えてください。 GitHub Copilot 以下のコマンドを使⽤して、Blazor WebAssembly ASP.NET Core hosted アプリケーション "LegalQuiz" を作成できます。 GitHub Copilot 以下は、ユーザーフローの例です。 1.ユーザーがアプリにアクセスします。 2.ユーザーは、問題を解くためにログインする必要があります。 3.ユーザーは、問題のカテゴリーを選択します。 4.アプリは、ランダムに選択された問題を表⽰します。 5.ユーザーは、問題に回答します。 6.アプリは、回答が正しいかどうかを確認します。 7.アプリは、ユーザーに回答の正誤を表⽰します。 8.ユーザーは、次の問題に進むか、アプリを終了するかを選択します。 このユーザーフローに基づいて、Blazor WebAssembly ASP.NET Core hosted アプリを作成することができます。アプリのフロントエンドには、Blazor WebAssembly を使⽤し、バックエンドには、ASP.NET Core を使⽤します。 問題と回答は、データベースに保存されます。ユーザーが回答するたびに、アプリ はデータベースからランダムに問題を選択し、ユーザーの回答を確認します。 © 2023 VMware, Inc. dotnet new blazorwasm --hosted -n LegalQuiz このコマンドは、dotnet new コマンドを使⽤して、Blazor WebAssembly プロジェクトを作成します。--hosted オプションは、 ASP.NET Core ホストを含むホストされたアプリケーションを作成すること を指定します。-n オプションは、プロジェクトの名前を指定します。 上記の例では、プロジェクト名は "LegalQuiz" になります。 40

データベースの構成を考えさせる - 1 shosuz データベースの構成からいきます。 QA テーブルは7回分の問題解答解説そして履歴を⼀つのテーブルに取っておきます。 問題は全て⼀問⼀答。 リレーションシップは Subject（科⽬）と Range（範囲）と Issue（論点）はマスターテーブル。 Subject の中に Range があり Range の中に Issue がある。 QA はSubject や Range や Issue からみると QA(N):1 。 出題するときは、ランダムに QA の中から Subject 毎に20問、合計140問を出題します。 まずは順番にテーブルのクリエイト⽂を⽰しますので確認してください。 "Create Table QuesionsAnswers:" USE [legalexam] GO /****** Object: Table [dbo].[QA] Script Date: 2023/08/10 14:11:25 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [legalexam].[dbo].[QA]( [Id] [int] PRIMARY KEY NOT NULL, [SubjectId] [int] NOT NULL, [RangeId] [int] NOT NULL, [IssuesId] [int] NOT NULL, [Question] nvarchar NULL, [Answer] nvarchar NULL, [Description] nvarchar NULL, [Articles] nvarchar NULL, [Notes] nvarchar NULL, [CorrectAnswer] nvarchar NULL, [MyAnswer] nvarchar NULL, [Trial1] [bit] NULL, [TrialDate1] datetime2 NULL, [Trial2] [bit] NULL, [TrialDate2] datetime2 NULL, [Trial3] [bit] NULL, [TrialDate3] datetime2 NULL, [Trial4] [bit] NULL, [TrialDate4] datetime2 NULL, [Trial5] [bit] NULL, [TrialDate5] datetime2 NULL, [Trial6] [bit] NULL, [TrialDate6] datetime2 NULL, [Trial7] [bit] NULL, [TrialDate7] datetime2 NULL ) ALTER TABLE [legalexam].[dbo].QA ADD CONSTRAINT FK_QA_Subject FOREIGN KEY (SubjectId) REFERENCES Subject (Id); ALTER TABLE [legalexam].[dbo].QA ADD CONSTRAINT FK_QA_Range FOREIGN KEY (RangeId) REFERENCES Range (Id); ALTER TABLE [legalexam].[dbo].QA ADD CONSTRAINT FK_QA_Issue FOREIGN KEY (IssuesId) REFERENCES Issue (Id); © 2023 VMware, Inc. 41

データベースの構成を考えさせる - 2 GitHub Copilot 以下は、SQL Server で QA テーブルを作成するためのクエリです。 USE [legalexam] GO /****** Object: Table [dbo].[QA] Script Date: 2021/10/05 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[QA]( [Id] [int] PRIMARY KEY NOT NULL, [SubjectId] [int] NOT NULL, [RangeId] [int] NOT NULL, [IssuesId] [int] NOT NULL, [Question] [nvarchar](max) NULL, [Answer] [nvarchar](max) NULL, [Description] [nvarchar](max) NULL, [Articles] [nvarchar](max) NULL, [Notes] [nvarchar](max) NULL, [CorrectAnswer] [nvarchar](50) NULL, [MyAnswer] [nvarchar](50) NULL, [Trial1] [bit] NULL, [TrialDate1] [datetime2](7) NULL, [Trial2] [bit] NULL, [TrialDate2] [datetime2](7) NULL, [Trial3] [bit] NULL, [TrialDate3] [datetime2](7) NULL, [Trial4] [bit] NULL, [TrialDate4] [datetime2](7) NULL, [Trial5] [bit] NULL, [TrialDate5] [datetime2](7) NULL, [Trial6] [bit] NULL, [TrialDate6] [datetime2](7) NULL, [Trial7] [bit] NULL, [TrialDate7] [datetime2](7) NULL © 2023 VMware, Inc. ) … ALTER TABLE [dbo].[QA] WITH CHECK ADD CONSTRAINT [FK_QA_Issue] F OREIGN KEY([IssuesId]) REFERENCES [dbo].[Issue] ([Id]) GO ALTER TABLE [dbo].[QA] CHECK CONSTRAINT [FK_QA_Issue] GO ALTER TABLE [dbo].[QA] WITH CHECK ADD CONSTRAINT [FK_QA_Range] F OREIGN KEY([RangeId]) REFERENCES [dbo].[Range] ([Id]) GO ALTER TABLE [dbo].[QA] CHECK CONSTRAINT [FK_QA_Range] GO ALTER TABLE [dbo].[QA] WITH CHECK ADD CONSTRAINT [FK_QA_Subject] FOREIGN KEY([SubjectId]) REFERENCES [dbo].[Subject] ([Id]) GO ALTER TABLE [dbo].[QA] CHECK CONSTRAINT [FK_QA_Subject] GO このクエリは、QA テーブルを作成し、Subject、Range、Issue テーブルとのリレーションシップを設 定します。QA テーブルには、問題と回答、解説、関連する法律条⽂、ノート、回答の正誤などが 含まれます。また、QA テーブルには、7回分の試験のためのフラグと⽇付が含まれます。 42

ユーザー画⾯のフローを作成させる - 1 shosuz GitHub Copilot ではこれをもとにプロジェクト作成を⾏います。 Blazor WebAssembly ASP.NET Core Hoted でプロジェクトを作成し ました。名前は LegalQ です。 こちらをもとに、まずは 下記の EF により Azure SQL Database を作成しています。 以下は、LegalQ アプリの画⾯フローの概要です。 1.ログイン画⾯ 2.メイン画⾯ 1. Questions&Answers 画面 2. モード選択画面 3. 集計画面 3.問題解説画⾯ 4.終了画⾯ ログイン画⾯と認証機能は後で実装するため、現在は省略されています。メイ ン画⾯には、Questions&Answers 画⾯、モード選択画⾯、集計画⾯があり ます。Questions&Answers 画⾯では、ランダムに選択された問題が表⽰され ます。モード選択画⾯では、7 Subjects を出題するモードと、Subject 毎に Range 毎に Issue 毎に演習するモードを選択できます。集計画⾯では、正答 率が表⽰されます。問題解説画⾯では、各問題の問題と解答、解説、関連 する法律条⽂、メモが表⽰されます。最後に、終了画⾯でアプリを終了します。 dotnet ef dbcontext scaffold "Server=lqa.database.windows.net;Data base=legalqa;User ID=xxxx;Password=xxxxxx" Microsoft.EntityFrameworkCore.SqlServer -o Models -f この状態から、アプリを作っていきたいと思います。 まずは画⾯のフローを⽰して ください。 ログイン画⾯、認証画⾯は後で作ります。認証機能も後ほど実装し ます。SQL Azure で別テーブルを作りID/PW認証します。 最初に起動したら、Blazor のデフォルトの画⾯に、Questions&Answers と⾔う画⾯を作り、Menuにリンクがあります。 このアプリは、ランダムに7 Subjectsを出題するモードと、Subject毎にRange 毎にIssue毎に演習するモードと、2つのモードを持ちます。 いずれも20問で20分がデフォルトです。タイマー機能も必要となります。これは 調整可能になります。モードを選択するボタンが… (以下つづく） © 2023 VMware, Inc. 43

ユーザー画⾯のフローを作成させる - 2 shosuz ありがとうございます。画⾯フローを Mermaid 拡張機能で表⽰できるよう に書いてください。 GitHub Copilot 以下は、Mermaid 拡張機能を使⽤して LegalQ アプリの画⾯フローを 表したものです。 graph TD A[ログイン画⾯] --> B[メイン画⾯] B --> C[Questions&Answers 画⾯] B --> D[モード選択画⾯] B --> E[集計画⾯] E --> F[問題解説画⾯] F --> G[メモ編集画⾯] G --> F E --> H[終了画⾯] H --> A このフローチャートでは、ログイン画⾯からメイン画⾯に遷移し、メイン画⾯ から Questions&Answers 画⾯、モード選択画⾯、集計画⾯に遷移 します。集計画⾯からは、問題解説画⾯に 遷移し、問題解説画⾯から は、メモ編集画⾯に遷移できます。終了画⾯からは、ログイン画⾯に戻り ます。 © 2023 VMware, Inc. 44

appsettings.json への connection String のマージ
GitHub Copilot

shosuz
ありがとうございます。それでは現在のデフォルトの
appsettings.json に対して、
この connection String をマージしたファイルを作ってください。

以下は、指定された connection string をマージした appsettings.json ファ
イルの例です。
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}

“Server=xxx.database.windows.net;Database=legal
exam;User ID=xxxxx;Password=xxxxx"
},
SQL Azure Database
のポータルから取得

"AllowedHosts": "*",
"ConnectionStrings": {
"DefaultConnection":
"Server=xxx.database.windows.net;Database=legalexam;Use
r ID=xxxx;Password=xxxxxx"
}
}

このファイルには、指定された connection string が "DefaultConnection"
という名前で追加されています。このファイルを使⽤することで、アプリケー
ションは Azure SQL Database に接続できます。

© 2023 VMware, Inc.

45

各テーブルの Model クラスのソースコードを⾃動⽣成 shosuz ありがとうございます。 ついで各テーブルの Model クラスのソースコードを⽣成 してください。 これは LegalQuiz.Server.Models に配置します。 GitHub Copilot 以下は、指定されたコマンドを使⽤して、各テーブルの Model クラスのソー スコードを⽣成する例です。 dotnet ef dbcontext scaffold "Server=xxx.database.windows.n et;Database=legalexam;User ID=xxxxx;Password=xxxxx" Micr osoft.EntityFrameworkCore.SqlServer -o Models -f -context LegalQuizContext --context-dir Data このコマンドを実⾏すると、Models フォルダーに各テーブルの Model クラス が⽣成されます。ただし、このコマンドは、LegalQuizContext という名前の DbContext クラスを使⽤ していることを前提としています。 また、Data フォルダーに DbContext クラスが⽣成されます。 ⽣成された Model クラスは、LegalQuiz.Server.Models ネームスペース に配置することができます。 ・ASP.NET Core MVC で開発する場合 → このままコントローラーを⽣成させる… ・Blazor WebAssembly (ASP.NET Core Hosted) で開発する場合 → Web API を⽣成させる… © 2023 VMware, Inc. 46

GitHub Copilot Chat による デバッグ © 2023 VMware, Inc. 47

デバッグでは Explain とクイックフィックスをうまく組み合わせる
shosuz
/explain 型 'LegalQuiz.Shared.Models.Issue' を
'Microsoft.AspNetCore.Mvc.ActionResult' に暗黙的に変換できません
GitHub Copilot
このエラーは、DeleteIssue()メソッドがIssueを返すことが期待されているが、
ActionResult<Issue>を返しているために発⽣しています。DeleteIssue()メ
ソッドがIssueを返すように修正するには、以下のようにOk()メソッドを使⽤して、
Issueをラップする必要があります。

[HttpDelete("{id}")]
public async Task<ActionResult<Issue>> DeleteIssue(int id)
{
var issue = await _context.Issues.FindAsync(id);
if (issue == null)
{
return NotFound();
}
_context.Issues.Remove(issue);
await _context.SaveChangesAsync();
return Ok(issue);
}
これにより、IssueがActionResult<Issue>にラップされ、エラーが解決されます。
© 2023 VMware, Inc.

48

GitHub Copilot Tips © 2023 VMware, Inc. 49

GitHub Copilot の概要 ⼊⾨⽤コンテンツですがよくできています https://learn.microsoft.com/ja-jp/training/modules/introduction-to-github-copilot/ © 2023 VMware, Inc. 50

• https://learn.microsoft.com/ja-jp/training/modules/introduction-to-github-copilot/

GitHub Copilot の概要シリーズ AI を利⽤したアドオン GitHub Copilot を使⽤してコードやドキュメントの記述で役⽴つ提案を得る⽅法 https://learn.microsoft.com/ja-jp/shows/introduction-to-github-copilot/?WT.mc_id=academic-0000-alfredodeza © 2023 VMware, Inc. 51

• https://learn.microsoft.com/ja-jp/shows/introduction-to-github-copilot/?WT.mc_id=academic-0000-alfredodeza

How to use GitHub Copilot: Prompts, tips, and use cases 2 ⼈の GitHub Developer Advocate が 希望する結果を AI ペア プログラマーに伝えるための例とベスト プラクティスを共有 https://github.blog/2023-06-20-how-to-write-better-prompts-for-github-copilot/ このガイドでは、IDE で⽣成 AI コーディング ツールを使⽤する開発者の観点から⽤語を定義します。 ただし、全体像を把握するために、以下の表に ML 研究者の定義も追加しました。 プロンプト © 2023 VMware, Inc. 迅速なエンジニアリング コンテクスト 開発者 GitHub Copilot から特定 の提案を⽣成するために開発 者が作成したコード ブロック、 コードの個々の⾏、または ⾃然⾔語コメント IDE で指⽰やコメントを提供して、 特定のコーディング提案を⽣成する ⽣成 AI コーディング ツールからの⽬的の 出⼒を指定するため に開発者によって 提供される詳細 機械学習 研究者 アルゴリズムによって継続的 に⽣成され、⽣成 AI コー ディング ツールのモデルに送信 されるIDE コードと関連コン テキスト(IDE コメント、開い ているファイル内のコードなど) のコンパイル ⼤規模な⾔語モデルのプロンプト (IDE コードとコンテキストのコンパイ ル) を⽣成するアルゴリズムの作成 アルゴリズムがコード に関する追加情報と して⼤規模⾔語モデ ル (LLM) に送信する 詳細(開いているファイ ルのデータや、カーソル の前後に記述したコー ドなど) 52

• https://github.blog/2023-06-20-how-to-write-better-prompts-for-github-copilot/
• https://github.blog/2023-05-17-how-github-copilot-is-getting-better-at-understanding-your-code/

GitHub Copilot Patterns & Exercises 元 Microsoft 現 GitHub アーキテクト @yuhattor さん提供 https://www.ai-native.dev/docs/v/ja/ © 2023 VMware, Inc. 53

• https://www.ai-native.dev/docs/v/ja/

GitHub Copilot導⼊後、初めて使う時。(豊富な使⽤例付き) @masakinihirota さん記事 https://qiita.com/masakinihirota/items/0e58a6b921e4420a2882 © 2023 VMware, Inc. 54

• https://qiita.com/masakinihirota/items/0e58a6b921e4420a2882

Agenda まとめ l 今回の実⾏環境等について l GitHub Copilot Chat Basics l プロトタイピングの実施 1 - 簡単なチャットアプリ作成 l プロトタイピングの実施 2 - チャットアプリ開発応⽤ l プロトタイピングの実施 3 – 既存データベースの利⽤ l GitHub Copilot Chat によるデバッグ l GitHub Copilot Tips ©2023 VMware, Inc. 55

参考︓マルチクラウドに⽣成 AI を加えるヴイエムウェアの新展開 https://japan.zdnet.com/article/35208151/ https://japan.zdnet.com/article/35208044/ ©2023 VMware, Inc. マルチクラウド、ハイブリッドクラウド、パートナー連携 56

• https://japan.zdnet.com/article/35208151/
• https://japan.zdnet.com/article/35208044/

Thank you for your attention! © 2023 VMware, Inc.