BT

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をご覧いただきたい。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。