Blazor0.6.0が出てきたので、どのくらい使えるのかを調べてみました。2018年10月現時点の状態なので、時間が経てばもっと便利になっている可能性はあります。

1. C#勉強会 2018/10
山本礼貴

2. 
 入門編
 Blazor基礎知識
 開発環境を作ろう
 プロジェクトを作ろう
 メリットとデメリット
 実践編
 最近書いたコード
 世間の取り組み
 まとめ(妄想含む)
アジェンダ

3. 
入門編

4. 
Blazor基礎知識
なんで使ってみたいと思ったか

5. 
 名称由来：Browser + Razor = Blazor
 なんでLなのかは不明
 Razor構文 は html の中にC#の式/構文を書くことができる
ASP.NET(Core)のhtmlのサーバーサイドの拡張
(拡張子: cshtml ← C# + html)
 vbhtmlでVBも書けます
 旧いASP.NETのぐちゃぐちゃな構文よりは好まれている(私見)
 <% ... %> でタグ内にC#書くよりは、 @ 1文字の方が良いよね
Blazorって何？

6. 
 × C#のコンパイラー
 × C#→JavaScriptへのトランスレーター
 ○ ブラウザー(Web Assembly)上で動くNET CLR環境
 IE以外の最新ブラウザでは動く(asm.jsを使えばIEでも動くかもという憶測
があるが未確認)
 .NET Core用にビルドしたDLLを、そのまま参照/実行できる
 Ex) EF.NET Core とかNuGetしてそのまま使える
 実行環境には何もインストールしないで良い(Progressive Web Application
とかに向いていそう)
 最新のC#をそのまま使える(当然ながらVB/F#も大丈夫のはず)
Blazorの仕組み

7. 
 Blazorは画面の制御がある程度できる
 WebAssemblyはDOMや各APIに触れないのでは？
 BlazorのフレームワークがDOMとの間で仲立ちするJavaScriptを持っている
ソースコード的には見えないところにある
 非同期処理などを使うと、画面への反映を自動的にやってくれる
 同期的に書き換えた時は画面の変更を通知するメソッドを呼ぶ
Blazorの仕組み

8. 
 ジェネリックcshtmlが書ける
 XAMLみたいにDataTemplateっぽくできる(ただしC#でゴリゴリ)
 htmlにデータバインディングできる
 async /await できる
 ラムダ式も全くそのままC#として使える
 ボタンのOnClickとかをC#のActionでペタペタ貼り付け可能(Indexを付与
した id とか名前とか付けなくても使えるのは結構良い)
 ただのモジュールではなくBlazor自体を1つのフレームワークと呼んで
も良いレベルではなかろうか
只者ではない

9. 
開発環境を作ろう
最低限のものが最大限…

10. 
 NET Core 2.1 SDKの最新版をインストール
 SDKの詳細なバージョン番号がビルドに必要 なことがある
2.1.403 とか。(表示する方法はあるので忘れても大丈夫)
環境構築(SDK)

11. 
 ASP.NET Core Blazor Language Services
 プロジェクトテンプレート
 インテリセンス
環境構築(VS2017(ver15.8)以降)

12. 
プロジェクトを作ろう
多くの人がハマる

13. 
 ASP.NET Core Webアプリケーションを新規作成
プロジェクト名を入力してOK
プロジェクトを作ろう

14. 
 Blazor(ASP.NET Core hosted)を選択
次の選択
SDKバージョンは
ここにも表示される

15. 
 プロジェクトテンプレートでは3つのプロジェクトに分かれる
 *.Client
 cshtml(View)群
 C#記述部はクライアントサイドでWebAssenbly化して動作する
 *.Server
 Controller群
 ASP.NETを使っている人ならおなじみのもの
 *.Shared
 両方で共有するDTO/Entityクラス群
 JSONシリアライズ可能なら(循環参照などが無いなら)Entityのクラスをそのまま配
置してもOK
 (2重管理しないでいいのは素晴らしい)
Blazorのプロジェクト構造

16. 
 まだ正式版じゃないので、環境によってビルドがフリーズすることがあ
ります。それを回避するために、*.Server.csproj を以下のように変更し
ます。
フリーズしない人はほっといて大丈夫。
これをやると直る人と直らない人がいるのでダメだったら諦め(そのう
ち直るでしょう)
プロジェクトを少し変更(1)

17. 
 global.json に .NET Core SDK のバージョンを書き込みます。
これも、何もせずに動いたらほっといて大丈夫
プロジェクトを少し変更(2)

18. 
F5(ビルド+デバッグ実行)
ASP.NET Coreが動いて
WebAssemblyが動いて
ちゃんと動く画面ができる
JavaScriptは一行も書いてない

19. 
 BlazorStrap
 NuGetから *.Client プロジェクトに追加しよう
 Bootstrap 4のラッパー群
 BootstrapをBlazorコンポーネント化してくれている
(危うく自分で作ってしまうところだった…)
 インテリセンスをcshtmlで有効化するために、using と addTagHelper を
追記しましょう
お勧めのパッケージ

20. 
メリットとデメリット
C#が得意ならおさえておいた方が良い技術
されど今すぐ使うかは…

21. 
 サーバーからクライアントまでC#
 EntityなどもC#(しかもClient/Serverで共用できる)
 htmlとC#を上手にミックスできる
 磨き抜かれたBlazorアプリケーションはどんどんMVVMっぽくなる気がする(こち
らまだ修行中ですが…)
 .NET のマネージド空間がWebAssemblyの空間だと考えると良い
 html とWebAssemblyを融和させるためのフレームワーク
つまり、htmlを出力するコードとそれを動かすためのWebAssemblyをビルドして
くれている。
 今までWebAssemblyでDOMを触れなかったことからするとかなり画期的。(言う
までもなくこの部分にはJavaScriptが間に挟まっています。開発環境から見えない
だけで)
C#大統一論的には凄い

22. 
 CSSでテーマを作れるので、通常のWebアプリを作るためのノウハウは
生きる
 サーバーサイドのビジネスロジックとモデルはC#で、クライアントサ
イドの基本的なロジックはC#で、表示上の詳細な制御が必要な部分の
みJavaScriptで。
という住み分けが今のところ最良と思える
既存技術と喧嘩しない

23. 
 選択肢が狭い
今日紹介したものを組み込む以外の選択肢がどうも思いつかない程度に
マイナー
 強いて言えば面白そうなのはBlazorCanvasExtensionsくらい
 cshtml 内の継承をサポートしているのにC#プロパティの[Parameter]属
性が継承されない
これがとても惜しい
なぜ先にジェネリックをサポートしたのか…
まだ発展途上

24. 
 DOMやWebGLに直接触れるようにしてくれたらいいなぁ
 現在は一部のプロパティにバインディングできるという程度
 JavaScriptでラッパーを書けばやれることは増える (←いまのところ現実的
な解)
 Blazorのコンセプト的には、ビジネスアプリケーションが作れれば十分
という雰囲気がビシビシと伝わってくる
 だから、できないことをやろうとするとマーシャリングが行われてパ
フォーマンスは犠牲になる
 なんとかしたいですよね(|)
対応してくれたら嬉しいところ

25. 
 JavaScriptとC#の相互運用は癖が強すぎる
https://learn-blazor.com/architecture/interop/
まだ書きにくい
 今までJavaScriptで書いていたものをRazorで書きまくることでかなりの事
はできるので、徹底してC#にすれば良いともいえるが…
 大まかに言うと、global / static なメソッド間でしか相互運用ができない
現時点で良くないところ

26. 
 JavaScriptではないのでブレークポイントが張れない
 Google Chromeで例外発生時のコールスタックは出る
 こりゃ確かにWebAssemblyだ
現時点で良くないところ

27. 
 起動時間が長い
 WebAssemblyは現在モジュール単位のコンパイルであるため
 ブラウザ側が実行コードをコンパイルしてくれるようになったら突然速く
なる
現時点で良くないところ

28. 
実践編

29. 
最近書いたコード
論より証拠といいます

30. 
 cshtml内で外部から情報を受け取る際に使用します
 C#でプロパティにできるものなら何でもできる
 ActionとかFunc<T>もできる
 親画面から処理を受け取るときに活躍
 Commandみたいなクラスを作るとMVVMっぽくて良いかも
[Parameter]

31. 
 Ajaxを使うところではこれを書く
 こんな風にかける
_partners = await Http.GetJsonAsync<Partner[]>("/api/Partners/");
@inject HttpClient Http

32. 
 ViewModelの型に応じてコントロールを変えたかったので作ってみた
 XAMLのとはちょっと毛色が違うけどこれはこれで良い
DataTemplate.cshtml

33. 
 ジェネリックのリストボックスを作ってみた
 ContentControlは内部でDataTemplateを用いて勝手に展開してくれる
ようにした
 Tを object にすると、DataTemplateがサポートしているものなら何でも
並べられるようになる
Listbox<T>

34. 
 ServerとClientで共用するクラスはここに配置
 通信はJSONで勝手にやってくれるので、うっかり循環参照にならない
ようにだけ気を付けよう
*.Sharedに配置するクラス

35. 
 サーバーサイドはASP.NET Coreのほぼ普通の書き方
Controller

36. 
 static の値がちゃんと保持されている
 シングルページだから
 セキュリティ的に問題のないものなら色々置ける
static

37. 
世間の取り組み

38. 
 少しずつ増えていますがまだ多くない
https://github.com/BlazorExtensions
 Canvas
 SignalR
e.t.c…
Blazor Extensions

39. 
まとめ
妄想含む

40. 
 現在は未完成感があるが、とても強力なフレームワークに成長する可能
性を秘めている
 WebAssemblyの進化とともに進化していく
 モジュールサイズとかコンパイル速度とか…
 サーバーサイドでwasmにコンパイルした方が良くない？とは思わんでも
ない
 開発環境の進歩には期待
 API系全般にアクセスする拡張が待たれる
 Canvasはもうあるけど、WebGL触りたい
来年くらいに多分面白くなる

41. 
 https://1drv.ms/u/s!Au2k6fUO0Z_Qgec1Y2wde1q-Pvbb7w
作りかけのものをデモで出したのであまり綺麗でないのはご海容くださ
い。
デモのソースコード