【Blazor】 コンポーネントについて

Blazorは[コンポーネント駆動フレームワーク]です。 つまり、Blazorアプリケーションはコンポーネントという基本的な構成ブロックから成り立っています。 コンポーネントは再利用可能な部品のようなものであり、多くのプロジェクト間で共有することも可能です。 この部品を集めて、Webページを構築していきます。 コンポーネントを集めて、ライブラリにすることもできます。 コンポーネントの拡張子は.razorが使用されます。

コンポーネントファイル名は大文字で始まらなければならないというルールがあります。 小文字で始めるとコンパイルエラーになります。 試しにexample.razorを作成してコンパイルすると以下のようになります。

以下のようなエラーが発生します。
RZ10011	Component 'example' starts with a lowercase character. Component names cannot start with a lowercase character.

C#でファイル名を小文字スタートで表記することはあまり無いとは思いますが、 普段Javascriptなどを書いている人は気を付けた方がいいかもしれません。

コンポーネントのコードを見てみましょう。 コンポーネントは画面側とロジック側のコードに分かれています。 画面側のコードはHTML、ロジック側のコードはC#でコードを書いていきます。

@page "/counter"

<!-- HTML部分 -->
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>

@code {
    // C#部分
    private int currentCount = 0;

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

@onclickという属性を使用して、ボタンがクリックされたときに呼び出されるメソッドを指定することができます。 今回のコードの場合、クリックするとIncrementCountメソッドが呼び出されます。

Blazorでは、コード側にある変数の値を画面側のコードへ反映させることができます。 これをワンウェイバインディングと呼びます。 ワンウェイバインディングを行うには、画面側のコードに@記号を使用して、変数名を指定します。 コード例では、font-familyを指定しています。

@page "/counter"

<!-- HTML部分 -->
<h1 style="font-family:@fontFamily">Counter</h1>

@code {
    // C#部分
    private string fontFamily = "Verdana";
}

C#部分のfontFamilyの値を変更すると、UI側のスタイルも合わせて変更することができます。

この記事では、Blazorとその基本的なコンポーネントについて簡単に説明しました。 データバインディングやコンポーネントなど聞きなれない言葉が出てきたと思いますが、 今後も詳しく記事にしていこうと思いますので、少しずつ覚えていきましょう。