.NET 7 での ASP.NET Core Blazor の新機能ピックアップ
?
0 likes?731 views
FUN FAN FSharp で登壇した際の .NET 7 での ASP.NET Core Blazor の新機能についての説明資料です。
.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 の新機能を使ってみたくなってもらう！
- 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 ②メソッドの呼び出し
- 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 タグ
- 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;
- 19. その他気になるところ ? Blazor WebAssembly の認証まわりの改善 ? login_hint 付きで画面を表示したりとかが簡単に ? など ? 実験的機能で Blazor WebAssembly でマルチスレッド対応 ? Blazor 抜きで WebAssembly で .NET が使えるように
- 20. まとめ ? 結構地味な新機能達 ? ローディング画面 ? データバインディング ? 仮想化 ? ナビゲーション ? 痒い所に手が届く系機能の充実 ? Blazor 自体がこなれてきてる