BlazorでのWebアプリケーション開発手法２【C#】B01_メッセージを出すレイアウトの作成

この章について

この章では、ユーザーに保存完了などのメッセージを表示する画面を作るための下準備として、新しいBlazorプロジェクトを作成し、入力欄と保存ボタンを備えた基本レイアウトを組み立てます。あわせて、Bootstrapの余白クラス（mb-3）によるレイアウト調整と、@rendermodeディレクティブの必要性についても扱います。エラーチェックを行いメッセージを実際に表示する処理は、次章で解説します。

1. 新規Blazorプロジェクトの作成

まずVisual Studioで「新しいプロジェクトの作成」を選び、プロジェクトテンプレートの一覧から「Blazor Web App」を選択します。

図1 「Blazor Web App」テンプレートを選択する

プロジェクト名は既定のまま「BlazorApp1」とし、保存場所は任意の場所を指定して「次へ」に進みます。

図2 プロジェクト名と保存場所を指定する

続く「追加情報」画面では、フレームワークを.NET 9.0、Interactive render modeをServer、Interactivity locationをPer page/componentに設定します。また「Include sample pages」にチェックが入った状態で「作成」を押します。

図3 フレームワークと Interactive render mode の設定（.NET 9.0 / Server / Per page/component）

2. 動作確認

プロジェクトが作成されたら、ソリューションエクスプローラーの「Components」→「Pages」フォルダーの中にある「Home.razor」を開きます。

図4 Components/Pages フォルダー内の Home.razor を選択する

まず一度そのまま実行し、「Hello, world!」というテキストが表示されるトップページが起動することを確認してから、コーディングに入ります。

図5 初期状態の Home ページ（Hello, world!）が表示されることを確認する

3. 入力レイアウトの作成

Home.razorを開き、見出しの「Hello, world!」は「Home」に、本文の「Welcome to your new app.」は削除します。続けて、エリア名称を入力するためのlabelとinputを追加します。

labelとinputの2つを1つのまとまりとして扱うため、divタグで囲みます。

<div>
    <label>エリア名称</label>
    <input type="text" />
</div>

このままではコントロール同士が隙間なくくっついて見た目が悪くなるため、divタグにclass=”mb-3″を指定します。mbはmargin、bはbottomの意味で、mb-3は「下方向に3単位のマージン（余白）を入れる」というBootstrapのユーティリティクラスです。コントロールの下に余白を入れたいときの定番の指定として、mb-3を使うのが一般的です。

図6 IntelliSenseの候補から mb-3 クラスを選択する（class=”mb-3″）

<div class="mb-3">
    <label>エリア名称</label>
    <input type="text" />
</div>

ここまでの内容を実行すると、次のようにラベルと入力欄が表示されます。

図7 エリア名称ラベルと入力欄が表示された Home ページ

4. 保存ボタンの追加

次に、入力欄の下に「保存」ボタンを配置します。ボタンは1から書かず、Counter.razorにある既存のボタン（class=”btn btn-primary”）をコピーして貼り付け、別のdivで区切って配置します。onclick属性はSaveに、ボタンのテキストは「Click me」から「保存」に変更します。あわせて@codeブロックにSaveメソッドを追加しておくと、コンパイルが通るようになります。

図8 Counter.razor からコピーしたボタンを編集し、@onclick=”Save” ・「保存」に変更する

<div class="mb-3">
    <label>エリア名称</label>
    <input type="text" />
</div>
 
<div>
    <button class="btn btn-primary" @onclick="Save">保存</button>
</div>
 
@code {
    private void Save()
    {
    }
}

この状態で実行すると、保存ボタンは表示されますが、入力欄との間に余白がなく、隙間なくくっついて表示されてしまいます。

図9 ボタンを囲むdivにmb-3を指定していないため、入力欄とボタンの間に余白がない状態

5. mb-3によるレイアウト調整

ボタンを囲むdivにも同じようにclass=”mb-3″を指定すると、コントロール同士の間に余白が入り、見た目が整います。なお、ボタンが一番下の要素であれば、その下にさらにコントロールを配置する予定がない限りmb-3を付けなくても問題ありません。下に別のコントロールを続けて配置する場合には、忘れずに指定しておくとよいでしょう。

<div class="mb-3">
    <button class="btn btn-primary" @onclick="Save">保存</button>
</div>

図10 ボタン側のdivにも mb-3 を指定し、入力欄とボタンの間に適切な余白が入った状態

6. @rendermodeの追加

ここまでできたら、保存ボタンを押したときにエラーチェックを行いメッセージを表示する処理を実装したいところですが、その前に一点確認しておくべきことがあります。Saveメソッドにブレークポイントを置いて実行し、保存ボタンを押しても、実はブレークポイントで処理が止まりません。

これは、Home.razorに@rendermodeディレクティブが指定されていないためです。Counter.razorを見ると、@page “/counter”の下に@rendermode InteractiveServerという行があります。このInteractiveServerの行をコピーしてHome.razor側にも追加すると、ボタンのクリックイベントがサーバー側で正しく処理されるようになり、ブレークポイントで止まるようになります。

図11 Home.razor に @rendermode InteractiveServer を追加した状態

@page "/"
@rendermode InteractiveServer
 
<PageTitle>Home</PageTitle>
 
<h1>Home</h1>
 
<div class="mb-3">
    <label>エリア名称</label>
    <input type="text" />
</div>
 
<div class="mb-3">
    <button class="btn btn-primary" @onclick="Save">保存</button>
</div>
 
@code {
    private void Save()
    {
    }
}

まとめ

この章では、新規Blazorプロジェクトの作成から、エリア名称の入力欄と保存ボタンを備えたシンプルな画面レイアウトの作成、mb-3クラスによる余白調整、そして@rendermode InteractiveServerによるサーバー側イベント処理の有効化までを扱いました。次章では、この保存ボタンを押したタイミングで入力内容をチェックし、結果をメッセージとして表示する処理を実装していきます。