制御構文 ― @if と @foreach でHTMLを組む

導入

C#のifやforeachを、そのままHTMLの中で使えるのがRazorの強みです。「条件によって表示を変える」「一覧をループで描く」——JavaScriptでゴリゴリ書いていたことが、いつものC#の書き方で実現します。

説明

@ifで分岐、@foreachで繰り返し。ブロックは{ }で囲み、中にHTMLを書けるのがポイントです。

<h3>今日の天気</h3>
@if (isSunny)
{
    <p>☀️ 晴れています</p>
}
else
{
    <p>☁️ くもりです</p>
}
<button @onclick="Toggle">天気を切り替える</button>

<h4>対象の都市</h4>
<ul>
@foreach (var city in cities)
{
    <li>@city</li>
}
</ul>

@code {
    private bool isSunny = true;
    private string[] cities = new[] { "東京", "大阪", "札幌" };

    private void Toggle()
    {
        isSunny = !isSunny;   // 状態を変えると自動で描き直される
    }
}

• @if (条件) { ... } else { ... }——ブロックの中はHTML
• @foreach (var x in コレクション) { ... }——@xで各要素を埋め込む
• 状態（isSunny）を変えると、Blazorが自動で画面を描き直す（ボタンで確かめられます）

やってみよう

「天気を切り替える」を押すと、@ifの表示が晴れ⇄くもりで入れ替わります。citiesの配列に都市を足すと、一覧の<li>が自動で増えます。

演習

citiesに好きな都市を1つ足し、一覧が増えることを確かめてください。さらに@foreachの下に<p>全 @cities.Length 都市</p>を足して件数を表示しましょう。

次回: 第2章。入力と変数を双方向に連動させる@bindに進みます。