Razor構文の基本（@, if/for/foreach, @functions）｜ASP.NET×Blazor入門 3.1

3.1 Razor構文の基本（@, if/for/foreach, @functions）

Blazorを学び始めて最初に出会うのが、この不思議な記号です。

@

「これは何だろう？なぜHTMLの中にC#が？」と感じた方、それはごく自然な反応です。Razor構文は、HTMLとC#が交差する特殊な記法ですが、一度慣れてしまえば、驚くほどスムーズにUIとロジックを一体で記述できるようになります。

@ は「ここからC#です」の合図

Razorでは、@ を使って「ここからC#のコードですよ」と示します。これにより、HTMLの中にC#の変数や条件分岐、ループ処理を自然に埋め込むことができます。

<h1>こんにちは、@name さん！</h1>

@code {
    string name = "世界";
}

このコードは、画面上に「こんにちは、世界さん！」と表示されます。

条件分岐：if / else

ユーザーがログインしているかどうかで表示を変えるといったケースでは、if 文が使えます。

@if (isLoggedIn)
{
    <p>ようこそ！</p>
}
else
{
    <p>ログインしてください。</p>
}

このように、HTMLの中でC#の条件文をそのまま使えるのがRazorの特徴です。

繰り返し処理：foreach

リスト表示では foreach が便利です。以下の例では、3つの果物をリスト表示します。

@foreach (var item in items)
{
    <li>@item</li>
}

@code {
    List<string> items = new() { "りんご", "バナナ", "みかん" };
}

表示結果：

• りんご
• バナナ
• みかん

なお、for や while といった他の繰り返し構文も問題なく使えます。

@code ブロックとは

Razorファイルの中でロジック（データやメソッド）を書く場所が @code { } ブロックです。

@code {
    string name = "Blazor";

    void Greet()
    {
        Console.WriteLine($"こんにちは、{name} さん！");
    }
}

ここに書かれたコードは、そのページ全体で使えるようになります。UIとロジックが同じ場所にまとまっているのが、Blazorの開発スタイルの特徴です。

UIとロジックがひとつになる開発体験

Razor構文に慣れてくると、HTMLとC#のあいだに違和感がなくなってきます。画面に表示したいこと、裏で動かしたいこと、それらが一つのファイルで完結する心地よさは、他のフレームワークにはない魅力です。

次のセクションでは「3.2 コンポーネントの作り方と分割」では、このRazorコードを「コンポーネント」という再利用可能な単位に分けていく方法を見ていきましょう。