May 29~30, 2019 に開催された "de:code 2019" の Day1 EXPOシアターセッションで、Blazor について発表した際のスライド資料です。CC BY License、又は The Unlicense のデュアルライセンスで再利用可能です。 アニメーション付 PowerPoint 原ファイルは以下の URL から入手可能です。 https://1drv.ms/p/s!Ahj5X4eD4NFdgvpnYa4h1jR5JnFlmg

1. de:code 2019 MW81
がんばらなくても C# で Single Page Web アプリ
ケーションが書けてしまう「 Blazor」とは
Microsoft MVP for Visual Studio and Development Technologies
坂本 純一 (@jsakamoto)

2. Blazor の概要とその仕組み

3. Client-side Server-side

4. Client-side

5. Blazor とは?
SPA フレー
ムワーク
実行環境
開発環境
(SDK)

6. JavaScript への変換ではない。
.NET のバイナリが動く。

7. 仕組み
※このような動作原理なので、既存の NuGet パッケージライブラリもそのまま使えたりする。

8. あくまでも HTML 標準

9. あくまでも HTML 標準

10. Demo

20. Demo

21. C# で SPA が書けることの
何が嬉しいのか

22. • .NET Core SDK
Visual Studio 2019 + Blazor 拡張
Visual Studio Code + C#拡張
開発環境の構築が容易
※1 … 2019年5月現在、v.3.0.0 Preview 5 ※2 … JetBrains Rider など他のエディタ/IDE は未評価
※3 … 2019年5月現在、Preview 版 推奨

23. だけ
簡潔なプロジェクト構造

24. 容易な開発環境構築
+
簡潔なプロジェクト構造
| |
がんばらなくても SPA が
書けてしまう。

25. 既に C# で開発している場合は
さらなる特典

26. ビルドシステム (MSBuild)
LINQ 属性 リフレクション
IntelliSense、CodeLens etc…
パッケージシステム (NuGet)
単体テスト (xUnit とか)
いつもの C# 開発で SPA 開発できる

27. サーバー側も .NET なら型情報が共有できる
Person.dll
Server Client (Blazor)

28. サーバー側も .NET なら型情報が共有できる
Person.dll
Server Client (Blazor)

29. サーバー側も .NET なら型情報が共有できる
Person.dll
var person = new Person {
Name = "Taro";
};
return person;
Server Client (Blazor)

30. サーバー側も .NET なら型情報が共有できる
Person.dll
var person = new Person {
Name = "Taro";
};
return person;
Server Client (Blazor)
{"name":"Taro"}

31. サーバー側も .NET なら型情報が共有できる
Person.dll
var person = new Person {
Name = "Taro";
};
return person;
var person = await
Http.GetJsonAsync<Person>(URL);
person.Greeting(); ⇒ "Hello, I’m Taro"
Server Client (Blazor)
{"name":"Taro"}

32. サーバー側も .NET なら型情報が共有できる
Person.dll
var person = new Person {
Name = "Taro";
};
return person;
var person = await
Http.GetJsonAsync<Person>(url);
person.Greeting(); ⇒ "Hello, I’m Taro"
Server Client (Blazor)
{"name":"Taro"}

33. 属性による制約記述
• モデルクラスのプロパティに、属性で制約を記述することで…

34. 属性による制約記述

35. 属性による制約記述
[New!]
- ブラウザ側検証も有効に

36. C# で SPA が書けることの
何が嬉しいのか

37. C# で SPA が書けることで、
開発生産性の向上
を期待できる

38. Sever-side
そして Server-side Blazor

39. 仕組み

40. 仕組み

41. 仕組み

42. 仕組み

43. 仕組み

44. 仕組み

45. 仕組み

46. 仕組み

47. 仕組み
Internet

48. Server-side Blazor の利点
ロード時間が短い
• mono.wasm や DLL を読み込ま
ないため
検索エンジン対応
• 初回HTTP要求時、レンダリング済
みコンテンツが返る
成熟・安定したランタイム
• デバッグも容易
処理性能が速い
• mono.wasm はインタープリタ
Server-side
Blazor

49. Server-side ならではの
さらなる面白さ

50. サーバー側とクライアント側を、
Web API で結ばなくてよい。

51. サーバー側データベースのクエリ結果を、
そのまま HTML にバインド (!)
古典的なサーバー側
Webアプリ実装みたい
なのに、これで
SPA として動く!

52. ますます、がんばらなくても
済んでしまう。

53. • 常時接続が必要
Server-side Blazor の弱点

54. リリース時期

55. 2019年9月
Server-side Blazor
https://devblogs.microsoft.com/dotnet/introducing-net-5/

56. 2020年の第一四半期の可能性?
Client-side Blazor
https://twitter.com/lupusa1/status/1126185956002938880

57. 学習リソース
Blazor 公式サイト
• https://blazor.net
Blazor アプリケーションプログラミング自習書 (日本語)
• https://j.mp/selflearn-blazor-jp

58. まとめ

59. Blazor を選択することで…
簡潔なプロジェクト構造
強力な開発支援
開発の本質に集中、
リリースを迅速化
ユーザーと開発者
の幸せへ…

60. Blazor も又、銀の弾丸ではない。
しかし Blazor を選択することが
適している人たちも又、存在する。

61. あなたも
その一人かもしれませんね?

62. がんばらなくても
SPA が書けてしまう Blazor。

63. あなたも
はじめてみませんか?

64. © 2018 Microsoft Corporation. All rights reserved.
本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります。
© 2019 Jun-ichi Sakamoto All rights reserved.
本情報の内容 (添付文書、リンク先などを含む) は、de:code 2019 開催日 (2019年5月29~30日) 時点のものであり、予告なく変更される場合があります。
本コンテンツの著作権、および本コンテンツ中に出てくる商標権、団体名、ロゴ、製品、サービスなどはそれぞれ、各権利保有者に帰属します。
Lean, Practice, Share.