Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web開発者におくる .NET 7時代の .NET WebAssemblyとの付き合い方
Search
Yusuke Yamada
December 07, 2022
Technology
0
160
Web開発者におくる .NET 7時代の .NET WebAssemblyとの付き合い方
.NET Conf 2022 Recap Event 東京 で使用したデモの補助スライド
Yusuke Yamada
December 07, 2022
Tweet
Share
More Decks by Yusuke Yamada
See All by Yusuke Yamada
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
3
630
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
8
6.6k
HybridWebViewでJSベースのView開発 / Development JavaScript based View with HybridWebView
yamachu
0
580
Enterprise以外でもMergeQueueしたい! / Use Merge Queue without GitHub Enterprise
yamachu
0
160
Other Decks in Technology
See All in Technology
With Devin -AIの自律とメンバーの自立
kotanin0
2
830
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
130
「AI駆動開発」のボトルネック『言語化』を効率化するには
taniiicom
1
220
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
180
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
ymotongpoo
3
290
LLM開発を支えるエヌビディアの生成AIエコシステム
acceleratedmu3n
0
340
M365アカウント侵害時の初動対応
lhazy
7
5.1k
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
340
大規模イベントを支える ABEMA の アーキテクチャ 変遷 2025
nagapad
5
530
OpenTelemetry の Log を使いこなそう
biwashi
5
1.1k
AWS表彰プログラムとキャリアについて
naoki_0531
1
140
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
3
1.9k
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How GitHub (no longer) Works
holman
314
140k
Agile that works and the tools we love
rasmusluckow
329
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
A designer walks into a library…
pauljervisheath
207
24k
Typedesign – Prime Four
hannesfritz
42
2.7k
Balancing Empowerment & Direction
lara
1
510
Docker and Python
trallard
45
3.5k
Fireside Chat
paigeccino
37
3.5k
Transcript
Web開発者におくる .NET 7時代の .NET WebAssemblyとの付き合い方 山田 裕介 | @y_chu5 Microsoft
MVP Developer Technologies 株式会社CARTA HOLDINGS
自己紹介 • 山田裕介(ちゅうこ) • 株式会社CARTA HOLDINGS / 株式会社サポーターズ • 好きな言語
• TypeScript • Scala • C# @y_chu5 @yamachu
セッション内容について • .NET Conf 2022のセッションのうち、Web開発に関係するものに触れていきます • Webの特にフロント分野 • Blazor WebAssembly
多め • Blazor Server, Blazor Hybrid は取り扱いません • JavaScript interop on WebAssembly が特に注目
Blazor おさらい https://learn.microsoft.com/ja-jp/aspnet/core/blazor/hosting-models?view=aspnetcore-7.0
注目セッション 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
What's new for Blazor in .NET 7 .NET 7時代のBlazorの新機能を網羅的に解説 デモを中心に進めるセッション
QuickGridというパフォーマンスに優れた コンポーネントのデモは圧巻
🔥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
🔥Loading progress Blazor WebAssemblyアプリの リソースダウンロード状況が取得可能に CSS カスタムプロパティで表現しているた め 柔軟なデザイン表現も Byte数の%ではなくリソース数による%を
表していることに注意 https://learn.microsoft.com/ja- jp/aspnet/core/blazor/fundamentals/startup?view=aspnetcore- 7.0#loading-progress-indicators
🔥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
CSS Techniques for Blazor Developers BlazorでのStylingのノウハウが詰まっている BlazorのCSS Isolationの仕組みについても 詳しく解説している貴重なセッション デモがBlazor
WebAssemblyで行われている
.NET ❤️'s WebAssembly in .NET 7 .NET 7 時代の .NET
WebAssembly の強化を 知るならこのセッション 開発体験が大幅に向上したことを 様々なデモを通してアピールしている 強化されたJavaScript interopを使ったデモも .NET 7で大幅にパフォーマンスが向上した Uno Platformの前フリ
Testing Blazor Applications with Playwright Blazor ApplicationsのテストをPlaywrightで、 テストコードをC# で開発している ユーザの操作からテストコードを生成する
デモを行っている Full C# で E2E テストを考えているのであれば ぜひとも参考にしたいセッション
関連資料 • 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