BlazorでのWebアプリケーション開発手法１【C#】A18_ここまでのまとめ

これまでのレクチャーで学んできた内容を、Counter.razorのコードを見ながら振り返ります。新しい機能の説明はなく、標準のCounter.razorを土台にさまざまな検証コードを書き足した「まとめ用」のコードを上から順に確認していく回です。

図1　@page・@rendermode・PageTitleの確認

@page “/counter” は、このページのURLを指定するディレクティブでした。@rendermode InteractiveServer は、ボタンクリックなどのユーザー操作をサーバーと通信して処理する場合に付ける記述です。

<PageTitle>CounterCCC</PageTitle> は、ブラウザのタブに表示されるタイトルを設定するコンポーネントでした。

見出しは <h1> から <h6> まであり、数字が大きくなるほど文字が小さくなります。<p> タグは段落を表し、ひとかたまりの段落として改行までしてくれるタグでした。

図2　見出し・段落タグとデータバインドの確認

@ マークを付けるとデータバインドになり、@ 以降にはC#のコードを書くことができます。@_value のように変数をそのまま書けるほか、@DateTime.Now のようにC#のコードを直接書くこともでき、@DateTime.Now.ToString(“yyyy/MM/dd HH:mm:ss”) のようにフォーマットを指定することもできます。

@_value@DateTime.Now のように変数を連続して書く分には問題ありませんが、「今の時間は@DateTime.Now」のように文字列の直後に@マークを続けると、文字がアットマークの一部だと誤認識されてしまいます（NG）。この場合は「今の時間は @DateTime.Now」のようにスペースを空けるか、「今の時間は@(DateTime.Now)」のように値を丸括弧で囲むことでOKになります。

変数だけでなく、@Value のようにプロパティや、@GetString() のようにメソッドの戻り値もバインドできます。

図3　@マークの付け方によるデータバインドの挙動の違い

Bootstrapが使われており、Bootstrapの公式サイトからコードを取ってきて貼り付けるだけで、<select> のようなきれいなレイアウトのコントロールを作ることができます。

図4　Bootstrapのselectコントロールとボタンのコード

ボタンのクリックイベントでは、@onclick=”IncrementCount” のように、JavaScript側のイベントとC#側のメソッドを結び付けることができます。イベント引数（MouseEventArgsなど）が必要な場合は、存在していないメソッド名を書いて自動生成することで、引数付きのイベントハンドラーを作ることができました（AAAButtonClickメソッド）。

そして一番下の @code { } の中に、これまで出てきたフィールドやメソッドなどのC#コードがまとめて書かれています。

図5　@codeブロック内のC#コード（IncrementCount・GetString・AAAButtonClick）

ここまでの内容だけでも、Razorコンポーネントの基本的な部分はひと通り学べたと思います。Counter画面は、最終的に次のようなコードになっています。

@page "/counter"
@rendermode InteractiveServer
 
<PageTitle>CounterCCC</PageTitle>
 
<h1>Counter</h1>
 
<p role="status">Current countBBB: @currentCount</p>
 
@_value @* 直書きできる *@
<br /> @* 改行 *@
<p>@_value</p> @* pタグ *@
<p>@DateTime.Now</p> @* 直接C#コード *@
<p>@DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss")</p>@* セミコロンに注意 *@
<p>@_value@DateTime.Now</p> @* 変数の連続 *@
<p>今の時間は@DateTime.Now</p> @* NG 文字のアットマークと判断される *@
<p>今の時間は @DateTime.Now</p> @* OK スペースを空ける or*@
<p>今の時間は@(DateTime.Now)</p> @* OK 値を()で閉じる*@
<p>@Value</p> @* プロパティOK *@
<p>@GetString()</p> @* メソッドOK *@
 
<select class="form-select" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
 
<button class="btn btn-primary" @onclick="IncrementCount">Click meAAAAA</button>
 
<button class="btn btn-primary" @onclick="AAAButtonClick">
    @_aaaButtonText
</button>
 
@code {
    private int currentCount = 999;
    private string _value = "AAABBB";
    public string Value => "XXX";
    private string _aaaButtonText = "--";
 
    private void IncrementCount()
    {
        currentCount++;
    }
 
    public string GetString()
    {
        return "YYYYYY";
    }
 
    private void AAAButtonClick(MouseEventArgs e)
    {
        if (e.AltKey)
        {
            _aaaButtonText = "Alt";
        }
        else
        {
            _aaaButtonText = "なし";
        }
    }
}