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

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

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

Agenda l 今回の実⾏環境等について l プロトタイピングの実施 l ダイアグラム作成 l データモデル作成 l サンプルデータ作成 l エンティティ作成・修正 l 画⾯作成 l サンプルデータ実装 l 画⾯の作成と実⾏ l コードのデプロイ準備 l まとめ ©2023 VMware, Inc. 3

今回の実⾏環境等について Confidential │ © 2021 VMware, Inc. 4

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

今回の実⾏環境 2023年7⽉時点での最新版 • Visual Studio Code 1.80.1 • GitHub Copilot v.1.98.275 • GitHub Copilot Chat v.0.4.0 preview • Billing 有効 © 2023 VMware, Inc. 6

プロトタイピングの実施 Confidential │ © 2021 VMware, Inc. 7

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. 8

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

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

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

基本的なデータモデルの提⽰ - 2 • VSCode Markdown Preview Mermaid Support 拡張機能を 利⽤ • .md ファイルのプレビューを表⽰ © 2023 VMware, Inc. 11

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

メールやソーシャル連携でログインできるための実装 - 1
Prompt:
• ユーザーがメールやソーシャル連携でログインできるようにするには、どのように実装すればよいですか︖
GitHub Copilot:
・了解しました。ユーザー認証について、メールやソーシャ
ル連携を使⽤する場合、以下のような変更が必要にな
ります。
1. Userエンティティから、Password属性を削除します。
2. Userエンティティに、Provider属性を追加します。こ
の属性は、ユーザーが使⽤する認証プロバイダー（メー
ル、Google、Facebookなど）を⽰します。
3. Userエンティティに、ProviderUserId属性を追加し
ます。この属性は、ユーザーが認証プロバイダーに提供す
るユーザーIDを⽰します。
4. Examエンティティに、Provider属性を追加します。
この属性は、試験を提供する認証プロバイダー（メール、
Google、Facebookなど）を⽰します。
5. Examエンティティに、ProviderExamId属性を追加
します。この属性は、試験を提供する認証プロバイダー
に提供する試験IDを⽰します。
以上の変更を加えたUserとExamエンティティのクラス図
は以下のようになります。

© 2023 VMware, Inc.

```mermaid
classDiagram
class User {
<<entity>>
+int UserId
+string UserName
+string Email
+string PhoneNumber
+string Provider
+string ProviderUserId
+DateTime CreatedAt
+DateTime UpdatedAt
}
class Exam {
<<entity>>
+int ExamId
+string ExamName
+DateTime ExamDate
+int ExamDuration
+string ExamRules
+string ExamRequirements
+string Provider
+string ProviderExamId
+DateTime CreatedAt
+DateTime UpdatedAt
}

class Question {
<<entity>>
+int QuestionId
+string QuestionText
+string QuestionType
+string QuestionOptions
+int ExamId
+int CorrectOptionCount
+int IncorrectOptionCount
}

class ExamScore {
<<entity>>
+int ExamScoreId
+int ExamId
+int TotalScore
+int PassingScore
+int TopScoreCount
+DateTime CreatedAt
+DateTime UpdatedAt
}

class Answer {
<<entity>>
+int AnswerId
+int UserId
+int ExamId
+int QuestionId
+string AnswerText
+DateTime CreatedAt
+DateTime UpdatedAt
}

User "1" -- "n" Exam : 参加
Exam "1" -- "n" Question : 含む
Question "1" -- "n" Answer : 回答
Answer "1" -- "1" User : 回答者
Answer "1" -- "1" Exam : 回答対象
Answer "1" -- "1" Question : 回答問題
Exam "1" -- "n" ExamResult : 受験
Exam "1" -- "1" ExamScore : 集計
ExamScore "1" -- "n" ExamResult : 含む
```

class ExamResult {
<<entity>>
+int ExamResultId
+int UserId
+int ExamId
+int TotalScore
+bool IsPassed
+DateTime CreatedAt
+DateTime UpdatedAt
}

以上の変更を加えたデータモデルを使⽤する場合、
ユーザーはメールアドレスやソーシャルアカウントでロ
グインし、試験も同様に認証プロバイダーを使⽤し
て提供されます。

13

メールやソーシャル連携でログインできるための実装 - 2 Prompt: • ユーザーがメールやソーシャル連携でログインできるように実装すればよいですか︖ © 2023 VMware, Inc. 14

メールやソーシャル連携でログインできるための実装 - 3 Prompt: • これでサンプルデータも変更できますか︖ GitHub Copilot: はい、もちろんです。以下が、サンプルデータを変更したコードです。 ```sql INSERT INTO User (UserName, Email, PhoneNumber, Provider, ProviderUserId, CreatedAt, UpdatedAt) VALUES ('John Doe', 'johndoe@example.com', '123-456-7890', 'Google', '1234567890', '2022-01-01 00:00:00', '2022-01-01 00:00:00'); INSERT INTO Exam (ExamName, ExamDate, ExamDuration, ExamRules, ExamRequirements, Provider, ProviderExamId, CreatedAt, UpdatedAt) VALUES ('Sample Exam', '2022-01-01 10:00:00', 60, 'No cheating allowed', 'Bring your own pen and paper', 'Google', '9876543210', '2022-01-01 00:00:00', '2022-01-01 00:00:00'); INSERT INTO Question (QuestionText, QuestionType, QuestionOptions, ExamId, CorrectOptionCount, IncorrectOptionCount) VALUES ('What is the capital of Japan?', 'Multiple Choice', 'A: Tokyo¥nB: Kyoto¥nC: Osaka¥nD: Hiroshima', 1, 1, 3); INSERT INTO Answer (UserId, ExamId, QuestionId, AnswerText, CreatedAt, UpdatedAt) VALUES (1, 1, 1, 'A', '2022-01-01 10:30:00', '2022-01-01 10:30:00'); INSERT INTO ExamResult (UserId, ExamId, TotalScore, IsPassed, CreatedAt, UpdatedAt) VALUES (1, 1, 1, true, '2022-01-01 11:00:00', '2022-01-01 11:00:00'); INSERT INTO ExamScore (ExamId, TotalScore, PassingScore, TopScoreCount, CreatedAt, UpdatedAt) VALUES (1, 1, 1, 1, '2022-01-01 12:00:00', '2022-01-01 12:00:00'); ``` 上記のコードを使用する場合、ユーザーはGoogleアカウントでログインし、Googleが提供する「Sample Exam」という試験を受験します。 試験には1つの問題があり、正解は「A: Tokyo」です。ユーザーはこの問題に正解し、試験に合格します。試験のスコアは1点で、合格点は1点です。 © 2023 VMware, Inc. 15

メールやソーシャル連携でログインできるための実装 - 4
Prompt:ASP.NET Core でメールやソーシャル連携でログインするためのサンプルコードを⽰してください。
GitHub Copilot: ユーザーがメールやソーシャル連携でログインできるようにするには、以下の⼿順が必要です。
1. 認証プロバイダーのAPIを使⽤して、ユーザーが認証されたかどうかを確認します。
2. 認証された場合、認証プロバイダーから提供されるユーザーIDを使⽤して、データベース内のUserエンティティを検索します。
3. ユーザーが存在しない場合は、新しいUserエンティティを作成します。
4. ユーザーが存在する場合は、Userエンティティを更新します。
5. ユーザーを認証した後、必要に応じてセッションを作成し、ユーザーをアプリケーションにログインさせます。
以下は、ASP.NET Coreでメールやソーシャル連携でログインするためのサンプルコードです。

```csharp
[AllowAnonymous]
[HttpPost("login")]
public async Task<IActionResult> Login([FromBody] LoginViewModel model)
{
// 認証プロバイダーのAPIを使⽤して、ユーザーが認証されたかどうかを確認する
var userInfo = await _externalAuthService.GetUserInfoAsync(model.Provider, model.Token);

else
{
// Userエンティティを更新する
user.Email = userInfo.Email;
user.PhoneNumber = userInfo.PhoneNumber;
var result = await _userManager.UpdateAsync(user);

if (userInfo == null)
{
return BadRequest("Invalid provider or token.");
}

if (!result.Succeeded)
{
return BadRequest(result.Errors);
}

// データベース内のUserエンティティを検索する
var user = await _userManager.FindByProviderAsync(userInfo.Provider, userInfo.ProviderUserId);
if (user == null)
{
// 新しいUserエンティティを作成する
user = new User
{
UserName = userInfo.Email,
Email = userInfo.Email,
PhoneNumber = userInfo.PhoneNumber,
Provider = userInfo.Provider,
ProviderUserId = userInfo.ProviderUserId
};
var result = await _userManager.CreateAsync(user);

}
// セッションを作成し、ユーザーをアプリケーションにログインする
await HttpContext.SignInAsync(user.Id.ToString(), user.UserName, new AuthenticationProperties
{
IsPersistent = model.RememberMe
});
return Ok();
}
```
上記のコードでは、`_externalAuthService`と`_userManager`は、それぞれ認証プロバイダーのAPIとASP.NET Core Identityの
UserManagerを表しています。`LoginViewModel`は、ユーザーが提供する認証トークンとリメンバーミーのフラグを含むビューモデルです。

if (!result.Succeeded)
{
return BadRequest(result.Errors);
}
}

© 2023 VMware, Inc.

16

このシステムに必要な画⾯ - 1 Prompt: • 上記のモデルやエンティティの構成を 踏まえて、このシステムにはどのような 画⾯が必要ですか? リストアップして ください。 GitHub Copilot: • このシステムには、以下のような画⾯が必要です。 1. ログイン画⾯︓ユーザーがメールアドレスやソーシャルアカウントを使⽤ してログインできるようにするための画⾯。 2. 試験⼀覧画⾯︓ユーザーが受験可能な試験の⼀覧を表⽰するた めの画⾯。 3. 試験詳細画⾯︓ユーザーが試験の詳細情報を確認し、受験を開 始するための画⾯。 4. 試験受験画⾯︓ユーザーが試験を受験するための画⾯。 5. 試験結果画⾯︓ユーザーが受験した試験の結果を表⽰するための 画⾯。 6. ユーザー情報画⾯︓ユーザーが⾃分の情報を確認し、編集するた めの画⾯。 7. 管理者画⾯︓管理者が試験や問題、ユーザー情報を管理するた めの画⾯。 これらの画⾯は、ASP.NET Core MVC を使⽤して実装することがで きます。また、各画⾯には、必要に応じて JavaScript や CSS を使⽤ して、動的な機能やスタイルを追加することができます。 © 2023 VMware, Inc. 17

このシステムに必要な画⾯ - 2 Prompt: • これは主にユーザー側の画⾯ですね。 管理者側の画⾯はいかがでしょう︖ GitHub Copilot: • 管理者側の画⾯には、以下のような画⾯が必要です。 1. ログイン画⾯︓管理者がメールアドレスやパスワードを使⽤してロ グインできるようにするための画⾯。 2. 試験⼀覧画⾯︓管理者が作成した試験の⼀覧を表⽰するため の画⾯。 3. 試験作成画⾯︓管理者が新しい試験を作成するための画⾯。 4. 試験編集画⾯︓管理者が既存の試験を編集するための画⾯。 5. 試験削除画⾯︓管理者が試験を削除するための画⾯。 6. 問題⼀覧画⾯︓管理者が作成した問題の⼀覧を表⽰するため の画⾯。 © 2023 VMware, Inc. 7. 問題作成画⾯︓管理者が新しい問題を作成するための画⾯。 8. 問題編集画⾯︓管理者が既存の問題を編集するための画⾯。 9. 問題削除画⾯︓管理者が問題を削除するための画⾯。 10. ユーザー⼀覧画⾯︓管理者が登録されているユーザーの⼀覧を 表⽰するための画⾯。 11. ユーザー詳細画⾯︓管理者がユーザーの詳細情報を確認するた めの画⾯。 12. ユーザー編集画⾯︓管理者がユーザーの情報を編集するための 画⾯。 13. ユーザー削除画⾯︓管理者がユーザーを削除するための画⾯。 これらの画⾯は、ASP.NET Core MVC を使⽤して実装することが できます。また、各画⾯には、必要に応じて JavaScript や CSS を使⽤して、動的な機能やスタイルを追加することができます。 18

ユーザーが操作する画⾯の画⾯遷移図 - 1 Prompt: • ユーザーが操作する画⾯の、画⾯ 遷移図を VS Code Markdown Mermaid Support で表⽰できる 書式で作成してください。 GitHub Copilot: • 以下が、ユーザーが操作する画⾯の画⾯遷移図のコードです。この コードをMarkdownファイルに貼り付け、Markdown Preview Mermaid Support 拡張機能を有効にすると、画⾯遷移図が表⽰ されます。 ```mermaid graph TD A[ログイン画⾯] --> B[試験⼀覧画⾯] B --> C[試験詳細画⾯] C --> D[試験受験画⾯] D --> E[試験結果画⾯] B --> F[ユーザー情報画⾯] F --> G[ログアウト] A --> G ``` 上記のコードでは、ログイン画⾯から試験⼀覧画⾯に遷移し、試験⼀覧画 ⾯から試験詳細画⾯に遷移します。試験詳細画⾯から試験受験画⾯に 遷移し、試験受験画⾯から試験結果画⾯に遷移します。また、試験⼀覧 画⾯からユーザー情報画⾯に遷移し、ユーザー情報画⾯からログアウトしま す。ログイン画⾯からもログアウトすることができます。 © 2023 VMware, Inc. 19

ユーザーが操作する画⾯の画⾯遷移図 - 2 Prompt: • ユーザーが操作する画⾯の、画⾯ 遷移図を VS Code Markdown Mermaid Support で表⽰できる 書式で作成してください。 • プレビューを実⾏します。 © 2023 VMware, Inc. 20

管理者が操作する画⾯の画⾯遷移図 - 1 Prompt: • 管理者が操作する画⾯の、画⾯遷移図を VS Code Markdown Mermaid Support で表⽰できる書式で作成してください。 GitHub Copilot: • 以下が、管理者が操作する画⾯の画⾯遷移図のコードで す。このコードをMarkdownファイルに貼り付け、 Markdown Preview Mermaid Support 拡張機能を 有効にすると、画⾯遷移図が表⽰されます。 ```mermaid graph TD A[ログイン画⾯] --> B[試験⼀覧画⾯] B --> C[試験作成画⾯] B --> D[試験編集画⾯] B --> E[試験削除画⾯] B --> F[問題⼀覧画⾯] F --> G[問題作成画⾯] F --> H[問題編集画⾯] F --> I[問題削除画⾯] B --> J[ユーザー⼀覧画⾯] J --> K[ユーザー詳細画⾯] K --> L[ユーザー編集画⾯] K --> M[ユーザー削除画⾯] J --> N[ログアウト] A --> N © 2023 VMware, Inc. ``` 上記のコードでは、ログイン画⾯から試験⼀覧画⾯に遷移し、 試験⼀覧画⾯から試験作成画⾯、試験編集画⾯、試験削 除画⾯に遷移します。 また、試験⼀覧画⾯から問題⼀覧画⾯に遷移し、問題⼀覧 画⾯から問題作成画⾯、問題編集画⾯、問題削除画⾯に 遷移します。 さらに、試験⼀覧画⾯からユーザー⼀覧画⾯に遷移し、ユー ザー⼀覧画⾯からユーザー詳細画⾯に遷移します。 ユーザー詳細画⾯からユーザー編集画⾯、ユーザー削除画⾯ に遷移します。 ログアウトは、ユーザー⼀覧画⾯とログイン画⾯から⾏うことがで きます。 21

管理者が操作する画⾯の画⾯遷移図 - 2 Prompt: • プレビューを表⽰します。 © 2023 VMware, Inc. 22

試験形式の説明によるフローの変更 - 1
Prompt:

⼀次試験の多岐選択肢試験を合格したものだけ、⼆次試験の論⽂試験を受けられます。
そのようなフローに変更してください。例として、2万⼈が受験し、5000⼈が⼀次試験に合格し、2500⼈が最終合格します。

•

GitHub Copilot:
•

以下が、変更後のフローを表す画⾯遷移図のコードです。
このコードをMarkdownファイルに貼り付け、Markdown
Preview Mermaid Support 拡張機能を有効にすると、
画⾯遷移図が表⽰されます。

```mermaid
graph TD
A[ログイン画⾯] --> B[試験⼀覧画⾯]
B --> C[試験詳細画⾯]
C --> D[試験受験画⾯]
D --> E{⼀次試験合格?}
E -- 合格 --> F[⼆次試験詳細画⾯]
F --> G[⼆次試験受験画⾯]
G --> H[試験結果画⾯]
E -- 不合格 --> I[試験結果画⾯]
B --> J[ユーザー情報画⾯]
J --> K[ログアウト]
A --> K
```
© 2023 VMware, Inc.

上記のコードでは、⼀次試験を受験したユーザーが、
⼀次試験に合格した場合にのみ、⼆次試験を受験
できるようになっています。
⼀次試験に合格した場合は、⼆次試験詳細画⾯に
遷移し、⼆次試験を受験することができます。
⼀次試験に不合格の場合は、試験結果画⾯に遷移
します。
また、ログイン画⾯からログアウトすることができます。

23

試験形式の説明によるフローの変更 - 2 Prompt: • プレビューを表⽰します。 © 2023 VMware, Inc. 24

⼀次試験の多岐選択式試験のデータモデルの作成 - 1 Prompt: • ⼀次試験の試験の多岐選択式試験のデータモデルを Azure SQL Database に実装します。 • テーブル作成のSQL⽂と、サンプルのデータを登録するSQL⽂を作成してください。 • サンプルデータは10件以上作成してください。 • データは⽇本語でお願いします。 • 法律系の試験では必須科⽬になることが多い⺠法の問題等が望ましいです。 GitHub Copilot: • 以下が、Azure SQL Databaseに実装するためのデータモデルのSQL⽂で す。また、サンプルデータも含めて記載しています。 ```sql -- 試験テーブルの作成 CREATE TABLE exams ( id INT PRIMARY KEY IDENTITY(1,1), name NVARCHAR(50) NOT NULL, description NVARCHAR(200) NOT NULL, pass_score INT NOT NULL, total_score INT NOT NULL, created_at DATETIME NOT NULL DEFAULT GETDATE(), updated_at DATETIME NOT NULL DEFAULT GETDATE() ); -- 試験問題テーブルの作成 CREATE TABLE exam_questions ( id INT PRIMARY KEY IDENTITY(1,1), exam_id INT NOT NULL, question NVARCHAR(200) NOT NULL, choice1 NVARCHAR(50) NOT NULL, choice2 NVARCHAR(50) NOT NULL, choice3 NVARCHAR(50) NOT NULL, choice4 NVARCHAR(50) NOT NULL, answer INT NOT NULL, created_at DATETIME NOT NULL DEFAULT GETDATE(), updated_at DATETIME NOT NULL DEFAULT GETDATE(), FOREIGN KEY (exam_id) REFERENCES exams(id) ); © 2023 VMware, Inc. -- サンプルデータの登録 INSERT INTO exams (name, description, pass_score, total_score) VALUES ('⺠法試験', '⺠法に関する試験です。', 60, 100), ('刑法試験', '刑法に関する試験です。', 70, 100), ('商法試験', '商法に関する試験です。', 65, 100); INSERT INTO exam_questions (exam_id, question, choice1, choice2, choice3, choice4, answer) VALUES (1, '⺠法において、債務不履⾏による損害賠償請求権の発⽣には、何が必要ですか︖', '債務不履⾏', '損害', '因果 関係', '過失', 3), (1, '⺠法において、債務不履⾏による損害賠償請求権の時効期間は何年ですか︖', '1年', '2年', '3年', '5年', 3), (1, '⺠法において、債務不履⾏による損害賠償請求権の時効期間は何年ですか︖', '1年', '2年', '3年', '5年', 3), (1, '⺠法において、債務不履⾏による損害賠償請求権の時効期間は何年ですか︖', '1年', '2年', '3年', '5年', 3), (1, '⺠法において、債務不履⾏による損害賠償請求権の時効期間は何年ですか︖', '1年', '2年', '3年', '5年', 3), (1, '⺠法において、債務不履⾏による損害賠償請求権の時効期間は何年ですか︖', '1年', '2年', '3年', '5年', 3), (1, '⺠法において、債務不履⾏による損害賠償請求権の時効期間は何年ですか︖', '1年', '2年', '3年', '5年', 3), (1, '⺠法において、債務不履⾏による損害賠償請求権の時効期間は何年ですか︖', '1年', '2年', '3年', '5年', 3), (1, '⺠法において、債務不履⾏による損害賠償請求権の時効期間は何年ですか︖', '1年', '2年', '3年', '5年', 3), (1, '⺠法において、債務不履⾏による損害賠償請求権の時効期間は何年ですか︖', '1年', '2年', '3年', '5年', 3); ``` 上記のSQL⽂では、試験テーブルと試験問題テーブルを作成しています。 試験テーブルには、試験名、試験説明、合格点、満点、作成⽇時、更新⽇時の情報が含まれます。 試験問題テーブルには、試験ID、問題、選択肢1〜4、正解、作成⽇時、更新⽇時の情報が含まれます。 また、サンプルデータとして、⺠法試験に関する10問の問題を登録しています。 25

⼀次試験の多岐選択式試験のデータモデルの作成 - 2
Prompt:
よく⾒ると、ユーザーが操作する画⾯に、ユーザー登録画⾯がないようです。
それを加えて、ユーザーが操作する画⾯の画⾯遷移図を VS Code Markdown Mermaid Support で表⽰できる書式で作成してください。
GitHub Copilot:
• 申し訳ありません。確かに、ユーザー登録画⾯が抜けていました。以下が、ユーザー登録画⾯を含めた画⾯遷移図のコードです。
このコードをMarkdownファイルに貼り付け、VS Code Markdown Mermaid Support 拡張機能を有効にすると、画⾯遷移図が表⽰されます。
```mermaid
graph TD
A[ログイン画⾯] --> B[ユーザー登録画⾯]
B --> A
A --> C[試験⼀覧画⾯]
C --> D[試験詳細画⾯]
D --> E[試験受験画⾯]
E --> F{⼀次試験合格?}
F -- 合格 --> G[⼆次試験詳細画⾯]
G --> H[⼆次試験受験画⾯]
H --> I[試験結果画⾯]
F -- 不合格 --> I
C --> J[ユーザー情報画⾯]
J --> K[ログアウト]
```
上記のコードでは、ユーザー登録画⾯を追加し、ログイン画⾯からユーザー登録画⾯に遷移できるようにしています。
また、ログイン画⾯から試験⼀覧画⾯に遷移し、試験⼀覧画⾯から試験詳細画⾯、試験詳細画⾯から試験受験画⾯に遷移できるようにしています。
⼀次試験に合格した場合は、⼆次試験詳細画⾯に遷移し、⼆次試験を受験することができます。
⼀次試験に不合格の場合は、試験結果画⾯に遷移します。また、試験⼀覧画⾯からユーザー情報画⾯に遷移し、ユーザー情報画⾯からログアウトすることができます。
© 2023 VMware, Inc.

26

⼀次試験の多岐選択式試験のデータモデルの作成 - 3 Prompt: プレビューを表⽰します。 © 2023 VMware, Inc. 27

ユーザー登録画⾯のソースコード作成 - 1
Prompt:
•
今回は、Web アプリケーションを作ります。
•
Webクライアント側は、Blazor WebAssembly を使います。
•
Webサーバーは C# で実装します。
•
サービス側は、MAUI 等のネイティブクライアントにも対応できるように、ASP.NET minimal Web API で実装します。
•
先ほどのユースケースの以下の画⾯のコードを書いてください。
- ユーザー登録画⾯。
GitHub Copilot:

・以下が、Blazor WebAssemblyで実装したユーザー登録画⾯のコードです。このコードを Blazor
WebAssembly アプリケーションのページに貼り付けることで、ユーザー登録画⾯を実装することができます。

@code {
private User user = new User();
private string confirmPassword;
private string errorMessage;
private async Task HandleValidSubmit()
{
if (user.Password != confirmPassword)
{
errorMessage = "パスワードが⼀致しません。";
return;
}

```html
@page "/register"
<h1>ユーザー登録</h1>
@if (errorMessage != null)
{
<div class="alert alert-danger">@errorMessage</div>
}

// ユーザー登録処理を実⾏
var result = await Http.PostAsJsonAsync("/api/users", user);

<EditForm Model="@user" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />

if (result.IsSuccessStatusCode)
{
// 登録成功時の処理
NavigationManager.NavigateTo("/");
}
else
{
// 登録失敗時の処理
errorMessage = "ユーザー登録に失敗しました。";
}

<div class="form-group">
<label for="username">ユーザー名</label>
<InputText id="username" class="form-control" @bind-Value="user.Username" />
</div>
<div class="form-group">
<label for="password">パスワード</label>
<InputText id="password" class="form-control" type="password" @bind-Value="user.Password" />
</div>
<div class="form-group">
<label for="confirmPassword">パスワード（確認）</label>
<InputText id="confirmPassword" class="form-control" type="password" @bind-Value="confirmPassword" />
</div>
<button type="submit" class="btn btn-primary">登録</button>
</EditForm>

© 2023 VMware, Inc.

}
}
```
上記のコードでは、Blazor WebAssemblyのEditFormコンポーネントを使⽤して、ユーザー登録フォームを作成しています。
ユーザー名とパスワードを⼊⼒するフォームと、パスワードの確認⽤フォームを⽤意し、登録ボタンをクリックすることで、ユーザー登録処理を実⾏します。
パスワードが⼀致しない場合は、エラーメッセージを表⽰します。また、登録成功時はトップページに遷移し、登録失敗時はエラーメッセージを表⽰し
ます。

28

ユーザー登録画⾯のソースコード作成 - 2
Prompt: ログインする際に、この組織でUserの情報を持ちたくありません。メールやソーシャル連携などで実現したいです。そのようなコードに変更してください。
GitHub Copilot:
・了解しました。以下が、Blazor WebAssemblyで実装したユーザー登録画⾯のコードです。このコー
ドをBlazor WebAssemblyアプリケーションのページに貼り付けることで、ユーザー登録画⾯を実装する
ことができます。

@code {
private User user = new User();
private string confirmPassword;
private string errorMessage;
private async Task HandleValidSubmit()
{
if (user.Password != confirmPassword)
{
errorMessage = "パスワードが⼀致しません。";
return;
}

```html
@page "/register"
<h1>ユーザー登録</h1>
@if (errorMessage != null)
{
<div class="alert alert-danger">@errorMessage</div>
}

// ユーザー登録処理を実⾏
var result = await Http.PostAsJsonAsync("/api/users", user);
if (result.IsSuccessStatusCode)
{
// 登録成功時の処理
NavigationManager.NavigateTo("/");
}
else
{
// 登録失敗時の処理
errorMessage = "ユーザー登録に失敗しました。";
}

<button class="btn btn-primary" @onclick="HandleExternalLogin">外部アカウントで登録</button>
<EditForm Model="@user" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="form-group">
<label for="username">ユーザー名</label>
<InputText id="username" class="form-control" @bind-Value="user.Username" />
</div>

}

<div class="form-group">
<label for="password">パスワード</label>
<InputText id="password" class="form-control" type="password" @bind-Value="user.Password" />
</div>

private async Task HandleExternalLogin()
{
// 外部アカウントでのログイン処理を実⾏
var result = await Http.GetJsonAsync<ExternalLoginResult>("/api/externallogin");

<div class="form-group">
<label for="confirmPassword">パスワード（確認）</label>
<InputText id="confirmPassword" class="form-control" type="password" @bind-Value="confirmPassword" />
</div>

if (result.RedirectUri != null)
{
// 外部アカウントのログインページにリダイレクト
NavigationManager.NavigateTo(result.RedirectUri);
}
else
{
// エラーメッセージを表⽰
errorMessage = "外部アカウントでのログインに失敗しました。";
}

<button type="submit" class="btn btn-primary">登録</button>
</EditForm>

}
}
```

© 2023 VMware, Inc.

上記のコードでは、外部アカウントでのログイン機能を追加し、ユーザー名とパスワードを⼊⼒するフォームと、パスワードの確認⽤フォームを⽤意しています。
また、外部アカウントでのログインを⾏うためのボタンを追加し、クリックすることで外部アカウントのログインページにリダイレクトします。
ユーザー登録処理は、外部アカウントでのログイン処理が完了した後に⾏われます。

29

ユーザー登録画⾯のソースコード作成 - 3 Prompt: 上記に⽰していただいた Blazor WebAssembly で実装したユーザー登録画⾯のコードをこの VSCode でプレビューしたいで す。どのようにすれば良いですか︖ GitHub Copilot: ・Blazor WebAssemblyで実装したユーザー登録画⾯のコードをプレビューするには、Blazor WebAssemblyアプリケーションを作成す る必要があります。 以下の⼿順で、Blazor WebAssembly アプリケーションを作成し、上記のコードを実装することができます。 1. VSCode を開きます。※ → 新しい Window を開いて適当なフォルダを作成して保存する 2. 左側のメニューから「拡張機能」をクリックし、「Blazor WebAssembly」と検索します。 3. 「Blazor WebAssembly」という拡張機能をインストールします。 4. 「Ctrl + Shift + P」を押して、コマンドパレットを開きます。 5. 「Blazor: New Project」を選択し、Blazor WebAssembly アプリケーションを作成します。 6. 作成したアプリケーションのプロジェクトを開き、`Pages`フォルダ内に`Register.razor`という名前のファイルを作成します。 7. `Register.razor`ファイルに、上記のコードをコピー＆ペーストします。 8. アプリケーションを実⾏するには、`Ctrl + Shift + P`を押して、コマンドパレットを開き、「Blazor: WebAssembly Start」を選択します。 9. ブラウザが開き、アプリケーションが実⾏されます。`/register`にアクセスすると、ユーザー登録画⾯が表⽰されます。 以上の⼿順で、Blazor WebAssembly アプリケーションを作成し、上記のコードを実装することができます。 © 2023 VMware, Inc. 30

ユーザー登録画⾯の HTML コード作成
Prompt:ユーザー登録画⾯の HTML コードを書いてください。先ほどの Blazor WebAssembly のファイルを参照してください。Razor ファイルになるでしょうか︖
GitHub Copilot:
・はい、Blazor WebAssemblyでは、Razorファイルを使⽤してHTMLを記述します。
以下が、先ほどのBlazor WebAssemblyで実装したユーザー登録画⾯のRazorファイルのコードです。
```html
@page "/register"
<h1>ユーザー登録</h1>
@if (errorMessage != null)
{
<div class="alert alert-danger">@errorMessage</div>
}

@code {
private User user = new User();
private string confirmPassword;
private string errorMessage;
private async Task HandleValidSubmit()
{
if (user.Password != confirmPassword)
{
errorMessage = "パスワードが⼀致しません。";
return;
}
// ユーザー登録処理を実⾏
var result = await Http.PostAsJsonAsync("/api/users", user);

<button class="btn btn-primary" @onclick="HandleExternalLogin">外部アカウントで登録</button>

if (result.IsSuccessStatusCode)
{
// 登録成功時の処理
NavigationManager.NavigateTo("/");
}
else
{
// 登録失敗時の処理
errorMessage = "ユーザー登録に失敗しました。";
}

<EditForm Model="@user" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="form-group">
<label for="username">ユーザー名</label>
<InputText id="username" class="form-control" @bind-Value="user.Username" />
</div>
<div class="form-group">
<label for="password">パスワード</label>
<InputText id="password" class="form-control" type="password" @bind-Value="user.Password" />
</div>
<div class="form-group">
<label for="confirmPassword">パスワード（確認）</label>
<InputText id="confirmPassword" class="form-control" type="password" @bind-Value="confirmPassword" />
</div>
<button type="submit" class="btn btn-primary">登録</button>
</EditForm>

}
private async Task HandleExternalLogin()
{
// 外部アカウントでのログイン処理を実⾏
var result = await Http.GetJsonAsync<ExternalLoginResult>("/api/externallogin");
if (result.RedirectUri != null)
{
// 外部アカウントのログインページにリダイレクト
NavigationManager.NavigateTo(result.RedirectUri);
}
else
{
// エラーメッセージを表⽰
errorMessage = "外部アカウントでのログインに失敗しました。";
}
}
}
```
上記のコードでは、HTMLタグとBlazorコンポーネントを組み合わせて、ユーザー登録画⾯を実装しています。
`<h1>`タグで「ユーザー登録」という⾒出しを表⽰し、`<div>`タグでエラーメッセージを表⽰するようにしています。
また、`<button>`タグで外部アカウントでの登録を⾏うためのボタンを表⽰し、`<EditForm>`タグでユーザー名とパスワードを⼊⼒するフォームを表⽰してい
ます。最後に、`<button>`タグで登録ボタンを表⽰し、クリックすることで`HandleValidSubmit`メソッドが呼び出され、ユーザー登録処理が実⾏されます。

© 2023 VMware, Inc.

31

試験⼀覧画⾯の HTML コード作成と実⾏
Prompt:
•

試験⼀覧画⾯の HTML コードを書いてください。Blazor WebAssembly で実装します。

GitHub Copilot:
・以下が、Blazor WebAssemblyで実装した管理者画⾯の試験⼀覧画⾯のRazorファイルのコードです。
```html
@page "/admin/exams"
<h1>試験⼀覧</h1>
@if (exams == null)
{
<p>試験情報を読み込んでいます...</p>
}
else if (exams.Count == 0)
{
<p>試験情報がありません。</p>
}
else
{
<table class="table">
<thead>
<tr>
<th>試験名</th>
<th>試験⽇</th>
<th>受験者数</th>
<th>合格者数</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var exam in exams)
{
<tr>
<td><a href="/admin/exams/@exam.Id">@exam.Name</a></td>
<td>@exam.Date</td>
<td>@exam.TotalExaminees</td>
<td>@exam.TotalPasses</td>
<td><button class="btn btn-danger" @onclick="() => DeleteExam(exam)">削除
</button></td>
</tr>
}
</tbody>
</table>
}
© 2023 VMware, Inc.

@code {
private List<Exam> exams;
protected override async Task OnInitializedAsync()
{
// 試験情報を取得
exams = await Http.GetFromJsonAsync<List<Exam>>("/api/admin/exams");
}
private async Task DeleteExam(Exam exam)
{
// 試験を削除
var result = await Http.DeleteAsync($"/api/admin/exams/{exam.Id}");
if (result.IsSuccessStatusCode)
{
// 削除成功時の処理
exams.Remove(exam);
}
else
{
// 削除失敗時の処理
// エラーメッセージを表⽰
}
}
}
```
上記のコードでは、`@page`ディレクティブでページのURLを指定し、`<h1>`タグで「試験⼀覧」という⾒出しを表⽰しています。
また、`exams`変数に試験情報を格納し、`OnInitializedAsync`メソッドでAPIから試験情報を取得しています。
試験情報が読み込まれている間は「試験情報を読み込んでいます...」というメッセージを表⽰し、試験情報がない場合は「試験情報があ
りません。」というメッセージを表⽰します。試験情報がある場合は、`<table>`タグで試験情報を表⽰しています。
`@foreach`ディレクティブを使⽤して、試験情報を1つずつ表⽰しています。
試験名はリンクとして表⽰し、クリックすることで詳細画⾯に遷移するようにしています。
また、削除ボタンを表⽰し、クリックすることで`DeleteExam`メソッドが呼び出され、試験を削除する処理が実⾏されます。
32

試験⼀覧画⾯の登録ソースコード作成と実⾏ - 1
Prompt:
•
•

C#のコードに、試験⼀覧登録のロジックを追加します。
先ほど作成した Azure SQL Database の Exams テーブルにデータを登録するコードを追加してください。

GitHub Copilot:
・以下が、Blazor WebAssemblyで実装した管理者画⾯の試験⼀覧画⾯のRazorファイルのコードです。
```html
@page "/admin/exams"
<h1>試験⼀覧</h1>
@if (exams == null)
{
<p>試験情報を読み込んでいます...</p>
}
else if (exams.Count == 0)
{
<p>試験情報がありません。</p>
}
else
{
<table class="table">
<thead>
<tr>
<th>試験名</th>
<th>試験⽇</th>
<th>受験者数</th>
<th>合格者数</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var exam in exams)
{
<tr>
<td><a href="/admin/exams/@exam.Id">@exam.Name</a></td>
<td>@exam.Date</td>
<td>@exam.TotalExaminees</td>
<td>@exam.TotalPasses</td>
<td><button class="btn btn-danger" @onclick="() => DeleteExam(exam)">削除</button></td>
</tr>
}
</tbody>
</table>
}
© 2023 VMware, Inc.

@code {
private List<Exam> exams;
protected override async Task OnInitializedAsync()
{
// 試験情報を取得
exams = await Http.GetFromJsonAsync<List<Exam>>("/api/admin/exams");
}
private async Task DeleteExam(Exam exam)
{
// 試験を削除
var result = await Http.DeleteAsync($"/api/admin/exams/{exam.Id}");
if (result.IsSuccessStatusCode)
{
// 削除成功時の処理
exams.Remove(exam);
}
else
{
// 削除失敗時の処理
// エラーメッセージを表⽰
}
}
}
```
--上記のコードでは、`@page`ディレクティブでページのURLを指定し、`<h1>`タグで「試験⼀覧」という⾒出しを表⽰しています。
また、`exams`変数に試験情報を格納し、`OnInitializedAsync`メソッドでAPIから試験情報を取得しています。
試験情報が読み込まれている間は「試験情報を読み込んでいます...」というメッセージを表⽰し、試験情報がない場合は「試験情報
がありません。」というメッセージを表⽰します。
試験情報がある場合は、`<table>`タグで試験情報を表⽰しています。`@foreach`ディレクティブを使⽤して、試験情報を1つずつ表
⽰しています。
試験名はリンクとして表⽰し、クリックすることで詳細画⾯に遷移するようにしています。
また、削除ボタンを表⽰し、クリックすることで`DeleteExam`メソッドが呼び出されます。

33

試験⼀覧画⾯の登録ソースコード作成と実⾏ - 2
Prompt:
•

画⾯を実⾏したいです。今回はプロトタイピングが⽬的なのでハードコーディングしたサンプルデータでも問題ないです。

・了解しました。ハードコーディングされたサンプルデータを使⽤する場合、以下のように`OnInitialized`
メソッドを使⽤して、`exams`リストにデータを追加することができます。

else
{
<p>試験情報がありません。</p>
}

```aspnetcorerazor
@page "/exams"

@code {
private List<Exam> exams;

GitHub Copilot:

<h1>試験⼀覧</h1>
@if (exams != null)
{
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>試験名</th>
<th>試験⽇</th>
<th>受験者数</th>
<th>合格者数</th>
</tr>
</thead>
<tbody>
@foreach (var exam in exams)
{
<tr>
<td>@exam.Id</td>
<td>@exam.Name</td>
<td>@exam.Date.ToShortDateString()</td>
<td>@exam.TotalExaminees</td>
<td>@exam.TotalPasses</td>
</tr>
}
</tbody>
</table>
}
© 2023 VMware, Inc.

protected override void OnInitialized()
{
exams = new List<Exam>();
exams.Add(new Exam { Id = 1, Name = "試験1", Date = new DateTime(2022, 1, 1), TotalExaminees = 100,
TotalPasses = 80 });
exams.Add(new Exam { Id = 2, Name = "試験2", Date = new DateTime(2022, 2, 1), TotalExaminees = 120,
TotalPasses = 90 });
exams.Add(new Exam { Id = 3, Name = "試験3", Date = new DateTime(2022, 3, 1), TotalExaminees = 150,
TotalPasses = 120 });
exams.Add(new Exam { Id = 4, Name = "試験4", Date = new DateTime(2022, 4, 1), TotalExaminees = 200,
TotalPasses = 180 });
exams.Add(new Exam { Id = 5, Name = "試験5", Date = new DateTime(2022, 5, 1), TotalExaminees = 250,
TotalPasses = 200 });
exams.Add(new Exam { Id = 6, Name = "試験6", Date = new DateTime(2022, 6, 1), TotalExaminees = 300,
TotalPasses = 240 });
exams.Add(new Exam { Id = 7, Name = "試験7", Date = new DateTime(2022, 7, 1), TotalExaminees = 350,
TotalPasses = 280 });
exams.Add(new Exam { Id = 8, Name = "試験8", Date = new DateTime(2022, 8, 1), TotalExaminees = 400,
TotalPasses = 320 });
exams.Add(new Exam { Id = 9, Name = "試験9", Date = new DateTime(2022, 9, 1), TotalExaminees = 450,
TotalPasses = 360 });
exams.Add(new Exam { Id = 10, Name = "試験10", Date = new DateTime(2022, 10, 1), TotalExaminees = 500,
TotalPasses = 400 });
}
}
```
この修正により、`OnInitialized`メソッドを使⽤して、ハードコーディングされたサンプルデータを`exams`リストに追加し、試験⼀覧を表⽰す
ることができます。
34

試験⼀覧画⾯の登録ソースコード作成と実⾏ - 3 © 2023 VMware, Inc. 35

ユーザー登録画⾯の各コンポーネントのメッセージフローを作成 Prompt: • ユーザー登録画⾯の、各 コンポーネントのメッセージ フローを作成してください、 • 画⾯ (HTML) とBlazor WebAssembly、 Server 側のコード (ASP.NET Core Minimal Web API)、 データベース、をコンポーネ ントとして含めてください。 © 2023 VMware, Inc. 36

Azure Container Apps のインスタンスの作成⽤
Terraform コードの作成
Prompt:
これらのアプリケーションのコードをホスティングするのに Azure Container Apps を使います。Azure Container Apps のインスタンスの作成⽤の Terraform のコードを作成してください。

GitHub Copilot:
・了解しました。以下が、Azure Container Appsのインスタンスを作成するため
のTerraformコード例です。
```terraform
provider "azurerm" {
features {}
}
resource "azurerm_resource_group" "example" {
name = "example-resource-group"
location = "japaneast"
}
resource "azurerm_container_registry" "example" {
name
= "example-container-registry"
resource_group_name = azurerm_resource_group.example.name
location
= azurerm_resource_group.example.location
sku
= "Standard"
admin_enabled
= true
}

resource "azurerm_container_app" "example" {
name
= "example-container-app"
resource_group_name = azurerm_resource_group.example.name
location
= azurerm_resource_group.example.location
container_image = "example-container-registry.azurecr.io/example-image:latest"
environment_variables = {
"ASPNETCORE_ENVIRONMENT" = "Production"
}
app_settings = {
"WEBSITES_PORT" = "80"
}
depends_on = [
azurerm_container_registry.example
]
}
```
上記のコードでは、Azure Container Appsのインスタンスを作成するために、以下のリソースを定義しています。
- `azurerm_resource_group`: リソースグループを作成します。
- `azurerm_container_registry`: コンテナレジストリを作成します。
- `azurerm_container_app`: コンテナアプリを作成します。
コンテナアプリの`container_image`プロパティには、コンテナイメージのURLを指定します。
また、`environment_variables`プロパティには、環境変数を設定することができます。
上記の例では、ASP.NET Coreの環境変数を設定しています。
`app_settings`プロパティには、アプリケーション設定を設定することができます。
上記の例では、ポート番号を設定しています。
なお、上記のコードを実⾏する前に、Azure CLIをインストールし、ログインしておく必要があります。
また、TerraformのAzureプロバイダーをインストールする必要があります。

© 2023 VMware, Inc.

37

Tanzu Application Platform on AKS
のインスタンスの作成⽤ Terraform コードの作成
Prompt:
•

先ほどの Azure Container Apps の代わりに、Tanzu Application Platform on AKS で実⾏する場合のインスタンスの作成⽤の Terraform のコードを作成してください。

GitHub Copilot:
・了解しました。以下が、Tanzu Application Platform on AKSで実⾏する場合のインスタンスを作成するためのTerraformコード例です。
```terraform
provider "azurerm" {
features {}
}
resource "azurerm_resource_group" "example" {
name = "example-resource-group"
location = "japaneast"
}
resource "azurerm_kubernetes_cluster" "example" {
name
= "example-kubernetes-cluster"
location
= azurerm_resource_group.example.location
resource_group_name = azurerm_resource_group.example.name
dns_prefix
= "example-kubernetes-cluster"
linux_profile {
admin_username = "azureuser"
ssh_key {
key_data = "ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC6..."
}
}
agent_pool_profile {
name
= "example-agent-pool"
count
=1
vm_size
= "Standard_D2_v2"
os_type
= "Linux"
os_disk_size_gb = 30
}
service_principal {
client_id = "00000000-0000-0000-0000-000000000000"
client_secret = "00000000-0000-0000-0000-000000000000"
}
depends_on = [
azurerm_resource_group.example
]
}
© 2023 VMware, Inc.

resource "tanzu_application_platform_cluster" "example" {
name
= "example-tap-cluster"
kubernetes_endpoint = azurerm_kubernetes_cluster.example.kube_config.0.host
kubernetes_ca_certificate =
base64decode(azurerm_kubernetes_cluster.example.kube_config.0.cluster_ca_certificate)
kubernetes_admin_username = azurerm_kubernetes_cluster.example.linux_profile.0.admin_username
kubernetes_admin_password =
azurerm_kubernetes_cluster.example.linux_profile.0.ssh_key.0.key_data
depends_on = [
azurerm_kubernetes_cluster.example
]
}
```
上記のコードでは、Tanzu Application Platform on AKSで実⾏するために、以下のリソースを定義しています。
- `azurerm_resource_group`: リソースグループを作成します。
- `azurerm_kubernetes_cluster`: Kubernetesクラスタを作成します。
- `tanzu_application_platform_cluster`: Tanzu Application Platformクラスタを作成します。
Kubernetesクラスタの`agent_pool_profile`プロパティには、エージェントプールの設定を指定します。
また、`service_principal`プロパティには、サービスプリンシパルの設定を指定します。
Tanzu Application Platformクラスタの`kubernetes_endpoint`プロパティには、Kubernetesクラスタのエンドポイントを指定し
ます。
また、`kubernetes_ca_certificate`プロパティには、KubernetesクラスタのCA証明書を指定します。
`kubernetes_admin_username`プロパティには、Kubernetesクラスタの管理者ユーザー名を指定します。
`kubernetes_admin_password`プロパティには、Kubernetesクラスタの管理者パスワードを指定します。
なお、上記のコードを実⾏する前に、Azure CLIをインストールし、ログインしておく必要があります。
また、TerraformのAzureプロバイダーをインストールする必要があります。

38

Azure Spring Apps のインスタンスの作成⽤
Terraform コードの作成
Prompt:
先ほどの Tanzu Application Platform on AKS の代わりに、Azure Spring Apps で実⾏する 場合のインスタンスの作成⽤の Terraform のコードを作成してください。

GitHub Copilot:
・了解しました。以下が、Azure Spring Appsで実⾏する場合のインスタンスを作成するための
Terraformコード例です。
```terraform
provider "azurerm" {
features {}
}
resource "azurerm_resource_group" "example" {
name = "example-resource-group"
location = "japaneast"
}
resource "azurerm_app_service_plan" "example" {
name
= "example-app-service-plan"
location
= azurerm_resource_group.example.location
resource_group_name = azurerm_resource_group.example.name
kind
= "Linux"
reserved
= true
sku {
tier = "Basic"
size = "B1"
}
}

resource "azurerm_app_service" "example" {
name
= "example-app-service"
location
= azurerm_resource_group.example.location
resource_group_name = azurerm_resource_group.example.name
app_service_plan_id = azurerm_app_service_plan.example.id
site_config {
linux_fx_version = "DOCKER|example-container-registry.azurecr.io/example-image:latest"
}
app_settings = {
"SPRING_PROFILES_ACTIVE" = "production"
}
depends_on = [
azurerm_app_service_plan.example
]
}
```
上記のコードでは、Azure Spring Appsで実⾏するために、以下のリソースを定義しています。
- `azurerm_resource_group`: リソースグループを作成します。
- `azurerm_app_service_plan`: App Serviceプランを作成します。
- `azurerm_app_service`: App Serviceを作成します。
App Serviceプランの`sku`プロパティには、プランの設定を指定します。また、App Serviceの`site_config`プロパティには、コンテナ
イメージのURLを指定します。上記の例では、Dockerコンテナを指定しています。`app_settings`プロパティには、アプリケーション設
定を設定することができます。上記の例では、Springのプロファイルを設定しています。
なお、上記のコードを実⾏する前に、Azure CLIをインストールし、ログインしておく必要があります。また、TerraformのAzureプロバイ
ダーをインストールする必要があります。

© 2023 VMware, Inc.

39

まとめ Confidential │ © 2021 VMware, Inc. 40

Agenda まとめ l 今回の実⾏環境等について l プロトタイピングの実施 l ダイアグラム作成 l データモデル作成 l サンプルデータ作成 l エンティティ作成・修正 l 画⾯作成 l サンプルデータ実装 l 画⾯の作成と実⾏ l コードのデプロイ準備 ©2023 VMware, Inc. 41

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 が ベース • コードエディタ内で、プログラマが コメントを記述するとそれに基づき コードを⾃動⽣成する機能等を 提供 • GitHub Copilot X では、強化 された AI である GPT-4 を⽤い、 さらに⾼い精度でのコード⽣成や バグの指摘などを始めとする様々 な新機能を備える © 2023 VMware, Inc. 42

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

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