BlazorでのWebアプリケーション開発手法１【C#】A06_Razorコンポーネント

ここからはCounter画面の解説をしていきます。Counterはボタンを押すたびにカウントアップされていくだけのシンプルな画面ですが、その前提としてRazorコンポーネントについて説明しておきます。

図1　サンプルアプリのHome画面

図2　Counter画面。ボタンをクリックするとCurrent countがカウントアップされる

.razorという拡張子

Counter画面は「Counter.razor」というファイルで作られています。基本的にこの.razorという拡張子が付いたファイルが画面、つまりページ一つ一つに対応しています。

ソリューションエクスプローラーのPagesフォルダーを見ると、Counter.razor、Error.razor、Home.razor、Weather.razorといった具合に、画面ごとに.razorファイルが分かれていることが確認できます。

図3　Pagesフォルダー配下に並ぶ.razorファイル群

Razorコンポーネントとは

この.razorファイルはRazorコンポーネントと呼ばれるもので、C#とHTMLを統合するための仕組みです。1つのファイルの中にHTMLも書けるし、C#も書けるようになっています。

画面のレイアウトはHTMLで組み立てます。Counter.razorを見ると、見出しやボタンといった画面の構成要素はHTMLで記述されています。そのうえで、HTMLで組み立てたレイアウトに対して、データバインドを行ったり、ボタンのクリックイベントを拾ったりする処理はC#で書きます。

図4　Counter.razorの全体。HTML部分と@codeブロック（C#コード）で構成されている

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

h1タグやpタグ、buttonタグといった部分はHTMLそのものです。@currentCountのように@を付けることでC#側の変数を画面に埋め込むデータバインドができ、@onclick=”IncrementCount”のようにイベントとC#のメソッドを結び付けることができます。そして@codeブロックの中に、currentCountというフィールドや、それをインクリメントするIncrementCountメソッドといったC#のロジックを書いていきます。

JavaScriptがほぼ不要になる

本来Webアプリの開発ではJavaScriptで書く必要があるような処理も、Razorコンポーネントを使えばC#で書くことができます。そのため、JavaScriptの知識はほぼ最低限で済み、代わりにC#の知識を活かして開発を進めることができます。

WPF・XAMLとの共通点

画面の組み立てをHTMLで行い、ロジックをC#で書くという構造は、WPFで画面をXAMLで組み立て、ロジックをC#で書く感覚と同じです。そのため、勉強する内容としてはHTMLをきちんと覚える必要がある一方、C#の文法知識自体は普通に必要になる、という位置づけになります。

必要なHTMLの知識については、以降のレクチャーの中で解説していくので、現時点でHTMLの知識がなくても問題ありません。画面（UI）の組み立てはHTMLで行い、データバインドやイベントの取得、変数の宣言といった処理はこれまで通りC#で行うという感覚で進めていきます。