Blazor Web Assembly (C#) を触ってみた 発表資料 : フロントエンドLT会 vol.1 -2020夏祭り- #frontendlt https://rakus.connpass.com/event/183881/presentation/ Hello World のハンズオンはこちら -> 5 分で Hello World できる Blazor WebAssembly (C#)https://qiita.com/nt_tn/items/97c0bc75e3afe9e02997

1. Blazor Web Assembly (C#) を触っ
てみた
Naito Oshima

2. 自己紹介
 Naito Oshima
 Developer Support Engineer
 ひたすらデバッグ、トラシュー、開発支援が仕事
 主に以下あたりが守備範囲
 Azure Bot Service (React、C# / Node.js、Azure Web
Apps etc…)
 ASP.NET / ASP.NET Core (C#)
 IIS
 Azure SignalR Service

3. フロントエンド開発, SPA 開発というと…

4. React, Vue, Angular etc…

5. いや

6. JS ライブラリ / フレームワーク以外の
選択肢も…

7. Blazor もあるよ！

8. Blazor とは…?

9. ざっくり言うと…
.NET (C#) を使って SPA 開発できる フレームワーク

10. 今日の Goal は…
Blazor (C#) という選択肢を知ってもらう！

11. What is Blazor ?
• .NET で書ける SPA 向けフロントエン
ドフレームワーク
• Blazor WebAssembly (上) と Blazor
Server (下) の 2 種類
• Blazor WebAssembly は完全 SPAで、
wasm で書いた .NET ランタイム上で
動く
• Blazor Server は SignalR の技術を利用
して疑似的に SPA を実現

12. Blazor Web Assembly
• JavaScript ではなく C# でコードを記述
• .NET Runtime がブラウザで動くよ！
• コンポーネントは Razor コンポーネントと
いう機能で構成
• JavaScript interop で JS を介してブラウザ
の全機能にアクセス可能
• 例えば、HttpClient (.NET) は、ブラウザの
Fetch API を使用して実装
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-3.1#blazor-webassembly

13. dotnet CLI で簡単にテンプレを動かせる
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/tooling?view=aspnetcore-3.1&pivots=linux

14. Blazor Web Assembly
• wasm の知識は基本いらず C# の知識さえあれば書けるよ！
• Razor コンポーネントは割と書きやすい印象 (個人的見解)
• クロスプラットフォーム動作の .NET を前提にしてるので、Mac
でも Linux でも開発可能だよ！Windows 要らず。
• 勿論 Mac の Microsoft Edge (based on Chromium) でも動く！
• 最近出た Azure Static Web Apps にデプロイ/ホストも可能

15. どんな人に嬉しいの？
• ASP.NET, ASP.NET Core あたりを触ることが多い方
• C# が割と得意な方
• 今後 SPA 開発に興味がある方
• Wasm で動く .NET ランタイム上の Blazor 開発に単純
に興味がある人
• 逆に、Angular / React etc… に慣れ親しんでいる、
もしくは既に稼働させてる人は API が ASP.NET Core
で動いているからといって無理して移行する必要はな
いと思ってます (あくまで個人的見解)

16. SPA 開発に Blazor (C#) の
選択肢を！

17. Hello World はこちら
5 分で Hello World できる Blazor WebAssembly (C#)
https://qiita.com/nt_tn/items/97c0bc75e3afe9e02997