![
選択肢が狭い
今日紹介したものを組み込む以外の選択肢がどうも思いつかない程度に
マイナー
強いて言えば面白そうなのはBlazorCanvasExtensionsくらい
cshtml 内の継承をサポートしているのにC#プロパティの[Parameter]属
性が継承されない
これがとても惜しい
なぜ先にジェネリックをサポートしたのか…
まだ発展途上](https://image.slidesharecdn.com/blazor0-181029014920/85/Blazor0-6-0-Web-23-320.jpg)
![
cshtml内で外部から情報を受け取る際に使用します
C#でプロパティにできるものなら何でもできる
ActionとかFunc<T>もできる
親画面から処理を受け取るときに活躍
Commandみたいなクラスを作るとMVVMっぽくて良いかも
[Parameter]](https://image.slidesharecdn.com/blazor0-181029014920/85/Blazor0-6-0-Web-30-320.jpg)
![
Ajaxを使うところではこれを書く
こんな風にかける
_partners = await Http.GetJsonAsync<Partner[]>("/api/Partners/");
@inject HttpClient Http](https://image.slidesharecdn.com/blazor0-181029014920/85/Blazor0-6-0-Web-31-320.jpg)
Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性
- 2. 入門編 Blazor基礎知識 開発環境を作ろう プロジェクトを作ろう メリットとデメリット 実践編 最近書いたコード 世間の取り組み まとめ(妄想含む) アジェンダ
- 3. 入門編
- 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つのフレームワークと呼んで も良いレベルではなかろうか 只者ではない
- 10. NET Core 2.1 SDKの最新版をインストール SDKの詳細なバージョン番号がビルドに必要 なことがある 2.1.403 とか。(表示する方法はあるので忘れても大丈夫) 環境構築(SDK)
- 11. ASP.NET Core Blazor Language Services プロジェクトテンプレート インテリセンス 環境構築(VS2017(ver15.8)以降)
- 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のプロジェクト構造
- 17. global.json に .NET Core SDK のバージョンを書き込みます。 これも、何もせずに動いたらほっといて大丈夫 プロジェクトを少し変更(2)
- 19. BlazorStrap NuGetから *.Client プロジェクトに追加しよう Bootstrap 4のラッパー群 BootstrapをBlazorコンポーネント化してくれている (危うく自分で作ってしまうところだった…) インテリセンスをcshtmlで有効化するために、using と addTagHelper を 追記しましょう お勧めのパッケージ
- 21. サーバーからクライアントまでC# EntityなどもC#(しかもClient/Serverで共用できる) htmlとC#を上手にミックスできる 磨き抜かれたBlazorアプリケーションはどんどんMVVMっぽくなる気がする(こち らまだ修行中ですが…) .NET のマネージド空間がWebAssemblyの空間だと考えると良い html とWebAssemblyを融和させるためのフレームワーク つまり、htmlを出力するコードとそれを動かすためのWebAssemblyをビルドして くれている。 今までWebAssemblyでDOMを触れなかったことからするとかなり画期的。(言う までもなくこの部分にはJavaScriptが間に挟まっています。開発環境から見えない だけで) C#大統一論的には凄い
- 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. 実践編
- 30. cshtml内で外部から情報を受け取る際に使用します C#でプロパティにできるものなら何でもできる ActionとかFunc<T>もできる 親画面から処理を受け取るときに活躍 Commandみたいなクラスを作るとMVVMっぽくて良いかも [Parameter]
- 31. Ajaxを使うところではこれを書く こんな風にかける _partners = await Http.GetJsonAsync<Partner[]>("/api/Partners/"); @inject HttpClient Http
- 33. ジェネリックのリストボックスを作ってみた ContentControlは内部でDataTemplateを用いて勝手に展開してくれる ようにした Tを object にすると、DataTemplateがサポートしているものなら何でも 並べられるようになる Listbox<T>
- 34. ServerとClientで共用するクラスはここに配置 通信はJSONで勝手にやってくれるので、うっかり循環参照にならない ようにだけ気を付けよう *.Sharedに配置するクラス
- 36. static の値がちゃんと保持されている シングルページだから セキュリティ的に問題のないものなら色々置ける static
- 37. 世間の取り組み
- 38. 少しずつ増えていますがまだ多くない https://github.com/BlazorExtensions Canvas SignalR e.t.c… Blazor Extensions
- 39. まとめ 妄想含む
- 40. 現在は未完成感があるが、とても強力なフレームワークに成長する可能 性を秘めている WebAssemblyの進化とともに進化していく モジュールサイズとかコンパイル速度とか… サーバーサイドでwasmにコンパイルした方が良くない？とは思わんでも ない 開発環境の進歩には期待 API系全般にアクセスする拡張が待たれる Canvasはもうあるけど、WebGL触りたい 来年くらいに多分面白くなる