@code とデータの埋め込み ― 式も書ける

導入

@のうしろには変数だけでなく式も書けます。@(a * b)のようにカッコで囲めば、計算結果をそのまま画面に出せます。データと表示が地続きになる感覚をつかみましょう。

説明

単純な変数は@name、式は@(...)とカッコで囲みます。

<h3>@title</h3>
<p>単価: @price 円</p>
<p>税込: @(price * 1.1) 円</p>
<p>3個の合計: @(price * 3) 円</p>

@code {
    private string title = "コーヒー";
    private int price = 500;
}

• 変数1つなら@price、計算式なら@(price * 1.1)のようにカッコで囲む
• @codeのフィールドを変えると、それを使った表示がすべて連動して変わる
• 「データを1か所で持ち、画面はそれを映す」——これがコンポーネントの基本姿勢

やってみよう

priceの値を書き換えて、税込や合計の表示が一緒に変わることを確かめましょう。@(price * 3)の3を変えれば個数も変えられます。

演習

private int taxRate = 10;を足し、税込の表示を@(price * (100 + taxRate) / 100)にして、税率をフィールドで変えられるようにしてください。

次回: @ifや@foreachで、条件や繰り返しをHTMLに持ち込みます。