Blazor WebAssemblyとは

WebAssemblyを利用して、クライアントでC#をそのまま使用する技術です。C#のコードをJavaScriptにトランスパイルするものでは"ありません"。
.NetのランタイムそのものをWebAssemblyとしてダウンロードしてC#コードを実行します。基本的に標準技術に乗っかっていますので、プラグインは不要です。
ランタイムをまるまるダウンロードさせるあたり、なかなか豪快な感じで好きです。
Blazor Serverというのもありますが、今回はBlazor WebAssemblyについてのみ記述します。

2020年ようやく正式版が出たばかりで、SPAのフレームワークとして展開されています。

出来ること

C#のみでのWebアプリケーション開発
クライアント側のみでのBlazor利用
過去の.Netの資産活用
JavaScriptライブラリの呼出
PWAとしてビルド

一通りのことは出来そう、という印象です。
一つデメリットとしては、これはもう根本的な問題ですが、最初にランタイムをダウンロードする都合上、特に初回アクセスが重いです。2回目以降はキャッシュを利用するとのことです。

実際に触ってみる

Visual Studio 2019で新規プロジェクトを作成、その際にBlazorのテンプレートが選択できます。
PJを作成すると、その時点で動作するサンプルアプリケーションが作られています。
サンプルはシンプルなナビゲーション付き2カラムのUIですね。

フォルダ構成

主なコードが入っているのが、下記フォルダです。

Sharedフォルダ
- MainLayout.razor:ベースとなるレイアウト
- NavMenu.razor:ナビゲーションメニュー
Pagesフォルダ:メインコンテンツ
- Counter.razor:サンプルカウンター
- FetchData.razor:サンプルデータ表示
- Index.razor:サンプルトップページ

コード

サンプルコードの中身を見てみましょう。

MainLayout.razor

@inherits LayoutComponentBase

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">
        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>

コードからもナビゲーション付きのレイアウトであることが読み取れると思います。

FetchData.razor

@page "/fetchdata"
@inject HttpClient Http

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</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 Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public string Summary { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

サーバ側にあるweather.jsonを読み取って表示するページです。
WeatherForecastを表示用のクラスとして定義して、配下のプロパティをデザインに紐づけて表示しています。
UI部分はDjangoのTemplateファイルに似ているな～という印象です。他のフレームワークを触ったことがないのでわかりませんが、似たような感じなのでしょうか。

所感

とりあえずサンプルまで触ってみた感想としては、比較的シンプルなUIでのアプリケーションを作成するのには十分な機能がありそうです。
Visual Studioがあれば開発開始できるのは良いですね。
ASP.Net CoreであればサーバはIISに限定されませんし、メンバーのスキルセット次第で選択肢として考えても良いかもしれません。

参考

https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-3.1
https://chrissainty.com/blazor-news-from-build-2020/