Building React, Flutter and Blazor development and debugging environment with using VSCode

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

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

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

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

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

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

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

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

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

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

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

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

Flutter + Firebase サンプルアプリ (CQRS)
Cloud
Function
Firebase
Firestore
Elastic Cloud
プロジェクト
northeast1-b リージョン
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

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

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

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

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

今回のデモアプリのイメージ
Azure
SQL Database
Elastic Cloud
東⽇本リージョン
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

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

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実施）アーカイブでご覧ください︕

コードファーストによる 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;
}
}

コードファーストによる 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 データベースとテーブル作成

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 ベース、拡張機能使⽤可能︕

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

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

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 でいち早く欲しい︕

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

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

今回のデモアプリのイメージ
Azure
SQL Database
Elastic Cloud
東⽇本リージョン
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

// .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
}
}

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

Building React, Flutter and Blazor development and debugging environment with using VSCode

Recommended

More Related Content

What's hot (20)

Similar to Building React, Flutter and Blazor development and debugging environment with using VSCode (20)

More from Shotaro Suzuki (20)

Recently uploaded (7)

Building React, Flutter and Blazor development and debugging environment with using VSCode