BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Blazor WebAssembly Preview - WebアプリケーションのフルスタックC# Development

Blazor WebAssembly Preview - WebアプリケーションのフルスタックC# Development

ブックマーク

原文(投稿日:2020/02/13)へのリンク

Microsoftは、SignalR クライアントのサポート、ダウンロードサイズの改善をしたBlazor WebAssemblyの3.2.0 Preview 1をリリースした。

BlazorはC#, HTML, CSSを使ってWebアプリケーションを構築するフレームワークである。C#コードはクライアントとサーバーの機能の両方に使われるため、重複したビジネスロジックはもはや問題でなくなる。C#コードを実行するためにWebAssemblyにコンパイルされる。このフレームワークは.NET Standard 2.0が使われているため、Microsoftやサードパーティーの標準ライブラリを含めることができる。WebAssemblyのコードはサンドボックスで実行されるため、ファイルシステムにアクセスするようなAPIにアクセスできない。UIの視覚面はRazorマークアップ言語を使用したRazorコンポーネントによって提供される。TelerikのようなサードパーティーはすでにWebAssemblyで使われる UIコンポーネントを提供している。

WebAssembly (WASM)はChrome, Edge, Firefox, WebKitのようなほとんどのモダンなブラウザーでサポートされている。WebAssemblyはデスクトップアプリケーションとしても実行することができる。ESP32のようなマイクロコントローラーデバイスでWASMを実行する実験的なプロジェクトもあり、Webアプリケーションと同じようにWASMをIoTデバイスに提供する。

イメージソース: .NET Conf 2019プレゼンテーション

Blazor開発を始めるには、.NET Core 3.1 SDKをインストールする。
テンプレートパックをインストールするために以下のコマンドを実行する。

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1

以下を実行すると、サンプルBlazor WebAssemblyアプリケーションが作成される。

dotnet new blazorwasm
dotnet build
dotnet run

この例にはシンプルな静的ページ、インタラクティブなカウンター、天気データの表表示の3つのページがある。

@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.GetJsonAsync<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);
    }
}

このコードはASP.Net Coreなどの技術を使ったことがある人には明確でなくてはならない。しかし、ASP.Netとは違う技術であることに注意してほしい。これはProgram.csの簡易スタートアップに反映されている。WebAssemblyHostBuilderはASP.Net coreによって使われるスタートアップクラスアプローチに使用されなくなった。

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("app");

        await builder.Build().RunAsync();
    }
}

WebAssemblyにコンパイルされたコードは、同等のJavaScriptベースのアプリケーションと比べて、すでに小さくなっている。例の3ページアプリケーションはたったの7.7 kBである。このプレビューバージョンは、.NET ILリンカによって未使用コードが除外されて、以前のバージョンと比べて100 kB削減されている。これはBlazorフレームワークファイルとCoreファイルを含めたライブラリも除外対象に拡大することで実現している。ウォーターフォールダイアグラムからわかるように、WebAssemblyのIL仮想マシンはMonoをベースにしている。

最新の機能はSignalRクライアントである。これは通信にSignalRを使用するBlazor Serverベースホスティングとは別な機能である。

SignalRクライアントは、WebAssemblyアプリケーションにリアルタイム機能を追加できる。最新データを表示するダッシュボード、コラボレーション用アプリケーションのチャットなどに適している。このクライアントは、あなたのサーバーで提供するハブに接続して、クライアントにメッセージをディスパッチできる。クライアントとハブの間の通信はJSONか、より小さなメッセージを生成するMessagePackをベースとしたバイナリーフォーマットのどちらかである。

複数のクライアントと通信するSignalRを使ったチャットアプリケーションの例がある。この例のサーバープロジェクトは、SignalRハブを提供するためのASP.Net Coreを使ったスタートアップクラスを使うことに注意して欲しい。

リリースバージョンのBlazor WebAssemblyは今年の5月に一般リリースが予定されている。

Blazorのその他の例とリソースはAwesome Blazorをご覧いただきたい。

この記事に星をつける

おすすめ度
スタイル

BT