Razor のコンポーネント

8 分

開発環境の設定が完了したので、Blazor プロジェクトの構造を詳しく見ていくとともに、Blazor コンポーネントの仕組みを学習しましょう。

ホームページ

アプリのホームページは、Components/Pages ディレクトリ内にある Home.razor ファイルによって定義されます。 Home.razor には次のコードが含まれます。

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

一番上の @page ディレクティブはこのページのルートを指定しており、ユーザーがアプリのルートに移動したときには Home コンポーネントが表示されます。 PageTitle タグは現在のページのタイトルを設定する Blazor コンポーネントで、このタイトルがブラウザータブに表示されます。ファイルの残りの部分は通常の HTML で、ページのコンテンツを定義します。

Razor とは

Razor は、HTML と C# に基づいたマークアップ構文です。 Razor ファイル (.razor) にはプレーンな HTML のほか、条件付き、制御フロー、式の評価などの、レンダリングロジックを定義する C# が含まれます。その後、Razor ファイルは、コンポーネントのレンダリングロジックをカプセル化する C# クラスにコンパイルされます。

Razor コンポーネントとは

Blazor プロジェクト内のファイルを詳しく見てみると、プロジェクトを構成するファイルのほとんどが .razor ファイルであることがわかります。 Blazor では、Razor ファイルが、アプリ UI の一部を構成する再利用可能なコンポーネントを定義しています。コンポーネントは、レンダリングする HTML およびユーザーイベントの処理方法を定義します。

コンパイル時に、各 Razor コンポーネントは C# クラスに組み込まれます。クラスには、状態、レンダリングロジック、ライフサイクルメソッド、イベントハンドラーなどの一般的な UI 要素を含むことができます。 Razor で作成された Blazor コンポーネントは単なる C# クラスなので、コンポーネントから任意の .NET コードを使用できます。

コンポーネントの使用

別のコンポーネントのコンポーネントを使用するには、そのコンポーネント名と一致する名前を持つ HTML スタイルのタグを追加します。たとえば、MyButton.razor という名前のコンポーネントがある場合、<MyButton /> タグを追加することで、MyButton コンポーネントを別のコンポーネントに追加できます。

コンポーネントのパラメーター

コンポーネントにはパラメータを含めることもできます。そうすることで、パラメータを使用して、コンポーネントにデータを渡すことができます。コンポーネントのパラメータは、public の C# プロパティを [Parameter] 属性を持つコンポーネントに追加することで定義します。その後、プロパティ名と一致する HTML スタイルの属性を使って、コンポーネントのパラメータの値を指定できます。パラメータの値には、任意の C# 式を指定できます。

@code ブロック

Razor ファイルの @code ブロックを使用して、C# クラスメンバー (フィールド、プロパティ、メソッド) をコンポーネントに追加します。 @code を使用して、コンポーネントの状態の追跡、コンポーネントパラメータの追加、コンポーネントライフサイクルイベントの実装、イベントハンドラーの定義を行えます。

カウンターを試す

実行中のアプリで、左側のサイドバーの [カウンター] タブをクリックして、[カウンター] ページに移動します。次のページが表示されます。

Counter Screenshot.

[クリックしてください] ボタンを選択して、ページを更新せずにカウンターを増分します。 Web ページでカウンターを増分するには、通常、JavaScript を記述する必要がありますが、Blazor では C# を使用できます。

Counter コンポーネントの実装は、Components/Pages/Counter.razor で確認できます。

@page "/counter"
@rendermode InteractiveServer

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

ブラウザーで /counter の要求があると、上部の @page ディレクティブで指定されているように、Counter コンポーネントによってそのコンテンツがレンダリングされます。 @rendermode ディレクティブはコンポーネントの対話型サーバーレンダリングを有効にし、ブラウザーからユーザーインターフェイスイベントを処理できるようにします。

[Click me] (ここをクリック) ボタンを選ぶたび:

onclick イベントが発生します。
IncrementCount メソッドが呼び出されます。
currentCount がインクリメントされます。
コンポーネントがレンダリングされ、更新されたカウントが表示されます。