ASP.NETの進化とASP.NET Core Blazorの凄さ

ASP.NETの進化と
ASP.NET Core Blazorの凄さ

2
Name：
岡田将
Work：
Programmer
Blog：
http://sonic.blue/it/
主にMicrosoft系（ASP.NET／C#／VB.NET）やPHPなど
Twitter：
蒼いねずみ @Sonic16bit
自己紹介

Part 01
ASP.NETの歴史と進化
CONTENTS
ASP.NETの進化とASP.NET Core Blazorの凄さ
Part 03
WebAssemblyの技術
Part 02
ASP.NET Core Blazor Serverとは
Part 04
ASP.NET Core Blazor WebAssemblyとは

注意
あくまで個人的見解となります。
実際と異なる内容も含まれている
かもしれませんので、ご了承くだ
さい。

Part.01

ASP(Active Server Pages)
ASP.NET WebForm
ASP.NET MVC ASP.NET Core Blazor Server
ASP.NET Core MVC ASP.NET Core Blazor
WebAssembly
1996 2002 2009 2016 2019 2020
VBScript,JavaScript
ASP.NET 3.5SP1-4.6
MVC1-MVC5
.NET Core 3.0
ASP.NET 1.0-3.5,Ajax
VB.NET,C#
.NET Core 1.0,MVC5,SPA
.NET Core 3.1

ASPはスクリプト言語で、ほぼPHPと同じ感じでコード記述可能
VBScript／JScriptで記述
<% ‘データベースとの接続処理コードを記入（省略）%>
<table>
<%
For i=0 to 10
%>
<tr>
<td><%= i%></td>
<td><%= rs(“name”) %></td>
<td><input type=“text” value=‘<% = rs(“phone”) %>’ /></td>
</tr>
<%
Next
%>
</table>
これがASP
ASP（ActiveServerPage）
Since 1996～

ASPはスクリプト言語で、ほぼPHPと同じ感じでコード記述可能
これはPHP
ASP（ActiveServerPage）
Since 1996～
PHPで記述
<?php #データベースとの接続処理コードを記入（省略）?>
<table>
<?php
for($i=1;$i<=10;$i++){
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $rs[“name”]; ?></td>
<td><input type=“text” value=‘<?php echo $rs[“phone”]; ?>’ /></td>
</tr>
<?php
}
?>
</table>

ASP.NET WebForm
Since 2002～
ASP.NETはコンパイラ言語になって登場
Windows Formのようにデザイナでサクサク作ることが
出来るようになった
（その分、中身はブラックボックス化）
また、DataBindによる強力なデータ反映が特徴
Single Page Application（SPA）の形式をとっているため、1画面でデータ
登録処理を行うことが可能になった
リリース時は出来なかった非同期通信（Ajax）もUpdatePanelにより
実装された
WindowsServer
のみ動作

ASP.NET WebForm
Since 2002～
<%@ Page Language="C#" Inherits="webform.Default" %>
<html>
<body>
<form id="form1" runat="server">
<asp:ScriptManager id="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="background:#aaf;">
Postback:<br/>
<asp:Label id="label1" runat="server"></asp:Label>
<asp:Button id="button1" runat="server" Text="Click me!" OnClick="button1Clicked" />
</div>
<asp:UpdatePanel id="updatepanel1" runat="server">
<ContentTemplate>
<div style="background:#afa;">
UpdatePanel:<br/>
<asp:Label id="label2" runat="server"></asp:Label>
<asp:Button id="button2" runat="server" Text="Click me!" OnClick="button2Clicked" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
HTML
サイド

ASP.NET WebForm
Since 2002～
サーバー
サイド
C#で記述
using System;
using System.Web;
using System.Web.UI;
namespace webform
{
public partial class Default : System.Web.UI.Page
{
public void button1Clicked(object sender, EventArgs args)
{
label1.Text = DateTime.Now.ToLongTimeString();
label2.Text = DateTime.Now.ToLongTimeString();
button1.Text = "Postback clicked";
button2.Text = "Postback clicked";
}
public void button2Clicked(object sender, EventArgs args)
{
label1.Text = DateTime.Now.ToLongTimeString(); //Updatepanelからの実行では動作しない
label2.Text = DateTime.Now.ToLongTimeString(); //Updatepanelからの実行で動作
button1.Text = “Updatepanel clicked”; //Updatepanelからの実行では動作しない
button2.Text = "Updatepanel clicked"; //Updatepanelからの実行で動作
}
}
}

ASP.NET WebForm
Since 2002～
コードを見て、難しそうと思ったかもしれませんが、
実際の画面作成などは、ドラック＆ドロップで簡単！
デザイン機能
が便利

ASP.NET MVC
Since 2009～
WindowsServer
のみ動作
当時はやっていた、MVCフレームワークに乗っ取った設計で
フロントの記述はRazor構文になって登場
なんと、コードはすべてオープンソース化
（なので、中身はとても透明化で覗き放題）
既存のASPタグは無くなって、HTMLヘルパー関数が使用可能になる

ASP.NET MVC
Since 2009～
HTML
サイド
Razor構文で記述
@{ //データベースとの接続処理コードを記入（省略）}
<table>
@for (int i = 0; =10; i++) {
<tr>
<td>@i</td>
<td>@Model.name</td>
<td><input type=“text” value=“@Model.phone”/></td>
</tr>
}
</table>

ASP.NET MVC
Since 2009～
サーバー
サイド
C#で記述
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
Namespace mvcApp.Controllers
{
public class SampleController : Controller
{
[HttpGet]
public ActionResult button1Clicked()
{
//ここにコードを書く
return View();
}
[HttpGet]
public ActionResult button2Clicked()
{
//ここにコードを書く
return View();
}
}
}
ここへJavascriptでbutton1Clickedの
Getメソッドを送る

ASP.NET MVC
Since 2009～
WindowsServer
のみ動作
Javascriptフレームワークは使い放題だが、
非同期通信（Ajax）は未対応なので、自力で実装する
Controller側にC#のコードは記述するので、裏側はそれなりに
コーディングが必要
DataBindの機能がなくなったため、データ処理は別の形で
実装しなければいけない（EntityFrameworkで実装する、これはこれで便利）
また、MVCではASPのように複数の画面を遷移しつつデータ登録処理などを
行わなければならないので、画面数がWeb Formより大幅に増えてしまう

ASP.NET Core MVC
Since 2016～
Linuxも動作
依存している.NET FrameWorkが.NET Coreになって、
Linuxに対応したバージョンが登場！
出来ることは一緒なので、割愛

ASP.NET Core SPA
Since 2016～
Angular（バージョン4）、React、Reduxといった
SPAフレームワークがASP.NETのプロジェクトテンプレートで登場
ASP.NET Web API + ASP.NET MVC
+ jQuery + Bootstrap + knockout.js などで複数の技術を利用して
頑張って構築されているテンプレートとなっている
サーバー側コードはNode.jsなので、TypeScript記述になる
Linuxも動作

Part.02

SPAフレームワークだとTypeScriptが必要だったものが、
サーバー側コードをASP.NET Core SignalR + C#でコーディングが可能と
なった
いままでは、画面側に書けるコードはRazor構文やC#っぽい
特定のコードだけだったが、.NET Standard 2.0まで対応されたため、
ちゃんとしたC#のコードが記述可能になった
Web Formの意思を引き継いでいるということなので、うまく構成すれば、
似たような開発も可能！？
もちろんLinux（macOS）でも動作可能
ASP.NET Core Blazor Server
Since 2019～

SignalR（Websocket）でサーバーと通信して、サーバー処理を実行可能なため、
リアルタイムなレンダリングが可能となっている（サーバーサイドレンダリング）
Since 2019～

従来のヘルパー関数ではなく、しっかりとしたコンポーネント開発に
対応しているため、再利用が可能となっている
Since 2019～
Dialog.razor（コンポーネント側）
<div>
<h1>@Title</h1>
@Content
<button @onclick=“dialogClick”>押してね</button>
</div>
@code {
[Parameter]
public string Title { get; set; }
[Parameter]
public RenderFragment Content { get; set; }
private void dialogClick()
{
Console.WriteLine(“押されたよ！");
}
}
Index.razor（コンテンツ側）
@page "/"
<h1>Blazorサンプル</h1>
<button @onclick=“ButtonClick”>ボタン</button>
<div>@InputText</div>
<Dialog Title=“testdialog” Content=“ダイアログ表示”>
押されたかな？
</Dialog>
@code {
string InputText;
void ButtonClick()
{
InputText = “ボタンが押されたよ";
}
}

JavaScriptから脱却するために期待される技術
Javascriptにはインタプリタ型の利点もありますが、コンパイラ型と比べると実行速度は遅
いです。
また、クライアントのブラウザバージョンに依存する関数などもあり、プログラムとして
は不安定になります。
そこでWebAssemblyでは、C／C++のコンパイル済みのバイナリ（WASM）ファイルを読み
込み、ブラウザ側から実行することで、高速化およびJavascriptに依存しないプログラミン
グが可能となる技術となっています
事前に独立したバイナリファイルがあるため、完全にサーバーとの通信を発生させないこ
とも可能となっています。

バイナリなのにどうやって各種CPUへ対応できるのか
実はWebAssembly は本来の意味でのアセンブリ言語ではなく、あくまでサーバー側がブ
ラウザ側に対応したバイナリファイルを出力しています。
（x86、x64、ARMなどのコンパイルターゲットが不明なため）
実際にどのマシンで実行されるかわからないため、ブラウザが WebAssemblyのバイナリ
コードをダウンロードした時点で、実行可能なアセンブリに変換がなされます。
そのため、CPUの種類に影響されない実行が可能となっています。

WebAssemblyの期待される活用範囲
配布されるのがアセンブリのため、コードのセキュリティ性が高いうえ、従来のJavascriptでの
実行では遅かったり、難しい部分に対して置き換えて実行させることで速度の向上が期待でき
ます。
実行速度はC／C++のソフトウェア速度には劣りますが、２０％程度の負荷程度となっています。
また、OSとは切り離されたブラウザ上での実行となるため、安全な実行となります。
（クラッシュしても実行クライアントに大きな影響を与えない）
そのため、今までサーバー側で処理していた演算をクライアント側に分散させたり、一時的な
オフライン処理はもちろん、独立したクライアントアプリとしても実行可能となります。
（クライアントへ依存した分、WASMファイルは大きくなり、ロード時間もかかります）
例）ゲーム / 動画編集 / 3D レンダリング / 音楽編集など
既にAutoCADやDoom3のデモが移植されています（ダウンロードに時間がかかる）
https://wasm.continuation-labs.com/d3demo/

WebAssemblyの制限
便利なWebAssemblyですが、やはりそれなりの制限はかかります。
WebAssemblyからは、ブラウザ側のDOM / WebGL / WebAudio などには直接アクセスはでき
ません、Javascript経由で実行する必要があります。
WebAssembly対応ブラウザのシェアは徐々に増えてはいますが、実行前にチェック処理な
どが必要となります。（おもにIE11対策）

現時点で、WebAssembly を完全にサポートしている言語は C / C++ / Rustしかありません。
Kotlin / .NETは現在開発中
→ ASP.NET Core Blazor WebAssemblyは2020年予定！

Part.04

ASP.NET Core Blazor WebAssembly
Coming Soon 2020～
RazorファイルにBlazor構文で、HTMLと混在して記述する
内部の@code内にC#が記述できます
C#の依存関係、.NET ランタイムがWASMファイルでダウンロードされ、
WebAssemblyの技術によりクライアント側で実行されます
完全にWeb分離した場合は初回のダウンロードだけで、
すべて完結することが可能
（現時点ではURL Rewriteなどインストールが必要）

Coming Soon 2020～
.net Core 3.1を
インストールする
と選択できる
WebAssembly版はPrewiewのテンプレートを
ダウンロードすると追加される
初回実行はNuget再構築が必要なので、
何回か再実行するとうまく動作する
※要インターネット接続

Coming Soon 2020～
メリット
・Blazor Serverと違い、.NETサーバー側に依存せずに単体の動作が可能
・クライアントにダウンロードされた後は、切断されてもページが完全に機能する
・クライアントのリソースと機能を完全に活用が可能（JavaScript制御）
・アプリ配布する場合では、必ずしもASP.NET CoreのWeb サーバーは必要ない
デメリット
・WebAssemblyに対応したブラウザバージョンが必要
・使える機能はクライアントのブラウザーが持っている機能までに制限される
・依存関係を使いすぎると、ダウンロードサイズが大きくなり、初回の読込みに時間がかかる
・.NETランタイムとツールのサポートやデバッグ機能に制限がある

メリット
・Blazor Serverと違い、.NETサーバー側に依存せずに単体の動作が可能
・クライアントにダウンロードされた後は、切断されてもページが完全に機能する
・クライアントのリソースと機能を完全に活用が可能（JavaScript制御）
・アプリ配布する場合では、必ずしもASP.NET CoreのWeb サーバーは必要ない
デメリット
・WebAssemblyに対応したブラウザバージョンが必要
・使える機能はクライアントのブラウザーが持っている機能までに制限される
・依存関係を使いすぎると、ダウンロードサイズが大きくなり、初回の読込みに時間がかかる
・.NETランタイムとツールのサポートやデバッグ機能に制限がある
Coming Soon 2020～
→ 結局はWebAssemblyなので、ほぼ同じメリット・デメリットとなるが、
C#と.NET Standerdのライブラリを使って開発ができるのが一番のメリット！

01
JavaScriptをなるべく記述はしなくてもよくなるが、連携には必要になるので、
それなりにJavaScriptの理解はまだまだ必要（特にBlazor Server側）
まとめというか所感
02 .NET Standerdのライブラリは強いが、Blazor WebAssemblyでは依存関係を増やしすぎると
起動が重くなるので注意
03 独立したクライアントとして利用するには、配布方法や動作機能がまだ未成熟？なので、
正式リリースするまではBlazor WebAssemblyのみでの開発は控えるべきかも
（PWAとの連携などがうまく出来上がれば流行るかも）
04 将来IE11も淘汰され、Edge Chromium版に移行されれば、ブラウザ互換性は考えなく
てもよくなり、その時にはBlazor Server＋Blazor WebAssemblyの組み合わせで、
最高のWebアプリ開発ができそう
05 C#とHTML+Blazor構文のみで、少なくともJavaScriptはもう書かなくてよくなる未来は
きっと来るはず（TypeScriptを書かなくていいとは言ってない）

参考資料
WebAssembly: 「なぜ」と「どうやって」 [翻訳記事]
https://dev.to/nabbisen/webassembly--3385
ASP.NET Core Blazor の概要（WebAssemblyのインストール）
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/get-started
Doom3のデモ
https://wasm.continuation-labs.com/d3demo/

Thank you for your kind attention
ご清聴ありがとうございました！

ASP.NETの進化とASP.NET Core Blazorの凄さ

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to ASP.NETの進化とASP.NET Core Blazorの凄さ

Similar to ASP.NETの進化とASP.NET Core Blazorの凄さ (20)

More from Sho Okada

More from Sho Okada (15)

Recently uploaded

Recently uploaded (7)

ASP.NETの進化とASP.NET Core Blazorの凄さ