.NET 10のBlazorの期待の新機能

Transcript

1. .NET 10のBlazorの期待の新機能 FutureOne株式会社 高山博司
2. 高山博司 ・ FutureOne株式会社 ・ C#/.NET/Blazor tkym @88poipoi88
3. 目次 ・ .NET 10 の Blazorの新機能 ・ パフォーマンス関連 ・ アプリケーション開発関連 ・ セキュリティ
4. 新機能一覧 What's new in ASP.NET Core in .NET 10 | Microsoft Learn
5. パフォーマンス関連
6. 静的 Web 資産としての Blazor スクリプト ・ Blazor ScriptがStatic Assetsから提供 → ASP.NET Coreの 静的ファイルミドルウェアの恩恵 ・ ビルド時の圧縮 ・ フィンガープリント ◎ ファイルサイズ減 ◎ 最適なブラウザキャッシュの実現
7. Blazor Web Apps での Blazor WebAssembly 静的資産のプリロード ・ <ResourcePreloader /> (Preview 6では <LinkPreload />) → 必要なリソースを早い段階でDLする → 前述のStatic Assets化も合わせて 起動速度UP ◎ リソースのダウンロード待ち時間が大幅に短縮 ◎ アプリケーションがより速く起動
8. クライアント側のフィンガープリンティング ・ ビルド時にフィンガープリントをおこなう ・ importmapでマッピング → 更新が反映されない問題を解決 ◎ キャッシュ無効化（キャッシュバスティング） ◎ 積極的なキャッシュ活用
9. JavaScriptバンドラーのサポート ・ WasmBundlerFriendlyBootConfig=true → 依存関係を明示したJSモジュールに → ReactやAngularなどのFWと共存できる ◎ JSエコシステムでBlazorを機能させられる ◎ 既存フロントエンドにBlazorを組み込める ◎ サンプル: blazor-samples/10.0/BlazorWebAssemblyReact at main · dotnet/blazor-samples
10. メモリープールからの自動削除 ・ Kestrel、IIS、およびHTTP.sysは、アプリケーションがアイドル状態のときに、 内部のメモリプールから未使用のメモリを自動的に解放する機能をサポート ◎ アップデートするだけでOK ◎ スケーラビリティの向上 ◎ コスト効率UP
11. .NET 10の恩恵 ・ .NET １０のアップデートの恩恵 ・ アップデートすればパフォーマンスUP ◎ Performance Improvements in .NET 10 - .NET Blog
12. アプリケーション開発関連
13. 同じページナビゲーションで一番上までスクロールしない ・ NavigationManager.NavigateTo で 同一ページに飛ぶ （クエリの変更とか） と ページ上部まで移動していた ・ 元の位置をキープするように ◎ UX向上
14. NavLinkMatch.All はクエリ文字列とフラグメントを無視 ・ URLが完全一致するしないとだめ → クエリとかあるとメニューが Activeにならない ◎ パスがあっていればメニューが ちゃんとActiveになります
15. ルート テンプレートのハイライト ・ Microsoft.AspNetCore.Mvcは元々できた ・ Microsoft.AspNetCore.Componentsはなかった ◎ 見やすくなりました ◎ ＠pageとかもいける
16. QuickGridのRowClassパラメーター ・ RowClassパラメータが追加 ◎ アイテムに基づいて CSSクラスを適用できる
17. QuickGridの列を閉じるオプション ・ HideColumnOptionsAsync() が追加 ◎ ソースから閉じれるようになりました．
18. コンポーネントとサービスから状態を 永続化するための宣言モデル ・ [PersistentState]が追加 → 簡単にコンポーネントの状態を永続化 ◎ テンプレートコードを 書かなくて良くなった
19. サーキット状態の永続性 ・ [PersistentState]をつけておくと， サーバーとのSignalR接続が途切れてもUIの状態を復元できるように → セッションの継続性が向上 ◎ ノートPCを閉じて移動とか 不安定なWi-Fi環境とかでも使いやすい
20. 再接続 UI コンポーネント ・ 再接続時に表示されるUIコンポーネントが標準テンプレートに追加 ◎ カスタマイズが簡単に
21. フォーム検証の改善 ・ フォームバリデーションが強化 → ネストされたオブジェクト コレクションも検証可能に ・ やり方 Program.cs に追加 builder.Services.AddValidation(); ルートモデルに属性をつける [ValidatableType] ・ [SkipValidation]，[JsonIgnore] で検証除外 ◎ 入力フォームが作りやすい！
22. フォーム検証の改善 ソース ジェネレーターによる DataAnnotations ベースの検証の統合モデルのサポート
23. 新しい JavaScript 相互運用機能 ・ IJSRuntimeにメソッドが増えた InvokeConstructorAsync(string identifier, object?[]? args) GetValueAsync<TValue>(string identifier) SetValueAsync<TValue>(string identifier, TValue value) それぞれ同期版も ◎ JS側に書いてたヘルパーメソッドが要らなくなる
24. 新しい JavaScript 相互運用機能 InvokeConstructorAsync(string identifier, object?[]? args) InvokeConstructor(string identifier, object?[]? args) 存在しないプロパティを読もうとするとエラー }
25. 新しい JavaScript 相互運用機能 GetValueAsync<TValue>(string identifier) GetValue<TValue>(string identifier) 存在しないプロパティを読もうとするとエラー
26. 新しい JavaScript 相互運用機能 SetValueAsync<TValue>(string identifier, TValue value) SetValue<TValue>(string identifier, TValue value) 存在しないプロパティ場合はプロパティを作成して，セットする ReadOnlyの場合はエラー
27. SSR時のNavigationExceptionの抑制 ・ SSRでNavigation.NavigateToを呼ぶと，NavigationExceptionがスローされた． → 抑制できるように デフォルトでtrueに設定されている ◎ 認証後のリダイレクトなどでレンダリングモードを気にしなくてよくなった
28. NotFoundPage ・ <NotFound>からNotFoundPageパラメータへ ・ NotFound.razorコンポーネントの導入 ◎ カスタマイズが簡単に ◎ Navigation.NotFound()で意図的に呼び出すことも可能
29. セキュリティ
30. Passkey support for ASP.NET Core Identity ・ パスキーに対応 ASP.NET Core Blazor Web Appにパスキーを実装する | Microsoft Learn
31. Passkey support for ASP.NET Core Identity ・ パスキーに対応 ASP.NET Core Blazor Web Appにパスキーを実装する | Microsoft Learn
32. Passkey support for ASP.NET Core Identity ・ パスキーに対応 ASP.NET Core Blazor Web Appにパスキーを実装する | Microsoft Learn
33. 新規および更新された Blazor Web App セキュリティ サンプル ・ OpenID Connect (OIDC) を使用して ASP.NET Core Blazor Web アプ リをセキュリティで保護する • Microsoft Entra ID を使用して ASP.NET Core Blazor Web App をセ キュリティで保護する • Windows 認証を使用して ASP.NET Core Blazor Web アプリをセキュ リティで保護する ◎外部 Web API を安全に構成して呼び出す方法を示すための個別の Web API プロジェクト ◎ Backend for Frontend (BFF) パターン
34. まとめ What's new in ASP.NET Core in .NET 10 | Microsoft Learn