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 コンポーネントを別のコンポーネントに追加できます。

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

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

@code ブロック

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

カウンターを試してみる

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

実行中のアプリのカウンターのスクリーンショット。

[クリックしてください] ボタンを選択して、ページを更新せずにカウンターを増分します。 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がインクリメントされます。
  • コンポーネントがレンダリングされ、更新されたカウントが表示されます。