https://vscode.connpass.com/event/231495/ "React/Flutter/Blazor の開発・デバッグ環境を VSCode でサクッと構築する"

1. React, Flutter, Blazor の開発・デバッグ
環境を VSCode でサクッと構築する
鈴⽊ 章太郎
Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト
デジタル庁 省庁業務グループ ソリューションアーキテクト

2. Elastic
Technical Product Marketing
Manager/Evangelist
デジタル庁
省庁業務グループ
ソリューションアーキテクト
元 Microsoft Technical Evangelist
Twitter : @shosuz
Shotaro Suzuki
MS Eva 時代は、WPF
→ Silverlight → Azure
Mobile Apps/Xamarin,
HoloLens (初代)…etc.

3. l React / React Native の開発・デバッグ環境構築
l Flutter の開発・デバッグ環境構築
l Blazor の開発・デバッグ環境構築
l まとめ
アジェンダ

4. React/React Native の
開発・デバッグ環境構築

5. Expo Tools
https://marketplace.visualstudio.com/items?itemName=byCedric.vscode-expo
特徴
•app.jsonまたは
app.config.jsonマニフェストの
オートコンプリートと検証
•⾃動構成プラグインの検証と
IntelliSense
コマンド
Expo を最⼤限に活⽤するのに
役⽴つコマンドもいくつか⽤意

6. Prettier
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• 独創的なコードフォーマッター
• コードを解析し、最⼤⾏⻑を
考慮した独⾃のルールを使⽤
してコードを再印刷し、必要
に応じてコードをラップすること
により⼀貫したスタイルを適⽤

7. React Native + Firebase サンプルアプリ (CQRS)
Cloud
Function
Firebase
Firestore
Elastic Cloud
プロジェクト
northeast1-b リージョン
マスターノード x 1
データノード x 2
ML ノード x 1
https://google-cloud-day-
digital-2021.es.asia-
northeast1.gcp.cloud.es.io
:9243
検索結果
全⽂検索クエリ
データ保存
Cloud Function で同期
VSCode
iOS / Android
Mobile App
React
Native
Elastic
APM
Agent

8. Flutter の開発・デバッグ環境構築

9. Flutter v3.29.0
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
Flutter モバイルアプリの効果的
な編集、リファクタリング、実⾏、
及びリロードのサポートと、Dart
プログラミング⾔語サポートを追加

10. Material Icon Theme
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
マテリアルデザインアイコンを
VSCode に取り込み

11. Flutter Tree
https://marketplace.visualstudio.com/items?itemName=marcelovelasquez.flutter-tree
• コードを書く前にUIの実装イメージが
固まっているのが前提
• わずか1⾏で複雑なレイアウトを⼀気
に書ける

12. Flutter Widget Snippets
https://marketplace.visualstudio.com/items?itemName=alexisvt.flutter-snippets
• よく使う Widget を⾼速で挿⼊可能
• Column とか Row 等、よく使うものの
Children…と続けるのは⾯倒

13. Flutter + Firebase サンプルアプリ (CQRS)
Cloud
Function
Firebase
Firestore
Elastic Cloud
プロジェクト
northeast1-b リージョン
マスターノード x 1
データノード x 2
ML ノード x 1
https://google-cloud-day-
digital-2021.es.asia-
northeast1.gcp.cloud.es.io
:9243
検索結果
全⽂検索クエリ
データ保存
Cloud Function で同期
VSCode
iOS / Android
Mobile App
Flutter

14. Blazor の開発・デバッグ環境構築

15. Modern Web UI with .NET & Blazor
Server WebAssembly Hybrid
HTML、CSS、.NET、C#... JavaScript の代わりに Open Web 標準でアプリ開発
どこにでもホストできる

16. Blazor を使⽤して Web アプリをビルドする
https://docs.microsoft.com/ja-jp/learn/modules/build-blazor-webassembly-visual-studio-code/
拡張機能ではないが
この Learn は最初にやるのがおすすめ

17. Microsoft.AspNetCore.Razor.VSCode.
BlazorWasmDebuggingExtension
https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.blazorwasm-companion
• C＃拡張機能のコンパニオン
拡張機能
• VSCode で Blazor
WebAssembly をデバッグ
するためのエクスペリエンスに
いくつかの改善をもたらす
• この拡張機能は、単独で
インストールするべきではなく、
C＃拡張機能が⾃動的に
インストールされる

18. 今回のデモアプリのイメージ
Azure
SQL Database
Elastic Cloud
東⽇本リージョン
マスターノード x 1
データノード x 2
ML ノード x 1
https://f79...c67.japaneast
.azure.elastic-
cloud.com:9243/
全⽂検索クエリ
CRUD
検索・更新 UI
Blazor
WebAssembly
Azure サブスクリプション
VSCode
Azure
App Service
Elastic APM
Endpoint に送信
Azure
Data Explorer
ASP.NET 6
Web API
APM .NET Agent
AntDesign

19. .NET MAUI Blazor App - モバイル、デスクトップ、
Web ハイブリッドアプリを開発
https://qiita.com/shosuz/items/4218af93343e5cc999ec
このデモアプリを元に、 ⾃分が持って
いる Elastic の books index に
対応したデモを作ろうとしていたところ、

20. ASP.NET Core Blazor WebAssembly と Web API と Entity Framework
Core で SQL Server のデータを取得したり追加したり更新したり削除したりする
[.NET 6 版]
https://qiita.com/tamtamyarn/items/876a5cd4b9ec9cdc1044
ちょうどこちらのエントリを発⾒︕
とても良い実装なので、参考にさせて
いただきます︕Special Thanks!
詳しくは、.NET ラボ 12⽉ (12/18実施）アーカイブでご覧ください︕

21. コードファーストによる Azure SQL Database ⽣成
• Microsoft.EntityFrameworkCore.SqlServer
• Microsoft.EntityFrameworkCore.Tools
• Elastic.Apm.NetCoreAll
• プロジェクトに Models フォルダを作成し、 book
クラスを作成
• Book.cs に右のコードを記載
public class Book
{
public int BookId { get; set; }
public string Title { get; set; }
public string ThumbnailUrl { get; set; }
public string Isbn { get; set; }
public string Author { get; set; }
public string Category { get; set; }
public Book
(int bookId, string title, string thumbnailUrl,
string isbn, string author, string category)
{
BookId = bookId;
Title = title;
ThumbnailUrl = thumbnailUrl;
Isbn = isbn;
Author = author;
Category = category;
}
}

22. コードファーストによる Azure SQL Database ⽣成 2
{
"ConnectionStrings": {
"DefaultConnection":
"Server=tcp:xxx.database.windows.net,1433;Initial Catalog=BlazorWasmDb;Persist
Security Info=False;User ID=(UserID);Password=(Password);
MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;"
},
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*"
}
Add-Migration -Name Initial // Migrations フォルダーと Migration クラス作成
Update-Database // Azure SQL データベースとテーブル作成

23. Azure Data Studioを使⽤して
新しいデータベースを確認、データを追加
INSERT INTO Books(Title,ThumbnailUrl,Isbn,Author,Category)VALUES(N'Unlocking Android',N'https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumb-
images/ableson.jpg',N'1933988673',N'W. Frank Ableson, Charlie Collins, Robi Sen',N'Open Source, Mobile');
INSERT INTO Books(Title,ThumbnailUrl,Isbn,Author,Category)VALUES(N'ASP.NET Core 6.0 in Practice',N'https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.bo
ok-thumb-images/bochicchio.jpg',N'1935182463',N'Daniele Bochicchio, Stefano Mostarda',N'Microsoft .NET');
INSERT INTO Books(Title,ThumbnailUrl,Isbn,Author,Category)VALUES(N'Brownfield Application Development in .NET',N'https://s3.amazonaws.com/AKIAJC5RL
ADLUMVRPFDQ.book-thumb-images/baley.jpg',N'1933988711',N'Kyle Baley, Donald Belcham',N'Microsoft');
INSERT INTO Books(Title,ThumbnailUrl,Isbn,Author,Category)VALUES(N'MongoDB in Action',N'https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumb-
images/banker.jpg',N'1935182870',N'Kyle Banker',N'Next Generation Databases');
INSERT INTO Books(Title,ThumbnailUrl,Isbn,Author,Category)VALUES(N'jQuery in Action',N'https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumb-
images/bibeault.jpg',N'1933988355',N'Bear Bibeault, Yehuda Katz',N'Web Development');
VSCode に近い Electron ベース、拡張機能使⽤可能︕

24. AntDesign
• ⼈気 No.1 on
Awesome Blazor
• 企業向け製品のための
デザインシステム
• 効率的で楽しいワーク
エクスペリエンスを実現
https://antblazor.com/en-US/
Install-Package -ProjectName BlazorWASMApp.Client -Id AntDesign

25. AntDesign
• Components
• Image の使⽤⽅法を
参照
• Source Code 利⽤
可能
https://antblazor.com/en-US/components/image
この辺りの拡張機能、VSCode でいち早く欲しい︕

26. Blazor WebAssembly の Hot Reload
https://docs.microsoft.com/ja-jp/aspnet/core/test/hot-reload?view=aspnetcore-6.0
In Visual Studio 2022 GA (17.0), Hot Reload is only
supported when running without the debugger.
この辺りの拡張機能、VSCode でいち早く欲しい︕

27. Jaguʻeʼr Cloud Native #3
みんなで語り合おう︕クラウドネイティブLT祭り
https://jaguer-cloud-native.connpass.com/event/231835/
Jaguʼeʼr 会員企業所属のみです。ごめんなさい︕

28. Thank you for your attention!

29. Elastic APM によるアプリケーションの監視

30. 今回のデモアプリのイメージ
Azure
SQL Database
Elastic Cloud
東⽇本リージョン
マスターノード x 1
データノード x 2
ML ノード x 1
https://f79...c67.japaneast
.azure.elastic-
cloud.com:9243/
全⽂検索クエリ
CRUD
検索・更新 UI
APM .NET Agent
Blazor
WebAssembly
Azure サブスクリプション
Visual
Studio
2022
Azure
App Service
Elastic APM
Endpoint に送信
Azure
Data Explorer
ASP.NET 6
Web API
AntDesign

31. // .NETアプリへの Nuget パッケージインストール
dotnet add Elastic.Apm.NetCoreAll
Install-Package -ProjectName BlazorWASMApp.Server -Id Elastic.Apm.NetCoreAll
Elastic APM for ASP
.NET Core
https://www.elastic.co/jp/apm/
Configuration on .NET Core
https://www.elastic.co/guide/en/apm/agent/dotnet/current/configuration-on-asp-net-core.html
ASP
.NET Core Quick Start
https://www.elastic.co/guide/en/apm/agent/dotnet/current/setup-asp-net-core.html
// Program.cs へ
の
追加
---
using Elastic.Apm.NetCoreAll;
//Elastic APM 追加
app.UseAllElasticApm(builder.Configuration);
app.UseHttpsRedirection();
app.UseBlazorFrameworkFiles();
app.UseStaticFiles();
---
// appsettings.json の
更新
---
{
"Logging": {
"LogLevel": {
//"Default": "Information",
//"Microsoft": "Warning",
//"Microsoft.Hosting.Lifetime": "Information"
"Default": "Warning",
"Elastic.Apm": "Debug"
}
} ,
"AllowedHosts": " * " ,
//Elastic ポ
ー
タ
ル
か
ら APM エ
ン
ド
ポ
イ
ン
ト
とSecret を
コ
ピ
ー
＆
ペー
ス
ト
"ElasticApm": {
"ServerUrl":
"https://
7d39255475bg8e8e0j99fm870kj48v88.apm.
japaneast.azure.elastic-cloud.com",
"SecretToken": ”f6p81KJytBcGMK2JKS4",
"TransactionSampleRate": 1.0
}
}

32. Elastic Cloud → Kibana で APM モニタリング
https://cloud.elastic.co/home