C#でSPAを実現する、Blazorコンポーネントの開発

ASP.NET Core Blazorチュートリアル 第2回

　ASP.NET Core Blazor（以下Blazor）とは、.NET環境のC#で対話型のWeb UIを構築するためのフレームワークです。Blazorには、サーバーサイドで動作するモデル（Blazor Server）と、クライアントサイドで動作するモデル（Blazor WebAssembly）が含まれますが、本連載では、主に、クライアントサイドのフレームワークであるBlazor WebAssemblyについて解説します。

対象読者

　C#とWebシステムの基礎的な知識がある方を対象とします。C#の基本文法などの解説は割愛します。

はじめに

　前回は、ASP.NET Core Blazorについての概要と開発環境、そしてBlazor WebAssemblyのテンプレートプロジェクトの作成までを解説しました。今回からは、テンプレートプロジェクトを元に、実際のアプリを作成していきます。

　今回は、日記アプリを作成します。ごくシンプルなアプリでも、Blazor WebAssemblyアプリならではの手法がいろいろ必要となります。

日記アプリ

　作成するアプリは次のように、カレンダー表示、テキスト入力、ボタンだけが配置されたページとなります。カレンダー部分はコンポーネントとして作成します。

日記アプリ

　アプリの動作は簡単です。カレンダーの日付をクリックすると、日記が書かれたデータを読み込み、表示します。「保存する」ボタンを押せば、入力されたテキストがブラウザ内のデータベースに保存されます。つまり1日の日記のテキストを、1レコードとしてデータベースに記録する仕様のアプリを作成します。

作成ポイント

　日記アプリの作成にあたって次のようなポイントがあります。この順に解説していきましょう。

1. UIコントロールとのバインディング
2. コンポーネント作成
3. コンポーネントのイベント連携
4. データベースからの読み込み（次回解説）
5. データベースへの保存（次回解説）

UIコントロールとのデータバインディング

　まずはテンプレートプロジェクトを作成します（前回作成したものです）。このテンプレートのホームコンテンツ（index.razor）を変更していくことにします。

　プロジェクトのPagesフォルダにあるindex.razorファイルの内容を一旦クリアして、以下のようにテキストボックスとボタンを追加します。

［リスト1］index.razor

@page "/"

<div class="text-center">
    <textarea class="form-control mt-3" rows="3" />
    <button class="btn btn-primary mt-4">日記を保存する</button>
</div>

　HTML要素のclass属性に、いろいろ指定しているのは、Bootstrap用のクラスです。ご存じの方も多いと思いますが、BootstrapはHTMLやCSSベースのフレームワークです。テキストボックスやテーブルなどのフォーム要素、HTML要素などに、特定のクラスを追加するだけでデザイン指定が行えるようになります。ここでは、センタリングや、フォームの装飾、レイアウト（マージン指定）を設定しています。

　Blazorでは、テキストボックスなどのUIコントロールの値を操作するには、「データバインディング」と呼ばれるしくみを利用します。Blazorのデータバインディングでは、HTMLのUIコントロールに、@bindというディレクティブを使って、クラスのプロパティやフィールド名を指定します。なお、HTMLのUIコンロトールとは、ユーザーが対話的に操作するHTML要素のことで、次のようなものがあります。

表1:主なHTMLコントロール

HTMLタグ	概要
input	1行のテキスト入力、チェックボックス、ラジオボタン、実行／リセットボタンなどの要素
textarea	複数行のテキスト入力要素
button	ボタン要素
a	リンク要素

　ちょっとここで、index.razorに以下のようなコードを追加して、データバインディングの動作を確認してみましょう。テキストボックスの下に、プロパティを出力するコードを追加しています。

［リスト2］index.razor

<div class="text-center">
    <textarea @bind="@TextValue" class="form-control mt-3" rows="3" />
    <button class="btn btn-primary mt-4">日記を保存する</button>
</div>

@TextValue

@code{
    // テキスト表示用
    string TextValue { get; set; }
}

　@bindタグは、プロパティの表示とプロパティへの反映を行う、いわゆる双方向バインディングの指定となります。

双方向バインディングの確認

　テキストを入力して動作を確認してみてください。入力した文字がそのままプロパティに代入され、表示されます。

　ただしテキストボックスに入力しただけでは、表示されません。テキストボックスからフォーカスが離れた時点で、プロパティに格納された値が表示されます。

　このような動作でも問題ないケースはあるでしょう。ただ、例えば有効なメールアドレスかどうかを即座に判定したいというような、入力したテキストを逐次チェックしたい場合には不適です。

　そのようなときは、次のように@bindディレクティブにeventパラメーターをつけて、文字入力のイベント（oninput）通知も追加します。

<textarea @bind="@TextValue" @bind:event="oninput" class= ... />

　こうすれば、1文字の入力に追従して、即座にプロパティの表示がおこなわれます。oninputは、テキストボックスに入力があった場合に発生するイベント名です。