C# で Single Page Web アプリが開発できるフレームワーク&開発環境「Blazor」 ― その概要と Web アプリ開発者にもたらす利点

C# で Single Page Web アプリが開発できる「Blazor」
その概要と Web アプリ開発者にもたらす利点
https://youtu.be/JU-6pAxqAa4

2 OSC18Do – "Blazor"
https://twitter.com/bokusama/status/708376621409959936
http://clr-h.jp

#osc18do
#clrh107

プロフィール
SPA 開発の経験あり。
• サーバー側 - C# + ASP.NET MVC / ASP.NET Core MVC
• クライアント側 - TypeScript + AnguarJS 1.x / Angular 5
• 開発経験はあるけど、知識は浅い。いつもよくググってる。
React、Vueなど他のSPAフレームワーク経験はゼロ。
JavaScript は嫌いじゃない。
• むしろ好きなほう。(型がないと辛いので TypeScript 使いますが。)
@jsakamoto

3年前…
オープンソースカン
ファレンス Hokkaido
2015 で、TypeScript は
いいぞー、という話を
させていただきました。

Blazorとは

「Blazor」とは、Single Page Web アプリケーションを、C# 言語で開発可能とする、
実行環境 SPAフレームワーク開発環境
Blazor とは
これらを提供する、オープンソースなソフトウェアプロダクトです。

Blazor の実行環境

C#プログラムがブラウザで動作
• Webブラウザの "WebAssembly" 上に
.NET 実行環境を構築
• .NET アセンブリ (.dll) をロード、
IL (中間言語) を解釈して動作
• C# ソースコード ⇒ JavaScript、といった
トランスパイラではない
• C# ⇒ WebAssembly のクロスコンパイラでもない
※本セッション中では、"C#" ばかり連呼してますが、このような動作原理なので、実は VB や F# は
じめ、とにかく .NET アセンブリであれば Blazor アプリ内から参照して実行することができます。
(但しスピーカー自身は未検証)

WebAssembly ブラウザサポート状況
https://caniuse.com/#feat=wasm

SPA フレームワークとしての Blazor

SPAフレームワークである
• Razor構文による
HTMLテンプレート
• コンポーネント指向
• データバインディング
• 依存性注入 (DI)
• URLルーティング
"WebAssembly で
フィボナッチ数
を計算してみた"
とかのレベル
じゃないよ!

Flash などのようなプラグイン技術ではない
• HTML + CSS でプレゼンテーション層を記述。
• JavaScript エンジンに替わって、
WebAssembly エンジンでロジックを実行し
てるだけ、と考えるとよいかも。
• この点では、Angular、React、Vue といった
SPA フレームワークと同じ仲間と言えるの
では。
※今日現在はWebAssemblyのコード内からDOMは触れないなどの制約があるため、実のところ、
Blazor のランタイムには、大量の JavaScript コードが含まれています。

Blazor で作るのは SPA!
• Blazor アプリはブラウザ上で動く SPA。
• サーバー側実装は必須ではありません。
• 検証してないが、原理からして、Firebase などの MBaaS をサーバー側実装として
利用することも OK なはず。
• 静的コンテンツをホストできる Web サーバー上であれば配置可能。
• Blazor アプリプロジェクトを "発行" してできあがる、.dll ファイル群を含むコン
テンツを配置すればOK!

Blazor を開発するための環境

強力な開発支援環境
• Visual Studio IDE 用アドインが提供
• HTMLテンプレート記述中も
下記のIDE支援が得られる
• インテリセンス
• 即時エラーチェック
• Code Lens
• リファクタリング機能

.NET Core 2.1 SDK (2.1.300)
"ASP.NET と Web 開発" ワークロードが
選択されていること
Visual Studio 2017 v.15.7+
Visual Studio 拡張
Blazor Language Services
Windows OS の場合の推奨開発環境
.NET

Visual Studio のプロジェクト新規作成に現れる

CLI 環境もある
Linux や macOS では dotnet CLI で開発可能
• .NET Core 2.1 SDK (2.1.300)
$ dotnet new -i Microsoft.AspNetCore.Blazor.Templates::*
$ dotnet new blazor
$ dotnet run

Blazor はオープンソース

ソースコードは GitHub でホスト
• Microsoft の ASP.NET Team が主導
• Apache 2.0 ライセンス

Blazor がもたらすもの

Blazor は開発者負担を減らす!
C# プログラマに対し
追加の学習コストが
小さい
IDE による開発支援サーバ～クライアント
間の型と手続きの共有

1. C# プログラマに対し
追加の学習コストが小さい

コンポーネント(HTMLテンプレート)は Razor 構文
• ASP.NET MVC のサーバー側ビュー
と同じ構文
• "@" キーワードを起点に C# コード
が書ける、ってノリでいける。
• JSX の C# 版みたいな感じ
• 独特なマークアップを、さほど覚
えなくて済む。

C# プロジェクトである
• シンプル。
• JavaScript のパッケージシステム、バンド
ラー、タスクランナーなどの設定ファイル
と格闘しなくてよい。
• パッケージシステムも NuGet
である。

トランスパイラではない。.NET 実行環境である。
• これまでの C# プログラミングの知識・経験がそのまま通用する。
• 標準クラスライブラリ (BCL)
• 属性 (Attribute)
• リフレクション
• 単体テスト
• .NET アセンブリバイナリがそのまま動く
• 既存の NuGet パッケージも使える

2. Visual Studio IDE による開発支援

強力な開発支援環境
• Visual Studio IDE 用アドインが提供
• HTMLテンプレート記述中も
下記のIDE支援が得られる
• インテリセンス
• 即時エラーチェック
• Code Lens
• リファクタリング機能

インテリセンス
コンポーネントのHTML部分記述中
も、他のコンポーネント名が候補
に現れる
コンポーネントが公開している
プロパティも候補に現れる

リファクタリング
HTMLテンプレート編集でも、変数名や型名の変更が実行可能

参照の検索
モデルを参照しているHTMLテンプレート中の箇所もわかる

補足 – Chrome Debugger 対応も進行中

3. サーバー/クライアント間での
型と手続きの共有

型情報の二重管理
サーバー側を C#、クライアント側を TypeScript で実装だと、XHR/JSON
でやりとりする型情報が二重管理に。

JSON.parse() の問題
JSON.parse() では Date 型を復元できない

Blazor はサーバー/クライアントで型情報を共有
• 日時型も問題なくクライアント側でJSONから復元される
• 日時型に限らず、メソッド
や計算プロパティも含めて、
サーバー側と同じオブジェク
トが復元

Blazor を学ぶには?

おすすめ動画
NDC Oslo 2017 ASP.NET Community
Standup – April 3
NDC Minnesota 2018
https://youtu.be/JU-6pAxqAa4https://j.mp/ndc-oslo-blazor https://j.mp/ancs-apr3

自習用リソース
Blazor 公式サイト
https://blazor.net/
LEARN BLAZOR
https://learn-blazor.com/
Blazor アプリケーションプログラミング自習書
https://j.mp/selflearn-blazor-jp

Blazor の弱点

実験段階である
https://twitter.com/danroth27/status/970174117109424128

Qiita 「2018年の最先端バックエンドエンジニアに必要なスキル
について考えてみました。」

まとめ

Blazor が示した未来
• JavaScriptへのトランスパイルでもなく、
WebAssembly へのクロスコンパイルでもない、
実行環境をそのままブラウザ上で走らせること
で SPA を実装するアイディアが実証されまし
た。
• このような形を含めて WebAssembly の活用の
幅が広がると、その恩恵に預かれるプログラ
マやユーザーも増えるのでは、と感じました。
Blazor は SPA 開発者の負担を大幅
に緩和できる
• Blazor は、"ブラウザ上で.NETが動く" のその先、
SPAフレームワークと IDE 支援までをも提供す
ることで、SPA 開発の開発者体験が大きく改善
することを示してみせました。
• 開発者負担が減ることで、よりよき成果を、
より迅速にユーザーに届けることができるの
では、と期待が膨らみます。
JavaScript 以外の言語とランタイ
ムが使える可能性

Lean, Practice, Share.

Q
A
Q & A

C# で Single Page Web アプリが開発できるフレームワーク&開発環境「Blazor」 ― その概要と Web アプリ開発者にもたらす利点

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to C# で Single Page Web アプリが開発できるフレームワーク&開発環境「Blazor」 ― その概要と Web アプリ開発者にもたらす利点

Similar to C# で Single Page Web アプリが開発できるフレームワーク&開発環境「Blazor」 ― その概要と Web アプリ開発者にもたらす利点 (20)

More from Jun-ichi Sakamoto

More from Jun-ichi Sakamoto (20)

Recently uploaded

Recently uploaded (10)