BlazorでのWebアプリケーション開発手法１【C#】A07_Razor構文

このレクチャーでは、標準テンプレートに含まれるCounterページ（Counter.razor）を教材として、Razorコンポーネントの書き方＝Razor構文について解説します。ボタンを押すと画面が更新されるだけのシンプルな画面ですが、ボタンの配置やラベルの更新方法など要素が詰まっており、Razor構文を理解する上で良いサンプルになっています。

図1　Counterページ（ボタンを押すと Current count の値が更新される）

Razor構文とは

Razor構文とは、前回説明した通り、Razorコンポーネントに書いていく文法のことです。まずはCounter.razorのコード全体を見てみましょう。

図2　Counter.razor の全体コード

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

「@」があるかないかで意味合いが変わる

このRazor構文には特徴があります。それは「@」があるかないかで意味合いが変わってくるという点です。「@」マークが付いている部分は、基本的にRazor構文と言われる部分になっています。

図3　@rendermode のように「@」が付いている部分がRazor構文

Razor構文では、@rendermode のように何かを宣言することができたり、@currentCount のようにデータバインドができたり、@onclick=”IncrementCount” のように純粋なC#コードを埋め込んだりすることができます。ほかにも、foreach を書いたり if 文を書いたりすることも可能です。以下はWeather.razorで使われている@ifと@foreachの例です。

図4　Weather.razor に見る @if / @foreach の例

@code エリア

また、「@code」というエリアがあります。@codeという部分は、その中に本当に純粋なC#コードが書けるというエリアになっています。Counter.razorでは、フィールドcurrentCountの宣言と、IncrementCountメソッドの実装がこの@codeブロックの中に書かれています。

図5　@code { … } で囲まれた部分は純粋なC#コードのエリア

「@」がない部分＝基本的には純粋なHTML

一方で、「@」がない部分は、基本的には純粋なHTMLになっています。Counter.razorで言えば、<h1>Counter</h1> のような部分がこれにあたります。

ただし例外があります。緑の太文字になっている部分です。これはRazorコンポーネントと呼ばれるもので、Razorコンポーネントはページを作るだけでなく、部品（WindowsFormsで言うユーザーコントロールのようなもの）も作ることができます。他のRazorコンポーネントを使う場合や、Microsoftが作って提供してくれているRazorコンポーネントを使う場合は、このように緑の太文字で表示されます。

図6　PageTitleにカーソルを合わせると Microsoft.AspNetCore.Components.Web.PageTitle であることが分かる（＝Microsoft提供のRazorコンポーネント）

このPageTitleタグは、HTMLの<title>タグをHeadOutletコンポーネントにレンダリングするためのMicrosoft提供のRazorコンポーネントです。自作・他作を問わずRazorコンポーネントであるため「@」は付きませんが、純粋なHTMLタグとは区別されて緑の太文字で表示される、という仕組みです。

まとめ

Razor構文の大きな特徴は、「@」の有無で意味合いが変わってくるという点です。まとめると次のようになります。

・「@」が付いている部分…変数宣言、データバインド、C#コードの埋め込み、if文やforeachなどのRazor構文

・「@code { }」の中…純粋なC#コードを書けるエリア

・「@」が付いていない部分…基本的には純粋なHTML（ただし緑の太文字はRazorコンポーネントで、自作コンポーネントやMicrosoft提供コンポーネントを表す）

HTMLに、純粋なC#コードを@codeで書き、それ以外にも@が付いたRazor構文がポロポロと出てくる、というのがRazor構文の大きな特徴です。次回以降のレクチャーでは、このCounter.razorを見ながら、それぞれの要素をさらに詳しく解説していきます。