.NET 8世代のBlazorにつ いて 株式会社SAKURUG プロダクトDiv 草場 友光 .NETラボ 2023年11月

自己紹介 • 普段は主にシステムをAzureにモダナ イズする仕事をしています。 • コミュニティ活動を通じて知識をアッ プデートしています。 • 2022/08-2024 Microsoft MVP (Developer Technologies) • tomo_kusaba

宣伝 【VISION】ひとの可能性を開花させる企業であり続ける VISIONに共感できる仲間募集中。

注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • #dotnetlabでtweetすると左側に表示されます

今日の目的 • .NET 8がリリースされました。 • なかでも、BlazorはBlazor Web Appsが加わるという大きな 変更があります。 • これまでのBlazorを振り返るとともにこれからのBlazorアプリ 開発のあり方について探っていきましょう。

Blazor Server • サーバ上で実行 • UIの更新、イベント処理、 JavaScriptの呼び出しなど はSignalR接続経由で処理 • オフラインサポートがない • 常に回線接続が必要 • ASP.NET Coreサーバが必 要

Blazor WebAssembly • クライアント側の WebAssemblyベース の.NETランタイム上でコン ポーネントを実行 • スタンドアロンBlazor WebAssemblyの場合 ASP.NET Coreサーバが必 要ありません。CDNから配信 することが可能 • ダウンロードサイズが大きい

Blazor Serverでアプリを作る問題点 • アプリケーションがサーバーから離れられない。 • 回線が切れると即時アプリケーションが停止する。

Blazor WASMでアプリを作る問題点 • Blazor WASMのみでは実用的なアプリにならない。必ず WebAPIなどのデータソースと組み合わせる必要あり。 • WebAPI≒RESTAPIの知識が不可欠 • 多くはWebAPIとBlazor WASMを一体として設計する Hostedですすめていた。 • 当然、求められる知識はServerに比べて多い。

Blazor WebAssembly テンプレートの変更点 • Blazor WebAssembly ASP.NET Core Hostedのプロ ジェクトテンプレートは廃止 • これに伴い、認証認可のドキュメントも.NET 8のドキュメントから は同プロジェクトテンプレートに基づいた記述が消えている • もちろん同じやり方でできないかと言われれば多分できる(未検 証） • .NET 6,7のテンプレから.NET 8にアップグレードするのが早い？

プライマリーコンストラクタ • クラスの直後に()をつけてパラメータを書くことでコンストラクタ を簡単にかけるようになりました。 • DIサービスとなるクラスに他のサービスが必要になる場合がユー スケースになります。

フルスタックWeb UI

レンダーモード 名前 説明 場所 インタラクティブ プロジェクト スタティック 静的サーバーレンダリン グ(SSR) サーバー × サーバー 対話型サーバ Blazor Serverを利用 したサーバーレンダリン グ サーバー ○ サーバー 対話型 WebAssembly Blazor WebAssemblyを利用 したクライアントレンダリ ング クライアント ○ クライアント 対話型自動 最初にBlazor Server を利用しその後後続のア クセスにBlazor WebAssemblyを利用 する対話型クライアントレ ンダリング クライアント ○ クライアント

レンダーモード 名前 説明 場所 インタラクティブ プロジェクト スタティック 静的サーバーレンダリン グ(SSR) サーバー × サーバー 対話型サーバ Blazor Serverを利用 したサーバーレンダリン グ サーバー ○ サーバー 対話型 WebAssembly Blazor WebAssemblyを利用 したクライアントレンダリ ング クライアント ○ クライアント 対話型自動 最初にBlazor Server を利用しその後後続のア クセスにBlazor WebAssemblyを利用 する対話型クライアントレ ンダリング クライアント ○ クライアント 1 2 3

1の選択肢 • 従来のBlazor Server的な選択肢 • 最も開発効率が高い • 従来のBlazor Serverに比べてSSRにして回線接続が切れれば サーバー負荷の軽減が狙える。 • イントラネット内での使用など比較的安定した環境で使用する場 合では第一選択肢

2の選択肢 • 従来のBlazor WebAssembly的な選択肢 • 従来のBlazor WebAssemblyの場合ASP.NET Core Hostedの後継として検討 • WebAPIは別サーバとして用意 • インターネットに広くサービスを公開する場合には第一選択肢

3の選択肢 • 2の亜種 • 全く新しい選択肢 • 基本的な構築方法としては2と同様

Blazor スキャフォールディング(Preview) • Entity Framework Coreのモデルに基づいてCRUDページ を生成する。 • Blazor静的サーバーレンダリングのページを生成する。 • サーバー側のレンダリングに基づいているのでWebAssembly で実行する場合はサポートされません。 • QuickGridを使用してデータを表示します。

デモ

.NET Aspire • 回復性・可観測性・構成可能なクラウドネイティブアプリケーション を.NETで構築するためのアプリケーションスタック。 • サービス検出・テレメトリ・回復性・ヘルスチェックの機能を使用で きます。 • 時間の限り紹介

デモ

参考文献 • ASP.NET Core Blazor • Announcing ASP.NET Core in .NET 8 • Introducing .NET Aspire: Simplifying Cloud-Native Development with .NET 8 • .NET Aspire overview

おしまい おしまい