私にとって2021年はBlazor WebAssemblyとAzureを使いはじめる年になりました。最初は既存のデスクトップアプリをMAUIで作り直すことを考えていたのですが、8月にBlazor WebAssemblyのAOTコンパイルの技術的な検証をしてプロダクトに採用することを決めて、それからは.NET 6のプレビュー版を使いながら開発をしてきました。プレビュー版のおかげで.NET 6のGAとほぼ同じタイミングでプロダクトを実戦投入することができました。
MAUIやBlazorは日本語よりも英語の方が情報が豊富なので、英語のブログやYouTubeを見て情報収集することが増えました。YouTubeのおすすめにも.NET関連がレコメンドされることが増えてきて、動画の閲覧履歴の知的レベルが向上した気がします。
.NET MAUI Blazor
YouTubeでおすすめされた.NET MAUI Blazorの動画を眺めていました。
この動画を見るまでは私は.NET MAUI Blazorが動作する仕組みをよく理解していませんでした。この動画を見てBlazor WebAssemblyよりもかなり高速な処理ができるのではと思い、簡単な検証をしてみることにしました。
.NET MAUI Blazorでライフゲーム
.NET MAUI Blazorでライフゲームを動かして処理時間を計測してみます。
セットアップ
まず最初にVisual Studio 2022 Previewで.NET MAUI Blazor Appのアプリを作成します。
祝 .NET 6 GA！.NET 6 での開発 Tips や試してみたことなど、あなたの「いち推し」ポイントを教えてください【PR】日本マイクロソフト Advent Calendar 2021に以下の記事を投稿しました。この記事のPages/Index.razorをそのままコピーして使います。
起動します。リリースビルドをしようとしたのですがエラーが発生して解決方法がわからなかったので、今回はデバッグなしで開始で起動しました。
処理時間の比較
結果はこのようになりました。
| 処理時間 | |
|---|---|
| .NET MAUI Blazor | 5.306 秒 |
| Blazor WebAssembly (AOT) | 9.163 秒 |
| Blazor WebAssembly (non-AOT) | 12.575 秒 |
.NET MAUI Blazor、速かったです。
画像処理（エッジ検出）の処理時間を比較
Blazor Advent Calendar 2021に投稿したBlazor WebAssemblyのAOTコンパイルで処理が遅くなることもあるのエッジ検出も試してみました。NuGetでSixLabors.ImageSharpをインストールして、ライフゲームと同様にPages/Index.razorをコピーします。Pages/Index.razorには一点だけ変更が必要で、MemoryStreamのために@using System.IO;を追加します。
起動した画面で512x512のPNG画像を指定します。
| 処理時間 | |
|---|---|
| .NET MAUI Blazor | 0.118 秒 |
| Blazor WebAssembly (AOT) | 2.432 秒 |
| Blazor WebAssembly (non-AOT) | 2.029 秒 |
まとめ
Blazor WebAssemblyのアプリのために作ったコードを.NET MAUI Blazorで動作させて、.NET MAUI Blazorが高速に動作することを確認しました。
Blazor WebAssemblyは速度では負けてしまいましたが、Blazor WebAssemblyにはWebブラウザで動作するという利点があります。私がBlazor WebAssemblyで開発をはじめたきっかけは、ある自治体のPCにどうしてもデスクトップアプリをインストールできなかった経験があったからでした。
うまく工夫すればBlazor WebAssemblyと.NET MAUI Blazorで大部分のコードを共有して、Webアプリとデスクトップアプリを同時に提供することも可能になりそうです。来年はそういった開発にもチャレンジできればと思っています。