Web開発者におくる .NET 7時代の​ .NET WebAssemblyとの付き合い方​

.NET Conf 2022 Recap Event 東京 で使用したデモの補助スライド

Transcript

1. Web開発者におくる .NET 7時代の .NET WebAssemblyとの付き合い方 山田 裕介 | @y_chu5 Microsoft MVP Developer Technologies 株式会社CARTA HOLDINGS
2. 自己紹介 • 山田裕介（ちゅうこ） • 株式会社CARTA HOLDINGS / 株式会社サポーターズ • 好きな言語 • TypeScript • Scala • C# @y_chu5 @yamachu
3. セッション内容について • .NET Conf 2022のセッションのうち、Web開発に関係するものに触れていきます • Webの特にフロント分野 • Blazor WebAssembly 多め • Blazor Server, Blazor Hybrid は取り扱いません • JavaScript interop on WebAssembly が特に注目
4. Blazor おさらい https://learn.microsoft.com/ja-jp/aspnet/core/blazor/hosting-models?view=aspnetcore-7.0
5. 注目セッション https://www.youtube.com/watch?v=evW4Gj4sHsk https://www.youtube.com/watch?v=w_x1keHyXAY https://www.youtube.com/watch?v=Ru-kO77d3F8 https://www.youtube.com/watch?v=gBky9_AskNQ
6. What's new for Blazor in .NET 7 .NET 7時代のBlazorの新機能を網羅的に解説 デモを中心に進めるセッション QuickGridというパフォーマンスに優れた コンポーネントのデモは圧巻
7. 🔥NavigationLock / LocationChanging Locationの変更をハンドリング可能に Formが編集されたら、真偽値で ブラウザの遷移を抑制可能に https://youtu.be/evW4Gj4sHsk?t=718 https://learn.microsoft.com/ja- jp/aspnet/core/blazor/fundamentals/routing?view=aspnetcore- 7.0#handleprevent-location-changes
8. 🔥Loading progress Blazor WebAssemblyアプリの リソースダウンロード状況が取得可能に CSS カスタムプロパティで表現しているた め 柔軟なデザイン表現も Byte数の%ではなくリソース数による%を 表していることに注意 https://learn.microsoft.com/ja- jp/aspnet/core/blazor/fundamentals/startup?view=aspnetcore- 7.0#loading-progress-indicators
9. 🔥Custom elements Blazor Component を Custom Elements として 扱う技術 プレーンなHTML や React や Angular などの フレームワークとの組み合わせが可能に https://learn.microsoft.com/ja- jp/aspnet/core/blazor/components/?view=aspnetcore- 7.0#blazor-custom-elements
10. CSS Techniques for Blazor Developers BlazorでのStylingのノウハウが詰まっている BlazorのCSS Isolationの仕組みについても 詳しく解説している貴重なセッション デモがBlazor WebAssemblyで行われている
11. .NET ❤️'s WebAssembly in .NET 7 .NET 7 時代の .NET WebAssembly の強化を 知るならこのセッション 開発体験が大幅に向上したことを 様々なデモを通してアピールしている 強化されたJavaScript interopを使ったデモも .NET 7で大幅にパフォーマンスが向上した Uno Platformの前フリ
12. Testing Blazor Applications with Playwright Blazor ApplicationsのテストをPlaywrightで、 テストコードをC# で開発している ユーザの操作からテストコードを生成する デモを行っている Full C# で E2E テストを考えているのであれば ぜひとも参考にしたいセッション
13. 関連資料 • ASP.NET Core 7.0 の新機能 • https://learn.microsoft.com/ja-jp/aspnet/core/release-notes/aspnetcore-7.0?view=aspnetcore-7.0 • デモ • CSSのデモ • https://github.com/EdCharbeneau/Css-For-Blazor-Developers-Presentation • Hand trackingのデモ • https://github.com/pavelsavara/blazor-wasm-hands-pose • その他使用したデモ • https://github.com/yamachu/NETConf2022RecapDemo • https://github.com/yamachu/pokedex-net-webassembly-without-blazor • Blazor WebAssembly アプリケーションプログラミング自習書 • https://github.com/jsakamoto/self-learning-materials-for-blazor-jp • 事前レンダリングについての解説 • https://qiita.com/jsakamoto/items/bb03b967367ceaecfbd0