C# Tokyo .NET Conf 2022直後 .NETラボ合同イベント .NET 7におけるBlazorの新機能

1. .NET 7におけるBlazor
の新機能
株式会社SAKURUG
エンジニアリングユニット
草場 友光
C# Tokyo .NET Conf 2022直後 .NETラボ合同イベント

2. 自己紹介
• 普段は主にWebFormsアプリの保守の
お仕事をしてます。
• 古めのシステムが多いので時代に取り
残されぬよう新しい技術を一つでも入
れるよう日々努力しています。
• 2022/08-2023 Microsoft MVP
(Developer Technologies)
• tomo_kusaba

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

4. 注意
• 個人の見解・解釈が多分に入っています。
• 見解の相違・事実誤認などありましたらご指摘ください。

5. 今日の目的
• .NET 7がとうとうリリースされました。
• 今回は、Blazorにフォーカスして新しい機能をキャッチアップ
していきたいと思います

6. 主な項目
• 新しいローディング画面
• データバインディング
• 仮想化の改善
• ナビゲーションの改善

7. 位置づけについて
C# 11としての新文法
.NET 7のフレームワークとしての新機能
ASP.NET Coreとしての新機能
Blazorの新機能
今回のフォーカスポイント
とはいえ、こっちも外せな
い
とはいえ、こっちも外せな
い
とはいえ、こっちも外せない

8. 新機能一覧・・・
• Githubをみると書いてる
https://github.com/dotnet/aspnetcore/issues/39504

9. STSサポート
• 従来Currentサポートと言われていたものを名称変更
• LTS(Long Term Support)に対してSTS(Short Standard
Term Support)
• サポート期間はリリース日から18ヶ月間
STS
ん？

10. サポート名称の名称混乱！？
.NET 7 Preview 6アナウンスブログより
.NET 7 RC2アナウンスブログより

11. ホットリロードの改善
• Blazor WebAssemblyのデバッグ時にホットリロードできるよ
うになった
• .NET 6でもホットリロードできる

12. 新しいローディング画面

13. 新しいローディング画面
• CSSスタイルの以下の値でローディング状況が提供されている。
• --blazor-load-percentage
• --blazor-load-percentage-text
• HTML＋CSSでローディング画面を自作することが今までより
簡単に可能となっている。
• →試してみた！

14. 新しいローディング画面の自作

15. データバインディング(bind-after)
• テキストボックスの値を更新してフォーカスが外れたときによ
びだすメソッドを指定することができる
• 今まではonchangeイベントを使用して実装していたものがよ
り楽になった。

16. 仮想化の改善
• Blazorではスクロール領域の高さを定義するスペーサー要素に
「div」要素を使用している
• ただし、親要素で子要素が許可されない場合がある。
• そのため、newパラメータを使用してスペーサ要素を構成でき
るようになった。(地味)

17. ナビゲーションの改善
• 画面遷移に割り込んでキャンセルできる機能
• 画面遷移時にステータスを渡すことができる機能

18. 画面遷移に割り込んでキャンセルできる機能
@inject IJSRuntime js
<NavigationLock OnBeforeInternalNavigation="BeforeInternalNavigation" ConfirmExternalNavigation="true" />
@code {
private async Task BeforeInternalNavigation(LocationChangingContext context)
{
bool result = await js.InvokeAsync<bool>("confirm", "ページ遷移するよ？");
if (!result)
{
context.PreventNavigation();
}
}
}
アプリ内でのページ
遷移
外部ページ遷移

19. 画面遷移時にステータスを渡すことができる機能
• NavigationManagerのNavigateToの第二引数の
NavigationOptionsにHistoryEntryStateプロパティが追加さ
れた(string?)
• これを画面遷移元で設定し、画面遷移先で読み取る

20. 空のBlazorテンプレート
• 今まではcounterやFetchDataやBootstrapを含むテンプレー
トが用意されていた。
• レイアウトも削除されシンプルなテンプレートとなっている。
• 今までは一般的にこれらの不要なファイルを削除してからアプ
リケーション開発に取りかかる必要があったがこのテンプレー
トによりそれが最小の手間となった。

21. 空のBlazorテンプレート実行イメージ

22. 新しいLINQ API
• Order()・OrderDescending()
var data = new[] { 2, 1, 3 };
// Instead of
// var sorted = data.OrderBy(e => e);
var sorted = data.Order();
// Instead of
// var sortedDescending = data.OrderByDescending(e => e);
var sortedDescending = data.OrderDescending();

23. C#11
• 生文字列リテラル
• 3つ以上の連続した「“」を使うことで一切エスケープの必要のない
文字列リテラルをかけるようになった。
• エスケープ不要の文字列として逐語的文字列リテラル「@””」があ
たるが微妙に使い勝手が悪かった

24. 生文字列リテラル1
• 3つ以上の連続した「“」を使うことで一切エスケープのいら
ない文字列リテラルが書ける
var moji = “””
“も書けるし”という文字として
¥とかももちろん書ける
¥¥とかいったら¥が2こ
{}も特別な解釈もされず
“””;

25. 生文字列リテラル2
• 文字列中に連続した「“」を並べたいとき
• 3つ並べたければ4つの「“」でくくる！

26. 生文字列リテラルで文字列補間
• $の個数と同じ数の{と}を書いた時だけ補間扱い。
• それ以下の個数の{と}を書いた時は普通の文字列として扱う

27. 参考文献
• ASP.NET Core updates in .NET 7 Preview 7
• ASP.NET Core Roadmap for .NET 7 #39504
• .NET 7 の ASP.NET Core Blazor の新機能試してみよう
• ASP.NET Core Blazor データ バインディング
• ASP.NET Core Razor コンポーネントの仮想化
• ASP.NET Core の Blazor ルーティングとナビゲーション

28. おしまい
おしまい