C#/.NETでSPA開発を可能にする「Blazor」の進化、ビジネスUIコンポーネントの組み合わせで高速なWeb開発を実現［PR］

今回は「C#/.NETでSPA開発を可能にする「Blazor」の進化、ビジネスUIコンポーネントの組み合わせで高速なWeb開発を実現［PR］」についてご紹介します。

関連ワード（実装、膨大、開発環境等）についても参考にしながら、ぜひ本記事について議論していってくださいね。

本記事は、Publickey様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。

「Blazor」は、いわゆるSPA（Single Page Application）と呼ばれる動的なWebアプリケーションを、C#を始めとする.NETのテクノロジーで開発できる、マイクロソフトが開発しているWebアプリケーションフレームワークです。

SPAのような比較的高度なWebアプリケーションの開発には、ReactやAngularなどJavaScriptのフレームワークを用いることが一般的です。

しかし.NETテクノロジーを利用してきた開発者にとってJavaScripを中心とした開発への参入は、プログラミング言語やフレームワーク、ライブラリ、開発環境に至るまで新しく学び直すことになるという、非常に高いハードルを越えなくてはなりません。

それがBlazorを用いることで、サーバサイドからユーザーインターフェイスに至るまで、C#やVisual Studioなどの.NETテクノロジーを用いたこれまでの知識と経験を活用して、高度なWebアプリケーションの開発を進めることができるようになります。

特にこれからのビジネスアプリケーションは、デスクトップアプリケーションとして実現されてきた機能の多くをWebアプリケーションへと移植することが求められるはずです。

そのとき、SPAのような動的なWebアプリケーションの開発は欠かせないものとなるでしょう。

その点でBlazorは間違いなく、.NETプログラマにとって注目すべきWebアプリケーションフレームワークだと言えます。

複数の実装があるBlazor

Blazorは複数の実装が用意されていて、用途に応じて使い分けることができます。

1つ目の実装は「Blazor Server」です。サーバ側の.NET環境でビジネスロジックの実行とユーザーインターフェイスの生成が行われ、WebブラウザとWebSocketで接続してユーザーインターフェイスの表示を行います。

2つ目の実装は「Blazor WebAssembly」です。これはWebブラウザ上でWebAssemblyによって.NET環境を実現することで、サーバサイドに.NET環境がなくともWebブラウザの上でC#/.NETアプリケーションを実行可能にします。

そして最新の.NET 8では、サーバサイドレンダリング機能により静的なWebページをサーバサイドで生成し高速なWebサイトを実現する機能がBlazorに統合されました。

これによりBlazorはフルスタックなUIを実現するフレームワークに進化したと発表されました。すなわち、最新のBlazorを用いることで、.NETプログラマはフルスタックのWebアプリケーション開発力を得ることになるということです。

ビジネスアプリケーション開発を支援する「Ignite UI for Blazors」

Blazorでは「Razorコンポーネント」が、コーディングにおける高い開発生産性と柔軟なユーザーインターフェイス実現のカギとなっています。

Razorコンポーネントがあることで、手軽に高度なユーザーインターフェイスを開発できるのです。

そしてBlazorにあらかじめ用意されているネイティブなRazorコンポーネントに加えて、スプレッドシートライクなUIの高度なデータグリッドやチャート機能など60種類以上を提供するUIコンポーネント群など、ビジネスアプリケーション開発を支援するコンポーネント製品が提供されています。「Ignite UI for Blazor」です。

「Ignite UI for Blazor」には、ドラッグ＆ドロップで簡単にユーザーインターフェイスが開発できる「App Builder」が連携製品として存在しており、開発者に一段高い開発生産性をもたらしてくれます。

開発元であるインフラジスティックスは1989年に米国で創業し、長年にわたってWindowsやWebに対応したコンポーネント製品の提供で知られる企業です。日本法人であるインフラジスティックス・ジャパンも2000年に設立され、20年以上の実績を持ちます。

同社が提供するIgnite UI for Blazorに関するプライオリティサポートは、製品だけではなくBlazorのプログラミングに関する質問にも対応しています。

製品の特徴を紹介していきましょう。

業務システムでの利用に耐えうる高速データグリッド

「Ignite UI for Blazor」には35以上のネイティブ Blazor UIコントロールが含まれています。

最も代表的なコンポーネントは、Webブラウザ上で大量のデータを扱える「データグリッド」です。

行列ともにDOM仮想化による大量のデータ表示に最適化されており、多数の行もしくは列を用いて業務システムで取り扱うような膨大なデータを高速に処理できます。

データグリッドと次に紹介するチャート、そして画面レイアウトを自由に構成可能なドックマネージャを用いることで、コーディングをほとんど行わなくとも情報ダッシュボードとして大量のデータを柔軟に表示して分析可能にし、同時にグラフで表示するWebアプリケーションが可能になります。

データグリッドは表示方法によって、以下の4種類の選択が可能です。

表形式の「データグリッド」
テーブルを入れ子にできる階層形式の「階層グリッド」
データをツリー構造で表示する「ツリーグリッド」
ピボット可能な「ピボットグリッド」

どのデータグリッドにおいても、ソートやデータのフィルタリング、行の選択と移動、固定、グループ化を始めとするさまざまな操作が可能です。

データのスタイリングに関しても、テンプレートでの設定、ダークモードへの対応、セルごとの色やフォントの設定など柔軟に行えます。

65種類以上のグラフやチャートが表示可能

Ignite UI for Blazorの「チャート」は、折れ線グラフや棒グラフ、円グラフ、散布図バブルチャートなどを始めとする、65種類以上のグラフやチャートが表示可能です。

株価チャートでは、棒グラフや折れ線グラフに加えてローソク足チャートにも対応。リアルタイムにデータが流れ込んでくるストリーミングデータに対する動的なグラフ表現も可能です。

チャートもグリッド同様に大量のデータポイントを設定しても高速な表示が可能で、その性能は金融機関での利用などにより裏付けられています。

そして、こうしたさまざまなコンポーネントをWebブラウザ上で柔軟にレイアウトできるだけでなく、ユーザー自身が使いやすいようにカスタマイズできるのが「ドックマネージャー」です。

WYSIWYGで高速にアプリ開発が可能

そして「Ignite UI for Blazor」を用いて高速なビジネスアプリケーションの開発を実現するのが、Webブラウザベースの開発ツール「App Builder」です。

下記の画面で分かるとおり、豊富なサンプルレイアウトを基に、左側に並んでいるUIコンポーネントを画面上にドラッグ＆ドロップし、画面右側のプロパティで詳細を設定していくことで、HTMLやCSSを記述することなく、アプリケーションの画面構成を開発できます。

デザインはSketchやFigmaからもインポートできるため、デザイナーとも連係が可能です。

開発中はインスタントプレビューで確認できます。UIコンポーネントにREST API経由でデータソースに接続すると、データの表示も可能。

開発したアプリケーションはコードをダウンロードもしくはGitHubへ送って、好みのエディタで完成させることになります。

日本仕様への対応と問題解決に役立つプライオリティサポート

インフラジスティックス・ジャパンはこうした製品の日本語化だけでなく、日本仕様への対応も進めることで、日本のビジネスニーズに答えた製品を提供しています。

製品のサポートについてもビジネスアプリケーション開発者を支援するため、サンプルコードなどの具体的で問題解決にすぐに役立つ情報提供を行うだけでなく、製品のベースとなっている技術。例えばIgnite UI for BlazorであればBlazorや.NETに関する質問についても対応する「プラオリティサポート」を提供。