ASP.NET Core Blazor の基礎

メモ

これは、この記事の最新バージョンではありません。 現在のリリースについては、この記事の .NET 10 バージョンを参照してください。

警告

このバージョンの ASP.NET Coreはサポートされなくなりました。 詳細については、.NETおよびコア サポート ポリシー.NETを参照してください。 現在のリリースについては、この記事の .NET 10 バージョンを参照してください。

"基礎" に関する記事では、 の基本概念に関するガイダンスを提供します。Blazor いくつかの概念は "Razor コンポーネント" の基本的な理解に結び付いており、それについてはこの記事の次のセクションおよび "コンポーネント" に関する記事で詳しく説明します。

静的および対話型のレンダリングの概念

Razor コンポーネントは静的にレンダリングされるか、対話形式でレンダリングされます。

Static または static rendering は、コンポーネントがユーザーと .NET/C# コード間の相互作用の容量なしでレンダリングされることを意味するサーバー側のシナリオです。 JavaScript イベントと HTML DOM イベントは影響を受けませんが、サーバーで実行されている.NETでクライアント上のユーザー イベントを処理することはできません。

Interactive/interactivity または interactive rendering は、コンポーネントが C# コードを介して.NETイベントとバインディングを処理する能力を持っていることを意味します。 .NETイベントとバインドは、ASP.NET Core ランタイムによってサーバー上で処理されるか、WebAssembly ベースの Blazor ランタイムによってクライアント上のブラウザーで処理されます。

重要

Blazor Web App を使用する場合、Blazor ドキュメントのほとんどのサンプル コンポーネントを機能させ、記事で説明されている概念を実証するには、インタラクティビティが必要です。 Blazor Web Appの記事によって提供されるコンポーネントの例をテストする場合は、アプリがグローバル対話機能を採用しているか、コンポーネントが対話型レンダリング モードを採用していることを確認します。 このトピックの詳細については、ASP.NET Core Blazor レンダリング モードComponents セクションを参照してください。これについては、Blazor ドキュメント セットの後半で説明します。

これらの概念と静的および対話型のレンダリングを制御する方法の詳細については、ASP.NET Core Blazor レンダリング モードBlazor ドキュメントで後述する記事を参照してください。

クライアントとサーバーのレンダリングの概念

Blazor ドキュメント全体を通じて、ユーザーのシステムで行われるアクティビティは、クライアント上で、またはクライアント側で発生すると言われます。 サーバー上で行われるアクティビティは、サーバー上またはサーバー側で発生すると言われます。

レンダリングという用語は、ブラウザーが表示する HTML マークアップを生成することを意味します。

  • クライアント側レンダリング (CSR) は、クライアント上の .NET WebAssembly ランタイムによって最終的な HTML マークアップが生成されることを意味します。 アプリのクライアントによって生成された UI の HTML は、この種類のレンダリングのためにサーバーからクライアントに送信されません。 ユーザーとページのやりとりが想定されます。 "静的" なクライアント側のレンダリングという概念はありません。 CSR は対話型と見なされるため、""対話型" クライアント側レンダリング" と ""対話型" CSR" は業界や のドキュメントでは使用されません。Blazor

  • サーバー側レンダリング (SSR) は、サーバー上の ASP.NET Core ランタイムによって最終的な HTML マークアップが生成されることを意味します。 HTML は、ネットワーク経由でクライアントに送られて、そのクライアントのブラウザで表示されます。 この種類のレンダリング用に、クライアントによってアプリのサーバーによって生成された UI の HTML は作成されません。 SSR には、次の 2 種類があります。

    • 静的 SSR: サーバーでは、ユーザー インタラクティビティや Razor コンポーネントの状態の保持を提供しない静的 HTML を生成します。
    • 対話型 SSR: Blazor イベントによってユーザー インタラクティビティが許可され、Razor コンポーネントの状態は Blazor フレームワークによって保持されます。

  • プリレンダリングは、レンダリングされたコントロールのイベント ハンドラーを有効にせずに、最初にサーバーにページ コンテンツをレンダリングするプロセスです。 サーバーは、最初の要求に応じてできるだけ早くページの HTML UI を出力します。これにより、アプリはユーザーに対してより応答性が高くなります。 プリレンダリングでは、検索エンジンがページ ランクの計算に使用する初期 HTTP 応答のコンテンツをレンダリングすることで、検索エンジンの最適化 (SEO) を向上させることもできます。 プリレンダリングの後には、常にサーバーまたはクライアント上の最終レンダリングが続きます。

Razor のコンポーネント

Blazor アプリは "Razor コンポーネント" が基になっており、単に "コンポーネント" と呼ばれることがよくあります。 "コンポーネント" とは、ページ、ダイアログ、データ入力フォームといった UI の要素です。 コンポーネントは、.NET アセンブリに組み込まれた .NET C# クラスです。

Razor は、クライアント側の UI ロジックと構成用に Razor マークアップ ページの形式でコンポーネントが通常記述される方法を示しています。 Razor とは、開発者の生産性のために設計された、C# コードに HTML マークアップを結合するための構文です。 Razor ファイルでは、.razor ファイル拡張子が使われます。

"Blazor コンポーネント" という用語を使用する Blazor 開発者やオンライン リソースもありますが、このドキュメントではそれは使わず、一貫して "Razor コンポーネント" または "コンポーネント" を使います。

Blazor のドキュメントでは、コンポーネントを示したり説明したりするためにいくつかの規則が使われています。

  • 一般に、例は ASP.NET Core/C# のコーディング規則とエンジニアリング ガイドラインに準拠しています。 詳細については次のリソースをご覧ください。
  • プロジェクトコード、ファイルパスと名前、プロジェクトテンプレート名、およびその他の特殊な用語はアメリカ英語で記述されており、通常はコードフェンスで囲まれています。
  • コンポーネントは、通常、C# のクラス名 (パスカル ケース) の後に "コンポーネント" を付けて参照されます。たとえば、一般的なファイル アップロード コンポーネントは "FileUpload コンポーネント" と呼ばれます。
  • 通常、コンポーネントの C# クラス名は、そのファイル名と同じです。
  • 通常、ルーティング可能なコンポーネントの相対 URL は、コンポーネントのクラス名のケバブ ケース (ハイフンでつないだもの) に設定されます。 たとえば、FileUpload コンポーネントに含まれるルーティング構成では、レンダリングされるコンポーネントに到達するために /file-upload という相対 URL が使われます。 ルーティングとナビゲーションについては、ASP.NET Core Blazor ルーティングで説明します。
  • コンポーネントの複数のバージョンが使われている場合は、順番に番号が付けられます。 たとえば、FileUpload3 コンポーネントは /file-upload-3 で到達されます。
  • コンポーネント定義 (Razor) の先頭にある は、.razor file、@page (.NET 8 以降)、@rendermode ステートメント、その他のディレクティブのアルファベット順に配置されます。
  • private メンバーには必要ありませんが、記事の例とサンプル アプリではアクセス修飾子が使用されています。 たとえば、private という名前のフィールドを宣言するには、maxAllowedFiles を private int maxAllowedFiles = 3; のように記述します。
  • コンポーネント パラメータ の値は、Razor 予約 @ 記号で始まりますが、これは必須ではありません。 コンポーネント パラメータ値としてのリテラル (ブール値など)、キーワード (this など)、null に @ のプレフィックスは付けられていませんが、これも単なるドキュメント規則です。 ご自身のコードでは、必要に応じてリテラルに @ のプレフィックスを付けることができます。
  • C# クラスでは、this キーワード を使用し、コンストラクターに割り当てられているアンダースコア (_) がフィールドの前に付けないようにします。これは、ASP.NET Core フレームワーク エンジニアリング ガイドライン とは異なります。
  • プライマリ コンストラクター (C# 12 以降) を使用する例では、通常、プライマリ コンストラクター パラメーターはクラス メンバーによって直接使用されます。 記事の例では、水平スクロールを減らすためにコード行が分割されています。 こうした分割は実行には影響しませんが、プロジェクトに貼り付けるときに削除できます。

Razor コンポーネントの構文の詳細については、ASP.NET Core Razor コンポーネント のRazor 構文セクションに記載されています。

次に示すのは、カウンター コンポーネントの例と、Blazor プロジェクト テンプレートから作成されるアプリの一部です。 コンポーネントの詳細については、このドキュメントで後述する "コンポーネント" の記事を参照してください。 次の例では、このドキュメントで後述する "コンポーネント" についての記事の前にある "基礎" に関する記事で説明されているコンポーネントの概念を示します。

Counter.razor:

コンポーネントでは、対話型レンダリング モードが親コンポーネントから継承されるか、アプリにグローバルに適用されるものと想定されています。

@page "/counter"

<PageTitle>Counter</PageTitle>

<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++;
}

コンポーネントでは、対話型レンダリング モードが親コンポーネントから継承されるか、アプリにグローバルに適用されるものと想定されています。

@page "/counter"

<PageTitle>Counter</PageTitle>

<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++;
}

@page "/counter"

<PageTitle>Counter</PageTitle>

<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++;
    }
}

@page "/counter"

<PageTitle>Counter</PageTitle>

<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++;
    }
}

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

前の Counter コンポーネントは次のようなものです。

  • 最初の行の @page ディレクティブでルートを設定します。
  • ページのタイトルと見出しを設定します。
  • @currentCount で現在のカウントをレンダリングします。 currentCount は、@code ブロックの C# コードで定義されている整数変数です。
  • IncrementCount メソッドをトリガーするボタンを表示します。このメソッドは @code ブロックにあり、currentCount 変数の値を増やします。

レンダー モード

"基本" ノードの記事では、レンダリング モードの概念を参照します。 このトピックは、記事の Blazor ノードに続く Components ノード内の ASP.NET Core レンダーモード に関する記事で詳しく説明されています。

レンダリング モードの概念に関するこのノードの記事では、初期の参照については、現時点では以下の点にのみ注意してください：

Blazor Web Appのすべてのコンポーネントは、レンダリング モードを採用して、使用するホスティング モデル、それがレンダリングされる場所、サーバー上で静的にレンダリングされるかどうか、サーバー上のユーザーの対話機能用にレンダリングされるか、クライアントでユーザーの対話機能用にレンダリングされるか (通常はサーバー上でプリレンダリングを使用) を決定します。

.NET 8 より前の ASP.NET Core リリース用の Blazor Server および Blazor WebAssembly アプリは、レンダリング モードではなく、ホスト モデル概念に固定されたままです。 レンダリング モードは概念的には、.NET 8 以降の Blazor Web App に適用されます。

次の表は、Razor で Blazor Web App コンポーネントをレンダリングするために使用できるレンダー モードを示しています。 レンダリング モードは、コンポーネント インスタンスまたはコンポーネント定義に関する @rendermode 指令があるコンポーネントに適用されます。 アプリ全体のレンダリング モードを設定することもできます。

名前 説明 レンダーの場所 インタラクティブ
静的サーバー 静的サーバー側レンダリング (静的 SSR) [サーバー]
対話型サーバー Blazor Server を使用した対話型サーバー側レンダリング (対話型 SSR) [サーバー]
対話型 WebAssembly Blazor WebAssembly を使用したクライアント側レンダリング (CSR)† クライアント
対話型自動化 最初は Blazor Server、その後Blazor バンドルのダウンロード後の後続のアクセスに CSR を使用する、対話型 SSR。 サーバー、その後クライアント

†クライアント側レンダリング (CSR) は対話型と見なされます。 ""対話型" クライアント側レンダリング" と ""対話型" CSR" は業界や のドキュメントでは使用されません。Blazor

レンダリング モードに関する上記の情報は、"基本" ノードの記事を理解するために知る必要のあるすべてです。 Blazorを初めて使用し、目次の順序Blazorの記事を読む場合は、 Blazor ノードのASP.NET Core レンダー モード記事に到達するまで、レンダリング モードの詳細な情報の使用を遅らせることができます。

Blazor WebAssembly アプリの.NET API のサブセット

Blazor WebAssembly のブラウザーでサポートされている特定の.NET API のキュレーションされた一覧は使用できません。 ただし、 で注釈が付けられた.NET API の一覧を手動で検索して、WebAssembly でサポートされていない.NET API を検出できます。

メモ

.NET参照ソースへのドキュメント リンクは、通常、リポジトリの既定のブランチを読み込みます。これは、.NETの次のリリースの現在の開発を表します。 特定のリリースのタグを選択するには、[Switch branches or tags](ブランチまたはタグの切り替え) ドロップダウン リストを使います。

詳細については、次のリソースを参照してください。

サンプル アプリ

ドキュメント サンプル アプリを調べたりダウンロードしたりできます。

Blazor サンプル GitHub リポジトリ (dotnet/blazor-samples)

使用している.NETのバージョンと一致するバージョン フォルダーを最初に選択して、サンプル アプリを見つけます。

サンプル アプリには、 Blazor 機能デモの記事例のサブセットのみが含まれています。 記事で示されているコード例が 1 つ以上のサンプル アプリにない場合は、通常、サンプル コードをデモ用のローカル テスト アプリに配置できます。

リポジトリ内のサンプル アプリ:

リポジトリ内のサンプル アプリ:

サンプル リポジトリには、次の 2 種類のサンプルが含まれています。

  • サンプル アプリのスニペットが、記事に表示されているコード例を提供します。 これらのアプリはコンパイルされますが、必ずしも実行可能なアプリではありません。 これらのアプリは、記事に表示されるコード例を取得するだけの場合に便利です。
  • Blazor の記事に付随するサンプル アプリは、次のシナリオでコンパイルして実行できます。
    • Blazor Server と Blazor WebAssembly と SignalR
    • Blazor WebAssembly スコープ対応のログ記録

リポジトリ内のサンプルの一覧とダウンロード手順の詳細については、リポジトリ README ファイルGitHub Blazor サンプルを参照してください。

ASP.NET Core リポジトリの基本テスト アプリは、さまざまな Blazor シナリオに役立つサンプル のセットでもあります。

BasicTestAppASP.NET Core参照ソース (dotnet/aspnetcore)

メモ

.NET参照ソースへのドキュメント リンクは、通常、リポジトリの既定のブランチを読み込みます。これは、.NETの次のリリースの現在の開発を表します。 特定のリリースのタグを選択するには、[Switch branches or tags](ブランチまたはタグの切り替え) ドロップダウン リストを使います。

コミュニティによって管理されている Blazor リソースへのリンクのコレクションについては、「Awesome Blazor」をご覧ください。

メモ

Microsoftは、awesome Blazorおよびそこに記載およびリンクされているコミュニティ製品とサービスの大部分を所有、維持、またはサポートしていません。

  • 最終更新: