最初のコンポーネント ― Razor構文で値を埋め込む

導入

Blazorのコンポーネントは.razorファイルです。中身はほとんどHTMLですが、**@を付けるとそこからC#**になります。文字列補間$"{x}"のHTML版だと思ってください。まずはC#の値を画面に出すところから始めます。

説明

@変数や@式と書くと、その場所にC#の値が埋め込まれます。

<h3>はじめての Blazor コンポーネント</h3>
<p>これは .razor ファイル。HTMLとC#が同居します。</p>
<p>今の気分は「@mood」です。</p>

@code {
    // @code ブロックの中は、これまで学んだC#そのまま
    private string mood = "ごきげん";
}

• .razorはHTML＋C#。@code { ... }の中は普通のC#（フィールドやメソッド）
• @moodのように@＋変数名で、C#の値をHTMLに差し込む
• @はHTMLとC#の境目の合図。それ以外はそのままHTMLとして表示される

やってみよう

右のプレビューに上の.razorが入っています。moodの値を書き換えると、@moodの表示が変わります。<p>をもう1行足して、別のフィールド（例: private string name = "…";）を@nameで表示してみましょう。

演習

@codeにprivate int year = 2026;を足し、本文に「今年は @year 年です」と表示してください。

次回: @codeの中身をもう少し使って、計算した値を埋め込みます。