.NET Core3.0からWEBフレームワーク 【ASP.NET Core Blazor】が正式にリリースされました。
私はASP.NETに関してはWEB Forms、MVCの開発経験がありますがBlazorについてはMicrosoftの説明を見てもさっぱりわからなかったため、実際に触って覚えることにしました。本ページでは”私なり”にBlazorとは何かをわかりやすく解説していきます。
目次
Blazorとは
まずは.NET CoreとBlazorについて重要な項目だけに絞り説明します。
もっと詳しく知りたい方はMicrosoftのページをご確認ください。
.NET Coreとは
- オープンソースフレームワークである
- .NET Coreアプリを動かすにはランタイムのインストールが必要
※ただし今後は.NET5に統合されるため、.NET5がインストールされた環境では動作するはず - クロスプラットフォームに対応している（Windows、macOS、Linux）
- 複数バージョンを混在してインストールできる
- .NET Standardに準拠しているため理論上は.NET 4.x系（MVC）よりもパフォーマンスが高い
Blazorとは
- .NETで開発できるWEBフレークワーク（.NET Coreアプリ）
- メイン言語はC#（VBは選択不可）
- サーバとクライアントはSignalRを使った接続をする
- クライアントサイドの処理もC#で実装できる
- サーバー＆クライアント上で処理を行う「Blazor Server」と全てクライアント上で処理を行う「Blazor WebAssembly」の方式を選択できる（2020年8月時点）
Blazorの一番の特徴は「クライアントサイドの処理もC#で実装できる」という点です。クライアントサイドとはWebブラウザ側のことを指します。
主に「Javascript」を使って実装されることが多い部分です。
なんとBlazorでは「Javascript」で実装していた処理をC#で実装できてしまうんです。
これを可能にしているのはSignalRという接続方式です。
クライアントとサーバがSignalRで接続することで常時接続状態になり、Postしなくてもサーバ側の処理（C#）を呼び出すことができます。
また、従来通りJavascriptを使用することもできます。
私はこれを知ったときC#をJavascriptに変換してくれるのかなとも思ったですが、どうやらそうではなく本当にサーバ側のC#を呼び出しているようなのです。もう未来すぎて何言っているかわかりません、という方は次に実際にプロジェクトを作るのでどんなものか見てみましょう。
Blazorのプロジェクトを作ってみる
Blazorのプロジェクトを作ってみましょう
準備するもの
- 開発ツール（Visual Studio、Visual Studio Code、Visual Studio For Mac）
今回、私が使ったのは「Visual Studio 2019 Community」です。
プロジェクトの作成方法
今回Blazorをするため久しぶりにVisial Studioを起動しましたが、アップデートがたくさん溜まっていて使うまでに時間がかかりました。
古いままだとBlazorが使えない可能性があるので、まずは最新にアップデートしましょう。
最新にアップデートしたら早速プロジェクトを作ってみます。
テンプレートから Blazorアプリを選択します。
次にBlazorアプリの種類を選択します。
「Blazorサーバアプリ」とは、WebフォームやMVCと同じくサーバ＆クライアントで処理を行う方式です。
「Blazor WebAssembly」とは、初回起動時にクライアントへC#を含むプログラムをダウンロードし、ブラウザのWebAssemblyを使って完全にクライアント側だけで処理を行う方式です。
今回は「Blazorサーバアプリ」を選択してみます。
プロジェクトを作成するとサンプルページが用意されているので、まずはデバッグ実行してみましょう。
以下のようなサンプル画面が表示されます。
左側メニューにあるCounterを選択してみると、ボタンを押す度に数字がインクリメントされるサンプルのページが表示されます。
このページのrazorファイルは以下のようになっています。
とてもシンプルですね。
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
クライアント側にダウンロードされたHTMLを見てみるとボタンにIDは付いていないし、Onclickイベントもありません。でもちゃんと動くんです。
これがBlazor（SignalR）のすごいところでしょうか。
そのSignaiRは常時接続した状態になりますが、多少ネットワークの切断があっても再接続はしてくれるそうです。
次に左のメニューからFetch dataを選択してみましょう。
このページはWebサービスから一覧データを取得するサンプルになります。
このページのrazorファイルは以下のようになっています。
WEBサービスから取得したデータで一覧を動的に作成しています。
こちらもシンプルでわかりやすいですね。
@page "/fetchdata"
@using BlazorApp1.Data
@inject WeatherForecastService ForecastService
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from a service.</p>
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
@code {
private WeatherForecast[] forecasts;
protected override async Task OnInitializedAsync()
{
forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
}
}
BlazorサーバアプリとBlazor WebAssemblyの違い
サンプルページでBlazorやSignalRのことが少しわかったかと思います。
しかし、BlazorサーバアプリとBlazor Assemblyの違いがわからず、どっちを選択すればいいかわからないという方もいると思います。私自身もその一人でした。このモヤモヤを解決させるに決定的な違いをお見せします。
それはダウンロードされるファイルです。
初期ページのダウンロードされたファイルを比較してみます。
以下をご覧ください。
見ての通り、Blazor WebAssemblyの方が圧倒的にダウンロードされるファイルが多いです。
これはBlazorサーバアプリでいうサーバ側の処理も全てクライアント上で実行するため、初めに全てのプログラムをダウンロードするという仕組みになっています。そのため初期起動だけダウンロードに時間がかかるデメリットはありますが、それ以降は画面遷移もサーバを介さないのでサクサク動きます。
なんとなくWindows FormのシステムをClickOnceでWeb上に配置したイメージに似ている感じがします。まぁ動くのはWebシステムなんですけどね。
このBlazor WebAssemblyの使いどころの一つはSPA(Single Page Application)です。SPAとは単一のWEBページで構成するアプリケーションのことで、サーバを介さずに処理するBlazor WebAssemblyはSPAのためにあると言っても過言でではないと思います。
Microsoftの力の入れ方を見てもBlazorは間違いなくこれからWebフォームやMVCに代わるWebアプリケーションのフレームワークになっていくと思います。現在Webフォームで作られたシステムも今後はBlazorで再構築するという話も出てくるでしょうから、そんな未来を見据えて今から勉強していくのも良いと思います。
今回はサンプルをベースにした紹介でしたが、今後はBlazorを使った様々なWebページの作り方も本サイトにて紹介していきたいと思います。
コメントを残す