Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性

254 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性

  1. 1. C#勉強会 2018/10 山本礼貴
  2. 2.   入門編  Blazor基礎知識  開発環境を作ろう  プロジェクトを作ろう  メリットとデメリット  実践編  最近書いたコード  世間の取り組み  まとめ(妄想含む) アジェンダ
  3. 3.  入門編
  4. 4.  Blazor基礎知識 なんで使ってみたいと思ったか
  5. 5.   名称由来:Browser + Razor = Blazor  なんでLなのかは不明  Razor構文 は html の中にC#の式/構文を書くことができる ASP.NET(Core)のhtmlのサーバーサイドの拡張 (拡張子: cshtml ← C# + html)  vbhtmlでVBも書けます  旧いASP.NETのぐちゃぐちゃな構文よりは好まれている(私見)  <% ... %> でタグ内にC#書くよりは、 @ 1文字の方が良いよね Blazorって何?
  6. 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. 7.   Blazorは画面の制御がある程度できる  WebAssemblyはDOMや各APIに触れないのでは?  BlazorのフレームワークがDOMとの間で仲立ちするJavaScriptを持っている ソースコード的には見えないところにある  非同期処理などを使うと、画面への反映を自動的にやってくれる  同期的に書き換えた時は画面の変更を通知するメソッドを呼ぶ Blazorの仕組み
  8. 8.   ジェネリックcshtmlが書ける  XAMLみたいにDataTemplateっぽくできる(ただしC#でゴリゴリ)  htmlにデータバインディングできる  async /await できる  ラムダ式も全くそのままC#として使える  ボタンのOnClickとかをC#のActionでペタペタ貼り付け可能(Indexを付与 した id とか名前とか付けなくても使えるのは結構良い)  ただのモジュールではなくBlazor自体を1つのフレームワークと呼んで も良いレベルではなかろうか 只者ではない
  9. 9.  開発環境を作ろう 最低限のものが最大限…
  10. 10.   NET Core 2.1 SDKの最新版をインストール  SDKの詳細なバージョン番号がビルドに必要 なことがある 2.1.403 とか。(表示する方法はあるので忘れても大丈夫) 環境構築(SDK)
  11. 11.   ASP.NET Core Blazor Language Services  プロジェクトテンプレート  インテリセンス 環境構築(VS2017(ver15.8)以降)
  12. 12.  プロジェクトを作ろう 多くの人がハマる
  13. 13.   ASP.NET Core Webアプリケーションを新規作成 プロジェクト名を入力してOK プロジェクトを作ろう
  14. 14.   Blazor(ASP.NET Core hosted)を選択 次の選択 SDKバージョンは ここにも表示される
  15. 15.   プロジェクトテンプレートでは3つのプロジェクトに分かれる  *.Client  cshtml(View)群  C#記述部はクライアントサイドでWebAssenbly化して動作する  *.Server  Controller群  ASP.NETを使っている人ならおなじみのもの  *.Shared  両方で共有するDTO/Entityクラス群  JSONシリアライズ可能なら(循環参照などが無いなら)Entityのクラスをそのまま配 置してもOK  (2重管理しないでいいのは素晴らしい) Blazorのプロジェクト構造
  16. 16.   まだ正式版じゃないので、環境によってビルドがフリーズすることがあ ります。それを回避するために、*.Server.csproj を以下のように変更し ます。 フリーズしない人はほっといて大丈夫。 これをやると直る人と直らない人がいるのでダメだったら諦め(そのう ち直るでしょう) プロジェクトを少し変更(1)
  17. 17.   global.json に .NET Core SDK のバージョンを書き込みます。 これも、何もせずに動いたらほっといて大丈夫 プロジェクトを少し変更(2)
  18. 18.  F5(ビルド+デバッグ実行) ASP.NET Coreが動いて WebAssemblyが動いて ちゃんと動く画面ができる JavaScriptは一行も書いてない
  19. 19.   BlazorStrap  NuGetから *.Client プロジェクトに追加しよう  Bootstrap 4のラッパー群  BootstrapをBlazorコンポーネント化してくれている (危うく自分で作ってしまうところだった…)  インテリセンスをcshtmlで有効化するために、using と addTagHelper を 追記しましょう お勧めのパッケージ
  20. 20.  メリットとデメリット C#が得意ならおさえておいた方が良い技術 されど今すぐ使うかは…
  21. 21.   サーバーからクライアントまでC#  EntityなどもC#(しかもClient/Serverで共用できる)  htmlとC#を上手にミックスできる  磨き抜かれたBlazorアプリケーションはどんどんMVVMっぽくなる気がする(こち らまだ修行中ですが…)  .NET のマネージド空間がWebAssemblyの空間だと考えると良い  html とWebAssemblyを融和させるためのフレームワーク つまり、htmlを出力するコードとそれを動かすためのWebAssemblyをビルドして くれている。  今までWebAssemblyでDOMを触れなかったことからするとかなり画期的。(言う までもなくこの部分にはJavaScriptが間に挟まっています。開発環境から見えない だけで) C#大統一論的には凄い
  22. 22.   CSSでテーマを作れるので、通常のWebアプリを作るためのノウハウは 生きる  サーバーサイドのビジネスロジックとモデルはC#で、クライアントサ イドの基本的なロジックはC#で、表示上の詳細な制御が必要な部分の みJavaScriptで。 という住み分けが今のところ最良と思える 既存技術と喧嘩しない
  23. 23.   選択肢が狭い 今日紹介したものを組み込む以外の選択肢がどうも思いつかない程度に マイナー  強いて言えば面白そうなのはBlazorCanvasExtensionsくらい  cshtml 内の継承をサポートしているのにC#プロパティの[Parameter]属 性が継承されない これがとても惜しい なぜ先にジェネリックをサポートしたのか… まだ発展途上
  24. 24.   DOMやWebGLに直接触れるようにしてくれたらいいなぁ  現在は一部のプロパティにバインディングできるという程度  JavaScriptでラッパーを書けばやれることは増える (←いまのところ現実的 な解)  Blazorのコンセプト的には、ビジネスアプリケーションが作れれば十分 という雰囲気がビシビシと伝わってくる  だから、できないことをやろうとするとマーシャリングが行われてパ フォーマンスは犠牲になる  なんとかしたいですよね(|) 対応してくれたら嬉しいところ
  25. 25.   JavaScriptとC#の相互運用は癖が強すぎる https://learn-blazor.com/architecture/interop/ まだ書きにくい  今までJavaScriptで書いていたものをRazorで書きまくることでかなりの事 はできるので、徹底してC#にすれば良いともいえるが…  大まかに言うと、global / static なメソッド間でしか相互運用ができない 現時点で良くないところ
  26. 26.   JavaScriptではないのでブレークポイントが張れない  Google Chromeで例外発生時のコールスタックは出る  こりゃ確かにWebAssemblyだ 現時点で良くないところ
  27. 27.   起動時間が長い  WebAssemblyは現在モジュール単位のコンパイルであるため  ブラウザ側が実行コードをコンパイルしてくれるようになったら突然速く なる 現時点で良くないところ
  28. 28.  実践編
  29. 29.  最近書いたコード 論より証拠といいます
  30. 30.   cshtml内で外部から情報を受け取る際に使用します  C#でプロパティにできるものなら何でもできる  ActionとかFunc<T>もできる  親画面から処理を受け取るときに活躍  Commandみたいなクラスを作るとMVVMっぽくて良いかも [Parameter]
  31. 31.   Ajaxを使うところではこれを書く  こんな風にかける _partners = await Http.GetJsonAsync<Partner[]>("/api/Partners/"); @inject HttpClient Http
  32. 32.   ViewModelの型に応じてコントロールを変えたかったので作ってみた  XAMLのとはちょっと毛色が違うけどこれはこれで良い DataTemplate.cshtml
  33. 33.   ジェネリックのリストボックスを作ってみた  ContentControlは内部でDataTemplateを用いて勝手に展開してくれる ようにした  Tを object にすると、DataTemplateがサポートしているものなら何でも 並べられるようになる Listbox<T>
  34. 34.   ServerとClientで共用するクラスはここに配置  通信はJSONで勝手にやってくれるので、うっかり循環参照にならない ようにだけ気を付けよう *.Sharedに配置するクラス
  35. 35.   サーバーサイドはASP.NET Coreのほぼ普通の書き方 Controller
  36. 36.   static の値がちゃんと保持されている  シングルページだから  セキュリティ的に問題のないものなら色々置ける static
  37. 37.  世間の取り組み
  38. 38.   少しずつ増えていますがまだ多くない https://github.com/BlazorExtensions  Canvas  SignalR e.t.c… Blazor Extensions
  39. 39.  まとめ 妄想含む
  40. 40.   現在は未完成感があるが、とても強力なフレームワークに成長する可能 性を秘めている  WebAssemblyの進化とともに進化していく  モジュールサイズとかコンパイル速度とか…  サーバーサイドでwasmにコンパイルした方が良くない?とは思わんでも ない  開発環境の進歩には期待  API系全般にアクセスする拡張が待たれる  Canvasはもうあるけど、WebGL触りたい 来年くらいに多分面白くなる
  41. 41.   https://1drv.ms/u/s!Au2k6fUO0Z_Qgec1Y2wde1q-Pvbb7w 作りかけのものをデモで出したのであまり綺麗でないのはご海容くださ い。 デモのソースコード

×