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 開発スタックでアプリ全体を構築すれば、アプリが素早く完成し、すぐにピザの注文が殺到します。