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
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
8
6.4k
HybridWebViewでJSベースのView開発 / Development JavaScript based View with HybridWebView
yamachu
0
560
Enterprise以外でもMergeQueueしたい! / Use Merge Queue without GitHub Enterprise
yamachu
0
140
Other Decks in Technology
See All in Technology
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.7k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
290
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
160
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
18
6.5k
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
240
AI導入の理想と現実~コストと浸透〜
oprstchn
0
190
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
6.7k
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
930
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
390
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
8.3k
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
440
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.8k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
We Have a Design System, Now What?
morganepeng
53
7.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
GitHub's CSS Performance
jonrohan
1031
460k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Site-Speed That Sticks
csswizardry
10
680
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
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