まいど、多肉系のエンジニアのほりです。
今回は、最近試してみたかったフレームワークASP.NET Core Blazorについてお話します。
1. ASP.NET Core Blazor とは
ASP.NET Core Blazor とは 、C# と HTML(Razor) でWebアプリケーションが作れるフレームワークです。
Blazor には、クライアントサイド Blazor とサーバーサイド Blazor があります。
クライアントサイド Blazor は、ブラウザ上でバイナリ実行を可能とする WebAssembly の技術を利用することで、C# が使えるようになっています。
一方サーバサイド Blazor は 、リアルタイムウェブを実現する 、SignalR(WebSocketやCometなどを吸収してくれている仕組み) を利用することで WebAssembly 非対応のブラウザでも利用できるようにしているみたいです。
試してみたい！と思った理由は以下の通りです。
・ JavaScript の代わりに C# が使える
・ Vue、Angular や React などといった知識なしで SPA が書ける
・ .NET ライブラリなどがそのまま使える
Blazor がどんなものかを知るために、ひとつ Blazor アプリを作成してみることにしました。
2. プロジェクトの作成
今回は Visual Studio 2019 を利用して検証しました。
まずはじめに、Blazor アプリというものがありますため、それを選択してプロジェクトの作成をはじめます。
任意のプロジェクト名をつけて、作成します。
続けて、 Blazor サーバーアプリも作成します。
出来上がったソリューションは以下画像のような構成となりました。
デフォルトではカウントアップするアプリと、天気データ（固定値）の一覧を表示するアプリが含まれていました。
3. コーディング
みんな大好き「Hello World!!」だけだとつまらないと思ったため、超かんたんな足し算アプリをコーディングしました。
今回は Pages 配下に Test.razor というファイルを作成しました。
@page "/test"
<h1>Calculate</h1>
<input type="text" id="num1" @bind="Num1">
<input type="text" id="num2" @bind="Num2">
<button class="btn btn-primary" @onclick="() => Calculate(Num1, Num2)">blazor</button>
<span id="blazor">@result</span>
<button class="btn btn-primary" onclick="document.querySelector('#js').textContent = [+document.querySelector('#num1').value, +document.querySelector('#num2').value].reduce((a, x) => a += x, 0);">js</button>
<span id="js">0</span>
@code {
private decimal Num1 = 0.1m;
private decimal Num2 = 0.2m;
private decimal result;
void Calculate(params decimal[] number)
{
result = number.Sum();
}
}4. 動かしてみた
実際に動かしてみました！
Blazor での 0.1 + 0.2 の計算結果は 0.3
JavaScript での 0.1 + 0.2 の計算結果は 0.30000000000000004 となりました！
これは 、JavaScript では IEEE 754 の倍精度浮動小数点数のため、計算結果が異なってきます！
これを解決するために数値計算のライブラリなどが出回ってはいるのですが、Blazor ならライブラリ選定などの悩みもなくなりそうですね。
5. 所感
フロントエンドの技術は特に移り変わりが速いため、このようなフレームワークがあると技術習得もしやすくてよいと思いました。
ただし、まだ実験的なプロダクトではあるため、今後も追っていきたいと思います！
コメント