Successfully reported this slideshow.
Your SlideShare is downloading. ×

.NET 7におけるBlazorの新機能

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 28 Ad
Advertisement

More Related Content

Recently uploaded (20)

Advertisement

.NET 7におけるBlazorの新機能

  1. 1. .NET 7におけるBlazor の新機能 株式会社SAKURUG エンジニアリングユニット 草場 友光 C# Tokyo .NET Conf 2022直後 .NETラボ合同イベント
  2. 2. 自己紹介 • 普段は主にWebFormsアプリの保守の お仕事をしてます。 • 古めのシステムが多いので時代に取り 残されぬよう新しい技術を一つでも入 れるよう日々努力しています。 • 2022/08-2023 Microsoft MVP (Developer Technologies) • tomo_kusaba
  3. 3. 宣伝 【VISION】ひとの可能性を開花させる企業であり続ける VISIONに共感できる仲間募集中。
  4. 4. 注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。
  5. 5. 今日の目的 • .NET 7がとうとうリリースされました。 • 今回は、Blazorにフォーカスして新しい機能をキャッチアップ していきたいと思います
  6. 6. 主な項目 • 新しいローディング画面 • データバインディング • 仮想化の改善 • ナビゲーションの改善
  7. 7. 位置づけについて C# 11としての新文法 .NET 7のフレームワークとしての新機能 ASP.NET Coreとしての新機能 Blazorの新機能 今回のフォーカスポイント とはいえ、こっちも外せな い とはいえ、こっちも外せな い とはいえ、こっちも外せない
  8. 8. 新機能一覧・・・ • Githubをみると書いてる https://github.com/dotnet/aspnetcore/issues/39504
  9. 9. STSサポート • 従来Currentサポートと言われていたものを名称変更 • LTS(Long Term Support)に対してSTS(Short Standard Term Support) • サポート期間はリリース日から18ヶ月間 STS ん?
  10. 10. サポート名称の名称混乱!? .NET 7 Preview 6アナウンスブログより .NET 7 RC2アナウンスブログより
  11. 11. ホットリロードの改善 • Blazor WebAssemblyのデバッグ時にホットリロードできるよ うになった • .NET 6でもホットリロードできる
  12. 12. 新しいローディング画面
  13. 13. 新しいローディング画面 • CSSスタイルの以下の値でローディング状況が提供されている。 • --blazor-load-percentage • --blazor-load-percentage-text • HTML+CSSでローディング画面を自作することが今までより 簡単に可能となっている。 • →試してみた!
  14. 14. 新しいローディング画面の自作
  15. 15. データバインディング(bind-after) • テキストボックスの値を更新してフォーカスが外れたときによ びだすメソッドを指定することができる • 今まではonchangeイベントを使用して実装していたものがよ り楽になった。
  16. 16. 仮想化の改善 • Blazorではスクロール領域の高さを定義するスペーサー要素に 「div」要素を使用している • ただし、親要素で子要素が許可されない場合がある。 • そのため、newパラメータを使用してスペーサ要素を構成でき るようになった。(地味)
  17. 17. ナビゲーションの改善 • 画面遷移に割り込んでキャンセルできる機能 • 画面遷移時にステータスを渡すことができる機能
  18. 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. 19. 画面遷移時にステータスを渡すことができる機能 • NavigationManagerのNavigateToの第二引数の NavigationOptionsにHistoryEntryStateプロパティが追加さ れた(string?) • これを画面遷移元で設定し、画面遷移先で読み取る
  20. 20. 空のBlazorテンプレート • 今まではcounterやFetchDataやBootstrapを含むテンプレー トが用意されていた。 • レイアウトも削除されシンプルなテンプレートとなっている。 • 今までは一般的にこれらの不要なファイルを削除してからアプ リケーション開発に取りかかる必要があったがこのテンプレー トによりそれが最小の手間となった。
  21. 21. 空のBlazorテンプレート実行イメージ
  22. 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. 23. C#11 • 生文字列リテラル • 3つ以上の連続した「“」を使うことで一切エスケープの必要のない 文字列リテラルをかけるようになった。 • エスケープ不要の文字列として逐語的文字列リテラル「@””」があ たるが微妙に使い勝手が悪かった
  24. 24. 生文字列リテラル1 • 3つ以上の連続した「“」を使うことで一切エスケープのいら ない文字列リテラルが書ける var moji = “”” “も書けるし”という文字として ¥とかももちろん書ける ¥¥とかいったら¥が2こ {}も特別な解釈もされず “””;
  25. 25. 生文字列リテラル2 • 文字列中に連続した「“」を並べたいとき • 3つ並べたければ4つの「“」でくくる!
  26. 26. 生文字列リテラルで文字列補間 • $の個数と同じ数の{と}を書いた時だけ補間扱い。 • それ以下の個数の{と}を書いた時は普通の文字列として扱う
  27. 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. 28. おしまい おしまい

×