[アーティクル]
01/16/2019

January 2019

Volume 34 Number 1

[Cutting Edge]

Blazor のテンプレートベースのコンポーネント

Dino Esposito | January 2019

Dino Esposito 2018 年初頭に Blazor の最初のパブリックビルドがリリースされてから、1 年近く経ちました。ホストブラウザー内から C# および .NET コードを実行できるクライアント側 Web フレームワークとして設計されたこのプラットフォームは、さまざまな方向に進化してきました。

Blazor は、到達可能なバックエンドサービスからダウンロードしたデータを処理するプレーンなクライアント側フレームワークであることに変わりはありませんが、SignalR 接続経由で全体がサーバーから実行されるよう基盤の変更も行われました。最近の SignalR Azure サービスの導入は、最新の開発プラットフォームとして Blazor をさらに推進するという Microsoft の意図の表れにほかならないと私は考えます。サーバーアプリケーションと無数のクライアントとの間にスケーラブルなクラウドサービスが存在するので、.NET Core コードがサーバー上で効果的にホストされることや、JavaScript ではなく C# の仲介によってクライアント上で対話的に実行されることが保証されます。

クライアント側の Web フレームワークとして、Blazor (一部は次の ASP.NET Core 3.0 リリースに同梱予定) は、コンポーネントなしではうまく機能しません。Blazor チームは、バージョン 0.6.0 のフレームワークで、テンプレートベースのコンポーネントという特定のフレーバーを導入しました。この記事では、これまでの 2 つのコラムで取り上げた先行入力の例をテンプレートベースのコンポーネントに変更することで、それらがどのように機能するかを詳しく説明します。

Blazor にテンプレートを追加する

単純なコンポーネントならプロパティで設定できても、現実のコンポーネントはたいていレンダリングの柔軟性がもっと必要です。テンプレートはそれを実現する標準的な方法となります。たとえば、データグリッドコンポーネントを考えてみましょう。Razor などのデータバインディングインフラストラクチャを使用すると、既知のデータソースにリンクされたデータテーブルを簡単に構築することができます。ここに、データ項目のコレクションから HTML テーブルを構築する方法の簡単な例を示します。

<table>
@foreach(var item in Items)
{
  <tr>
    <td>@item.FirstName</td>
    <td>@item.LastName</td>
  </tr>
}
</table>

この例は迅速かつ簡単ですが、再利用できるものはそれほど多くありません。では、上部にヘッダー、フッター、検索バーなどを、下部にページャーバーを追加して、グリッド構造をより充実させることを想像してみましょう。検索バーとページャーバーの背後にあるグラフィカルなレイアウトとコードは、検索されたりページ処理されたりする実際のデータによって変わることはありません。しかし、データグリッドを使用して異なる種類のデータを表示するたびに、検索バーとページャーバーをそれぞれ書き換えることになります。

この最小レベルの抽象化では、国のグリッドと顧客のグリッドはまったく異なるエンティティですが、さまざまな内部要素の背後にあるコアコードはほぼ同じです。テンプレートベースのコンポーネントはこの特定のシナリオに対応し、単一の DataGrid コンポーネントで単一のコードベースで国と顧客の両方を表示、検索、ページ処理できるようにする方法を示します。

たとえば、充実したグリッドコンポーネントを Blazor のフロントエンドのビューに追加するとします。図 1 は、まったく新しいテンプレートベースの Blazor の DataSource コンポーネントのソースコードを示しています。

図 1 DataSource テンプレートコンポーネント

@typeparam TItem
@inject HttpClient HttpExecutor
<div style="border: solid 4px #111;">   
  <div class="table-responsive">
    <table class="table table-hover">
      <thead>
        <tr>
          @if (HeaderTemplate != null)
          {
            @HeaderTemplate
          }
        </tr>
      </thead>
      <tbody>
        @foreach (var item in Items)
        {
          <tr>
           @RowTemplate(item)
          </tr>
        }
      </tbody>
      <tfoot>
        <tr>
          @if (FooterTemplate != null)
          {
            @FooterTemplate(Items)
          }
        </tr>
      </tfoot>
    </table>
  </div>
</div>
@functions {
  [Parameter]
  RenderFragment HeaderTemplate { get; set; }
  [Parameter]
  RenderFragment<TItem> RowTemplate { get; set; }
  [Parameter]
  RenderFragment<IList<TItem>> FooterTemplate { get; set; }
  [Parameter]
  IList<TItem> Items { get; set; }
}

ご覧のように、DataSource コンポーネントは HTML テーブルのスケルトンを中心に構築されており、バインドされたコレクション内のデータレコードに対してテーブル行を反復処理してテーブルの本体が構成されます。ヘッダーとフッターはテーブル行として定義され、実際のコンテンツの詳細はクライアントページに任されます。クライアントページは、@functions セクションで定義されたパブリックインターフェイスを介してコンポーネントと対話し、これをさらにカスタマイズできます。ここでは、HeaderTemplate、FooterTemplate、RowTemplate という 3 つのテンプレートと、Items という 1 つのプロパティを定義しました。これらはコンポーネントの実際のデータソースおよびデータプロバイダーとして機能します。

固定データ型にテンプレートベースのコンポーネントをバインドすることも、宣言で指定されたジェネリックデータ型にコンポーネントをバインドすることもできます。現実に即して、異なるデータのコレクションを表示、検索、ページ処理するために、同じグリッドのコンポーネントを使用できます。コンポーネントにこの機能を持たせるには、Blazor では次のように @typeparam ディレクティブを使用します。

@typeparam TItem

Razor ソースコードにある TItem モニカーへの参照は、動的に決定される C# ジェネリッククラスの型への参照として扱われます。コンポーネント内で使用される実際の型は、TItem プロパティで指定します。図 2 は、クライアントページがどのようにして DataSource テンプレートコンポーネントを宣言するかを示します。

図 2 DataSource テンプレートコンポーネントの宣言

<DataSource Items="@Countries" TItem="Country">
  <HeaderTemplate>
    <th>Name</th>
    <th>Capital</th>
  </HeaderTemplate>
  <RowTemplate>
    <td>@context.CountryName</td>
    <td>@context.Capital</td>
  </RowTemplate>
  <FooterTemplate>
    <td colspan="2">
      @context.Count countries found.
    </td>
  </FooterTemplate>
</DataSource>

ジェネリック型プロパティの名前 (前述のコードスニペットでは TItem) は、コンポーネントのソースコード内の @typeparam ディレクティブを介して宣言された型パラメーターの名前と一致します。ジェネリック型パラメーターは、フレームワークによって推論されるだけで、指定されないことが多いことにご注意ください。

テンプレートの要素のプログラミング

Blazor テンプレートは、RenderFragment 型のインスタンスです。別の言い方をすれば、それは Razor ビューエンジンによってレンダリングされるマークアップのまとまりであり、.NET 型の普通のインスタンスのように扱うことができます。ほとんどのテンプレートはパラメーターがありませんが、汎用化することもできます。汎用テンプレートは、指定された型のインスタンスを引数として受け取り、その内容を使って出力をレンダリングできます。図 2 のサンプルでは、ヘッダーテンプレートにはパラメーターがありませんが、行テンプレートとフッターテンプレートは汎用的です。

具体的には、RowTemplate プロパティは TItem のインスタンスを受け取るのに対し、FooterTemplate プロパティは TItem インスタンスのコレクションを受け取ります。必要に応じて、固定型のインスタンスを受け取るためのテンプレートを定義することもできます。たとえば、代わりに、ページ内にレンダリングされるアイテム数を示す整数のみを FooterTemplate に渡すこともできます。これを次のコードに示します。

RenderFragment<TItem> RowTemplate { get; set; }
RenderFragment<IList<TItem>> FooterTemplate { get; set; }

テンプレートをクライアントページで実装するかどうかはオプションにすることができ、そのためには、使用前に簡単な存在確認を行うよう、その呼び出しをラップします。Blazor コンポーネントがどのようにしてテンプレートプロパティの 1 つをオプションにできるかを次に示します。

@if (FooterTemplate != null)
{
  @FooterTemplate(Items)
}

パラメトリックテンプレートをレンダリングするときは、テンプレートの引数を参照するために “context” 暗黙名を使用します。たとえば、RowTemplate プロパティを使用してテーブル行をレンダリングするときは、次のようにコンテキストパラメーターを使用して、レンダリングするアイテムを参照します。

<RowTemplate>
  <td>@context.CountryName</td>
  <td>@context.Capital</td>
</RowTemplate>

次に示すように、コンテキストの引数名は、テンプレートのコンテキストプロパティを使用して宣言によって変更できます。

<RowTemplate Context="dataItem">
  <td>@dataItem.CountryName</td>
  <td>@dataItem.Capital</td>
</RowTemplate>

その結果、図 3 に示すように、同じ Blazor ビューで DataSource 汎用コンポーネントを使用して、さまざまなデータ型のデータグリッドにデータを読み込めます。記述したコードの構造は、次のように要約されます。

<DataSource Items="@Countries" TItem="Country">
  ...
</DataSource>
<DataSource Items="@Forecasts" TItem="WeatherForecast">
  ...
</DataSource>

図 3 DataSource 汎用コンポーネント

表示されるグリッドの周囲のマークアップやコード (ページャーバー、検索バー、並べ替えボタンなど) はすべて完全に再利用されます。個人的な話になりますが、こうした詳細なレベルのマークアップのカスタマイズは昔の ASP.NET Web フォームを思い起こさせます。当時はカスタムサーバーコントロールがテンプレートやカスタムプロパティを介して独自のドメイン固有言語を定義していました。そのおかげで、目的の UI の概要を示すプロセスは非常にスムーズで容易でした。MVC の到来と、それに続いて起こったプレーンなクライアント側 Web 開発への移行により、私たちは HTML の機構に接近する一方で、抽象化からは遠ざかることになりました。フレームワークのコンポーネントは、あのレベルの表現力を取り戻そうとする試みにほかなりません。

Blazor の TypeAhead コンポーネントの書き換え

先月 (msdn.com/magazine/mt830376)、私は全体が Blazor で書かれた先行入力コンポーネントを紹介しました。これは、人気の (そして JavaScript ベースの) Twitter TypeAhead プラグインと同じ機能を提供するものです。あの実装では、ヒントを返す役目のサーバーエンドポイントは、実際には 3 つのプロパティを持つコンパクトな汎用データ転送オブジェクトを返す必要がありました。すなわち、クエリで識別されたオブジェクトの一意の ID、表示テキスト、そして 3 つ目のプロパティとしてヒントごとにドロップダウンボックスに表示されるマークアップのレンダリングです。

先月のデモでは、先行入力コンポーネントを使用して、国名を検索しました。サーバーエンドポイントは、ISO 国コード、国名、HTML スニペット (国名、首都、大陸を含む) から成るオブジェクトを返しました。ただし、HTML スニペットはサーバー実装の完全な管理下にあったため、クライアントページの作成者が先行入力コンポーネントを使用して HTML スニペットのレイアウトを制御することはできませんでした。これは、今までのような基本的なデモの領域から外に出て、テンプレートベースのコンポーネントが実際に動作する様子を観察するための完全なシナリオです。

図 4 に、新しい先行入力コンポーネントの HTML レイアウトを示します。これは先月と同じコードですが、注目すべき例外があります。それはヒントのプロバイダーから返されるデータの形式です。最初の実装で、ヒントのプロバイダー (サンプルコントローラー) はデータ転送オブジェクトを返していたため、これがユーザーによって選択される実際のデータを制御する唯一のポイントとなりました。ヒントのプロバイダーに合わせた先行入力項目のリストではなく国のリストを返させることで、Blazor コンポーネントは ItemTemplate プロパティを公開でき、呼び出し元が各ドロップダウンメニュー項目のレイアウトを決定できるようになります。コンポーネントは国のリストを受け取ると OnSelection イベントを発生させ、選択されたデータ項目のインスタンスを直接、関心のあるリスナーに渡すことができます。

図 4 テンプレートベースの TypeAhead コンポーネント

<div>
  <div class="input-group">
    <input type="text" class="@Class"
           oninput="this.blur(); this.focus();"
           bind="@SelectedText"
           onblur="@(ev => TryAutoComplete(ev))" />
    <div class="input-group-append">
      <button class="btn dropdown-toggle"
              type="button"
              data-toggle="dropdown"
              style="display: none;">
        <i class="fa fa-chevron-down"></i>
      </button>
      <div class="dropdown-menu @(_isOpen ? "show" : "")"
           style="width: 100%;">
        <h6 class="dropdown-header">
          @Items.Count item(s)
        </h6>
        @foreach (var item in Items)
        {
          <a class="dropdown-item"
           onclick="@(() => TrySelect(item))">
            @ItemTemplate(item)
          </a>
        }
      </div>
    </div>
  </div>
</div>

厳密には、選択したデータ項目の一意の ID をコードで収集する隠しフィールドが依然として必要な場合があります。これにより、先行入力コンポーネントが HTML フォームで使用されると、そのコンテンツをブラウザーの通常のチャネルを通して正常にポストすることが保証されます。しかし、より自然なこととして、今やこの隠しフィールドを先行入力コンポーネントの境界の外側に配置することができるようになったので、これをクライアントの開発者の完全な管理下に置くことができます。

先行入力コンポーネントは、ItemTemplate というテンプレートプロパティを定義します。これは次のように定義されます。

[Parameter]
RenderFragment<TItem> ItemTemplate { get; set; }

TItem パラメーターは、呼び出し元によって定義されます。概要として、項目テンプレートを持つ先行入力コンポーネントをセットアップするマークアップをここに示します。

<Typeahead TItem="Country"
           url="/hint/countries"
           name="country"
           onSelectionMade="@ShowSelection">
  <ItemTemplate>
    <span>@context.CountryName</span>&nbsp;
    <b>(@context.ContinentName)</b>
    <small class="pull-right">@context.Capital</small>
  </ItemTemplate>
</Typeahead>

TItem パラメーターは、Country 型のオブジェクトを処理し、指定された URL からヒントを受け取ることをコンポーネントに指示します。入力したテキストに基づくヒントが受け取られるたびに、それらのヒントは、ItemTemplate セクションのマークアップを使用して動的なドロップダウンリストにレンダリングされます。仕様により、項目テンプレートは現在のデータ項目のインスタンスを受け取り、HTML の行を作成します。言うまでもありませんが、ドロップダウンリストの形状は、現在は完全にページ作成者の管理下にあります。これは大きな前進です (図 5 参照)。

図 5 国のドロップダウンリスト

まとめ

TypeAhead コンポーネントは、Blazor のコンポーネントプログラミングの面白い例です。HTTP プロトコルを介してデータを取得するロジックだけでなく、テンプレートや、要素 (入力フィールドとドロップダウンリスト) 間の内部対話が含まれています。また、イベントを使用して外部と通信します。

人の心を引き付ける実験として誕生した Blazor は大きく成長していますが、方向性は完全には明らかになっておらず、今後数か月間で変わる可能性があります。現時点では、チームの主な目的は、WebAssembly を介してブラウザーで Blazor のクライアント側を実行するためのサポートを提供することです。

同時に、ASP.NET Core に Blazor を埋め込むことには多くの利点があります。その中でも主要なものとしては、アプリケーションの読み込み時間が非常に速いことが挙げられます。ASP.NET Core 3.0 に統合される Blazor コンポーネントは、名前が Razor コンポーネントに変更されます。これは、物事をわかりやすくし、ブラウザーで実行されるものと、サーバーで実行されてクライアント向けに出力を生成するものとの間の混同を避けるために選択された、単なる別名です。いずれにしても、コンポーネントモデルは、サーバーまたはクライアントのどちらで実行しているかに関係なく、同じままである必要があります。

Dino Esposito 氏は、彼の 25 年間のキャリアの中で、20 冊を超える本と 1,000 以上の記事の著者となっています。劇形式の作品『The Sabbatical Break』の著者である Esposito は、BaxEnergy のデジタルストラテジストとして、より良い世界を構築するためにソフトウェアの記述に取り組んでいます。彼には Twitter (@despos、英語) から連絡できます。

この記事のレビューに協力してくれたマイクロソフト技術スタッフのDaniel Roth

[Cutting Edge]

Blazor のテンプレート ベースのコンポーネント

Blazor にテンプレートを追加する

テンプレートの要素のプログラミング

Blazor の TypeAhead コンポーネントの書き換え

まとめ

その他のリソース

Blazor のテンプレートベースのコンポーネント