FUN FAN FSharp で登壇した際の .NET 7 での ASP.NET Core Blazor の新機能についての説明資料です。

1. .NET 7 での
ASP.NET Core Blazor の
新機能ピックアップ
2022/10/29
【7回】.NET 7 x FUN FAN F# | Hybrid
大田 一希

2. 自己紹介
• 名前 : 大田 一希（かずき）
• Twitter : @okazuki
• 仕事 : 日本マイクロソフト
クラウド ソリューション アーキテクト エンジニアリング
• 一言
• 今日は C# のほうから来ました。
• Blog など
• かずきのBlog@hatena
https://blog.okazuki.jp/
• Qiita
https://qiita.com/okazuki
• Zenn
https://zenn.dev/okazuki
• 趣味 : スマブラSP 2480 時間、プログラミング
名刺に印刷するときに
入りきらないと噂

3. 本セッションの目的
.NET 7 の Blazor の新機能を使ってみたくなってもらう！

4. かなりハードな目標…
新機能が結構地味…

5. 目次
• ローディング画面の新機能
• データ バインディングの新機能
• コンポーネントの仮想化の新機能
• ナビゲーションの新機能
• まとめ

6. ローディング画面の新機能
.NET 6 の ASP.NET Core Blazor WebAssembly のデフォルトの
ローディング画面

7. .NET 7 のローディング画面
それっぽさ 2 倍以上

8. ローディング画面の新機能
.NET 7 では以下の CSS のカスタム プロパティが提供される
• --blazor-load-percentage
• アプリのファイルがロードされたパーセンテージ
• --blazor-load-percentage-text
• アプリのファイルがロードされたパーセンテージの小数点を四捨五入
したテキスト

9. データ バインディング
最近の UI フレームワークは、ほぼ標準搭載している機能
×
Test
× × × × × ×
検索
▲
▼
〇×△〇×△〇×△〇×△〇×△
〇×△〇×△〇×△〇×△〇×△
〇×△〇×△〇×△〇×△〇×△
〇×△〇×△〇×△〇×△〇×△
〇×△〇×△〇×△〇×△〇×△
〇×△〇×△〇×△〇×△〇×△
Page1
Page1
string Query { get; set; }
IEnumerable<Result> Results { get; set; }
UI の値とクラスのプロパティを紐づける機能

10. データバインディングの新機能
@bind:after が地味に便利
• UI からの値の変更後に呼ばれるメソッドが設定できる
×
Test
× × × × × ×
検索
▲
▼
〇×△〇×△〇×△〇×△〇×△
〇×△〇×△〇×△〇×△〇×△
〇×△〇×△〇×△〇×△〇×△
〇×△〇×△〇×△〇×△〇×△
〇×△〇×△〇×△〇×△〇×△
〇×△〇×△〇×△〇×△〇×△
Page1
Page1
string Query { get; set; }
void SearchItems() { … }
①値の更新
@bind="Query" @bind:after="SearchItems"
Test edited
②メソッドの呼び出し

11. @bind:after の使いどころ
大カテゴリー→中カテゴリー→小カテゴリーを選ぶ機能に最適

12. 双方向バインド対応コンポーネントを作る
以下の 2 つのプロパティをペアで公開
• 読み書き可能な値を保持するためのプロパティを公開
• プロパティ名Changed という名前の EventCallback<T> 型のプロパティを公開
• プロパティの値に変更があったときに EventCallback<T> を呼び出す
素直に実装した場合
新機能を使った場合
<input value="@Value"
@onchange="e => ValueChanged.InvokeAsync(e.Value as string ?? string.Empty)" />
<input @bind:get="Value" @bind:set="ValueChanged" />
よくあるケースなのにコードがメンドクサイ

13. コンポーネントの仮想化の新機能
.NET 6 から Virtualize コンポーネントで仮想化が可能
• 大量のデータをスクロールさせて表示されるときの効率アップ
.NET 7 で SpacerElement プロパティが追加
• 仮想化時に上下に表示させるダミーのエレメントのタグ名を指定
• デフォルトは div タグ

14. 画面遷移前の確認が出来るように
• こんな機能が簡単に作れるようになる機能が追加

15. NavigationLock コンポーネント
NavigationLock コンポーネントを置くと画面遷移に割り込める
• OnBeforeInternalNavigation プロパティ
• アプリ内画面遷移時に呼び出される
• 引数の LocationChangingContext の PreventNavigation を呼ぶと画面
遷移をキャンセル可能
• ConfirmExternalNavigation プロパティ
• true を設定すると外部サイトへの画面遷移前に確認ダイアログが出る

16. 画面遷移時に状態を渡せるようになった
今まで
• クエリ パラメーターに渡したい情報を設定
• メモリ上などに情報を設定
• その他の永続化ストレージに情報を設定
• など
今回追加されたもの
• HistoryEntryState プロパティで文字列型のデータを受け渡し可能

17. HistoryEntryState の使い方
渡す側
• NavigationManager の NavigateTo メソッドの第二引数に渡す
NavigationOptions に設定
受け取る側
• NavigationManager の HistoryEntryState を参照する
_navigationManager.NavigateTo("/counter",
new NavigationOptions
{
HistoryEntryState = "10",
});
string? state = _navigationManager.HistoryEntryState;

18. 便利なポイント
ブラウザーの戻るボタンに対応！！！
クエリパラメーターと違ってユーザーが気軽に
変更できない

19. その他気になるところ
• Blazor WebAssembly の認証まわりの改善
• login_hint 付きで画面を表示したりとかが簡単に
• など
• 実験的機能で Blazor WebAssembly でマルチスレッド対応
• Blazor 抜きで WebAssembly で .NET が使えるように

20. まとめ
• 結構地味な新機能達
• ローディング画面
• データバインディング
• 仮想化
• ナビゲーション
• 痒い所に手が届く系機能の充実
• Blazor 自体がこなれてきてる

21. ありがとうございました
地味に便利な機能を使って快適な Blazor 生活を