Blazor のしくみ

  • 5 分

Blazor には、次の Web アプリ プロジェクトを迅速に開始して提供するのに役立つ多くの機能が用意されています。 ご自分の次の優れた Web アプリに Blazor を使用する必要があるかどうかを判断するのに役立つ Blazor のコア機能を見てみましょう。

Blazor コンポーネント

Blazor アプリはコンポーネントから構築されています。 Blazor コンポーネントは、再利用可能な Web UI です。 Blazor コンポーネントは、そのレンダリングと UI イベント処理ロジックの両方をカプセル化します。 Blazor には、フォーム処理、ユーザー入力検証、大規模なデータ セットの表示、認証、認可のためのさまざまな組み込みコンポーネントが含まれています。 開発者は独自のカスタム コンポーネントをビルドして共有することもできます。また、Blazor エコシステムからの多くの事前構築済みの Blazor コンポーネントを利用できます。

標準の Web テクノロジを使用する

HTML、CSS、C# の便利な組み合わせである Razor 構文を使用して Blazor コンポーネントを作成します。 Razor ファイルには、条件付き、制御フロー、式の評価などのレンダリング ロジックを定義するためのプレーン HTML と C# が含まれています。 その後、Razor ファイルは、コンポーネントのレンダリング ロジックをカプセル化する C# クラスにコンパイルされます。 Razor で作成された Blazor コンポーネントは単なる C# クラスであるため、コンポーネントから任意の .NET コードを呼び出すことができます。

UI イベント処理とデータ バインディング

対話型 Blazor コンポーネントは、C# イベント ハンドラーを使用して標準の Web UI 操作を処理できます。 コンポーネントは、UI イベントに応答して状態を更新し、それに応じてレンダリングを調整できます。 Blazor には、コンポーネントの状態を UI 要素と同期させる方法として、UI 要素への双方向データ バインディングのサポートも含まれています。

Razor で実装された単純な Blazor カウンター コンポーネントの例を次に示します。 ほとんどのコンテンツは HTML ですが、@code ブロックには C# が含まれています。 ボタンが押されるたびに IncrementCount C# メソッドが呼び出され、currentCount フィールドがインクリメントされ、更新された値がコンポーネントによってレンダリングされます。

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

サーバーおよびクライアント側レンダリング

Blazor では、さまざまな Web UI アーキテクチャを処理するためのコンポーネントのサーバーおよびクライアント側レンダリングが両方ともサポートされています。 サーバーからレンダリングされたコンポーネントは、データベースやバックエンド サービスなどのサーバー リソースにアクセスできます。 既定では、Blazor コンポーネントはサーバーから静的にレンダリングされ、要求に応答して HTML が生成されます。

また、サーバー コンポーネントを対話型に構成して、任意の UI イベントの処理、対話式操作間での状態の維持、更新プログラムの動的なレンダリングを行うこともできます。 対話型サーバー コンポーネントは、ブラウザーとの WebSocket 接続を介して UI の操作と更新を処理します。

Blazor 対話型サーバーレンダリングの図。

または、Blazor コンポーネントをクライアントから対話形式でレンダリングすることもできます。 コンポーネントはクライアントにダウンロードされ、WebAssembly 経由でブラウザーから実行されます。 対話型 WebAssembly コンポーネントは、ローカル ストレージやハードウェアなどの Web プラットフォームを介してクライアント リソースにアクセスでき、ダウンロード後はオフラインでも機能します。

Blazor 対話型 WebAssembly レンダリングの図。

同じアプリ内のサーバーまたはクライアントから異なるコンポーネントをレンダリングすることを選択できます。 アプリ内のページの多くは、対話機能をまったく必要としない場合があり、サーバーから静的にレンダリングできます。 アプリの他の対話型部分は、サーバーまたはクライアントから処理できます。 デザイン時または実行時に使用するコンポーネント レンダリング モードを決定できます。 Blazor を使用すると、シナリオに適した Web アプリ アーキテクチャを柔軟に構築できます。

Blazor を使用してピザ ショップを構築する

ピザ ショップ アプリの UI は、ナビゲーション バーを備えたページ レイアウト、個々のページ、ピザ カタログとエディター、注文コンポーネントなど、多くの再利用可能なコンポーネントに分類されます。 Blazor には、フォームや検証用のコンポーネントなど、これらのコンポーネントの多くが組み込みサポートされています。 アプリ内のページの多くは、静的なサーバー側レンダリングを使用してサーバーから処理できるため、サイトはほとんどの場合ステートレスになり、スケーリングにも対応できます。 より多くの対話機能が必要な場合、コンポーネントは対話型レンダリング モードを適用することによって対話型になります。 サーバーから作業をオフロードするために、対話型コンポーネントは WebAssembly 経由でクライアントにレンダリングされます。 1 つの Web 開発スタックでアプリ全体を構築すれば、アプリが素早く完成し、すぐにピザの注文が殺到します。