Más contenido relacionado
La actualidad más candente (20)
Similar a Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性 (20)
Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性
- 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の仕組み
- 10.
NET Core 2.1 SDKの最新版をインストール
SDKの詳細なバージョン番号がビルドに必要 なことがある
2.1.403 とか。(表示する方法はあるので忘れても大丈夫)
環境構築(SDK)
- 11.
ASP.NET Core Blazor Language Services
プロジェクトテンプレート
インテリセンス
環境構築(VS2017(ver15.8)以降)
- 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#大統一論的には凄い