ASP.NETの進化とASP.NET Core Blazorの凄さ
2 likes7,161 views
.NETラボ勉強会2019年11月のセッション資料です。 実はASPは歴史が長く、1996年から始まりました。 今回は今までのASPの歴史から、最新の「ASP.NET Core Blazor」の具体的な説明までをお話しさせていただきました。
![ASPはスクリプト言語で、ほぼPHPと同じ感じでコード記述可能
これはPHP
ASP.NETの歴史と進化
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>](https://image.slidesharecdn.com/asp-191130082603/85/ASP-NET-ASP-NET-Core-Blazor-8-320.jpg)
![ASP.NETの歴史と進化
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メソッドを送る](https://image.slidesharecdn.com/asp-191130082603/85/ASP-NET-ASP-NET-Core-Blazor-15-320.jpg)
![ASP.NET Core Blazor Serverとは
従来のヘルパー関数ではなく、しっかりとしたコンポーネント開発に
対応しているため、再利用が可能となっている
ASP.NET Core Blazor Server
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 = “ボタンが押されたよ";
}
}](https://image.slidesharecdn.com/asp-191130082603/85/ASP-NET-ASP-NET-Core-Blazor-22-320.jpg)
![参考資料
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/](https://image.slidesharecdn.com/asp-191130082603/85/ASP-NET-ASP-NET-Core-Blazor-36-320.jpg)
ASP.NETの進化とASP.NET Core Blazorの凄さ
- 3. 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とは
- 6. 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 ASP.NETの歴史と進化 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
- 7. 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.NETの歴史と進化 ASP（ActiveServerPage） Since 1996～
- 8. ASPはスクリプト言語で、ほぼPHPと同じ感じでコード記述可能 これはPHP ASP.NETの歴史と進化 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>
- 9. ASP.NETの歴史と進化 ASP.NET WebForm Since 2002～ ASP.NETはコンパイラ言語になって登場 Windows Formのようにデザイナでサクサク作ることが 出来るようになった （その分、中身はブラックボックス化） また、DataBindによる強力なデータ反映が特徴 Single Page Application（SPA）の形式をとっているため、1画面でデータ 登録処理を行うことが可能になった リリース時は出来なかった非同期通信（Ajax）もUpdatePanelにより 実装された WindowsServer のみ動作
- 10. ASP.NETの歴史と進化 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 サイド
- 11. ASP.NETの歴史と進化 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からの実行で動作 } } }
- 14. ASP.NETの歴史と進化 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>
- 15. ASP.NETの歴史と進化 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メソッドを送る
- 17. ASP.NETの歴史と進化 ASP.NET Core MVC Since 2016～ Linuxも動作 依存している.NET FrameWorkが.NET Coreになって、 Linuxに対応したバージョンが登場！ 出来ることは一緒なので、割愛
- 18. ASP.NETの歴史と進化 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も動作
- 19. Part.02 ASP.NET Core Blazor Serverとは
- 20. ASP.NET Core Blazor Serverとは 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～
- 21. SignalR（Websocket）でサーバーと通信して、サーバー処理を実行可能なため、 リアルタイムなレンダリングが可能となっている（サーバーサイドレンダリング） ASP.NET Core Blazor Serverとは ASP.NET Core Blazor Server Since 2019～
- 22. ASP.NET Core Blazor Serverとは 従来のヘルパー関数ではなく、しっかりとしたコンポーネント開発に 対応しているため、再利用が可能となっている ASP.NET Core Blazor Server 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 = “ボタンが押されたよ"; } }
- 25. バイナリなのにどうやって各種CPUへ対応できるのか WebAssemblyの技術 実はWebAssembly は 本来の意味でのアセンブリ言語ではなく、あくまでサーバー側がブ ラウザ側に対応したバイナリファイルを出力しています。 （x86、x64、ARMなどのコンパイルターゲットが不明なため） 実際にどのマシンで実行されるかわからないため、ブラウザが WebAssemblyのバイナリ コードをダウンロードした時点で、実行可能なアセンブリに変換がなされます。 そのため、CPUの種類に影響されない実行が可能となっています。
- 26. WebAssemblyの期待される活用範囲 WebAssemblyの技術 配布されるのがアセンブリのため、コードのセキュリティ性が高いうえ、従来のJavascriptでの 実行では遅かったり、難しい部分に対して置き換えて実行させることで速度の向上が期待でき ます。 実行速度はC／C++のソフトウェア速度には劣りますが、２０％程度の負荷程度となっています。 また、OSとは切り離されたブラウザ上での実行となるため、安全な実行となります。 （クラッシュしても実行クライアントに大きな影響を与えない） そのため、今までサーバー側で処理していた演算をクライアント側に分散させたり、一時的な オフライン処理はもちろん、独立したクライアントアプリとしても実行可能となります。 （クライアントへ依存した分、WASMファイルは大きくなり、ロード時間もかかります） 例）ゲーム / 動画編集 / 3D レンダリング / 音楽編集など 既にAutoCADやDoom3のデモが移植されています（ダウンロードに時間がかかる） https://wasm.continuation-labs.com/d3demo/
- 27. WebAssemblyの制限 WebAssemblyの技術 便利なWebAssemblyですが、やはりそれなりの制限はかかります。 WebAssemblyからは、ブラウザ側のDOM / WebGL / WebAudio などには直接アクセスはでき ません、Javascript経由で実行する必要があります。 WebAssembly対応ブラウザのシェアは徐々に増えてはいますが、実行前にチェック処理な どが必要となります。（おもにIE11対策）
- 29. WebAssemblyの制限 WebAssemblyの技術 現時点で、WebAssembly を完全にサポートしている言語は C / C++ / Rustしかありません。 Kotlin / .NETは現在開発中 → ASP.NET Core Blazor WebAssemblyは2020年予定！
- 30. Part.04 ASP.NET Core Blazor WebAssemblyとは
- 31. ASP.NET Core Blazor WebAssembly Coming Soon 2020～ ASP.NET Core Blazor WebAssemblyとは RazorファイルにBlazor構文で、HTMLと混在して記述する 内部の@code内にC#が記述できます C#の依存関係、.NET ランタイムがWASMファイルでダウンロードされ、 WebAssemblyの技術によりクライアント側で実行されます 完全にWeb分離した場合は初回のダウンロードだけで、 すべて完結することが可能 （現時点ではURL Rewriteなどインストールが必要）
- 32. ASP.NET Core Blazor WebAssembly Coming Soon 2020～ ASP.NET Core Blazor WebAssemblyとは .net Core 3.1を インストールする と選択できる WebAssembly版はPrewiewのテンプレートを ダウンロードすると追加される 初回実行はNuget再構築が必要なので、 何回か再実行するとうまく動作する ※要インターネット接続
- 33. ASP.NET Core Blazor WebAssemblyとは ASP.NET Core Blazor WebAssembly Coming Soon 2020～ メリット ・Blazor Serverと違い、.NETサーバー側に依存せずに単体の動作が可能 ・クライアントにダウンロードされた後は、切断されてもページが完全に機能する ・クライアントのリソースと機能を完全に活用が可能（JavaScript制御） ・アプリ配布する場合では、必ずしもASP.NET CoreのWeb サーバーは必要ない デメリット ・WebAssemblyに対応したブラウザバージョンが必要 ・使える機能はクライアントのブラウザーが持っている機能までに制限される ・依存関係を使いすぎると、ダウンロードサイズが大きくなり、初回の読込みに時間がかかる ・.NETランタイムとツールのサポートやデバッグ機能に制限がある
- 34. メリット ・Blazor Serverと違い、.NETサーバー側に依存せずに単体の動作が可能 ・クライアントにダウンロードされた後は、切断されてもページが完全に機能する ・クライアントのリソースと機能を完全に活用が可能（JavaScript制御） ・アプリ配布する場合では、必ずしもASP.NET CoreのWeb サーバーは必要ない デメリット ・WebAssemblyに対応したブラウザバージョンが必要 ・使える機能はクライアントのブラウザーが持っている機能までに制限される ・依存関係を使いすぎると、ダウンロードサイズが大きくなり、初回の読込みに時間がかかる ・.NETランタイムとツールのサポートやデバッグ機能に制限がある ASP.NET Core Blazor WebAssemblyとは ASP.NET Core Blazor WebAssembly Coming Soon 2020～ → 結局はWebAssemblyなので、ほぼ同じメリット・デメリットとなるが、 C#と.NET Standerdのライブラリを使って開発ができるのが一番のメリット！
- 35. 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を書かなくていいとは言ってない）
- 36. 参考資料 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/
- 37. Thank you for your kind attention ご清聴ありがとうございました！