はじめに
Wijmo（ウィジモ）は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。現状の最新版は「2021J v3」です。
Wijmoが提供するUI部品は、単体で利用する他に、Angular、React、Vue.jsといったJavaScriptライブラリ・フレームワークと組み合わせて利用することもできます。WijmoのUI部品は各環境でコンポーネントとしてシームレスに動作します。
本記事では、Wijmoが提供する高機能グリッド部品FlexGridを、Reactと組み合わせたクライアント側環境および、マイクロソフトが提供するASP.NET Coreのサーバー側環境と組み合わせた実装を紹介します。Visual Studio 2022のプロジェクトテンプレートをもとに実装して、React上でFlexGridを表示させます。また、ASP.NET CoreでWeb APIを実装して、戻り値をFlexGridで表示する方法も説明します。
対象読者
- UI部品としてWijmoの利用を検討されている方
- Reactで利用できるUI部品を試したい方
- ASP.NET CoreのWeb API実装について知りたい方
必要な環境
本記事のサンプルコードは、以下の環境で動作を確認しています。
- Windows 10 64bit版
- Wijmo 5.20213.824
- Microsoft Visual Studio Community 2022 17.0.5
- Node.js 16.13.2 64bit版
- Microsoft Edge 98.0.1108.43
サンプルコードに含まれるソリューションファイル（*.sln）をVisual Studio 2022で開くことで、ソースコードの確認や実行が行えます。
Visual StudioでReactプロジェクトを作る
WijmoをReactで使う準備として、まずVisual StudioでReactプロジェクトを作成して実行してみます。プロジェクトを実行して表示されるWebページ（図2）では、画面右上の「Counter」をクリックすると、ボタン押下でカウンターが増えるサンプルが表示されます。また「Fetch data」は、ASP.NET Coreで実装した天気予報のデータを模擬したWeb APIから取得したデータを表に表示するサンプルです。
プロジェクトの作成方法を説明します。まずVisual Studioでプロジェクトを新規作成します。プロジェクトテンプレートは「React.js での ASP.NET Core」を選択します。
プロジェクト名と生成先パスの設定を行った後、フレームワークの選択では「.NET 6.0」を選択し、それ以外はデフォルト設定のままで「作成」をクリックすると、図2の通り実行できるプロジェクトが生成されます。
Reactプロジェクトの概要説明
図2のプロジェクトをもとにFlexGridの実装を追加するため、プロジェクトを構成するファイル群の概要を解説します。ソリューションファイル（P001ReactPlain.sln）と同じ階層のP001ReactPlainフォルダー（図4）内で、ClientAppフォルダーがReactを利用したクライアント側のコード、それ以外がASP.NET Coreを利用したサーバー側のコードです。Web APIはControllers配下に配置します（記事後半でWeb APIを追加実装します）。
ClientAppフォルダー内（図5）には、Reactプロジェクトの定義ファイルpackage.jsonなどが存在します。aspnetcore-https.jsは開発用のSSL証明書を生成する処理のファイル、aspnetcore-react.jsは生成したSSL証明書を参照する設定ファイル（.env.development.local）を生成する処理のファイルです。publicフォルダーにはindex.htmlなどが配置されます。
Reactを利用した実装の実体は、ClientApp/srcフォルダー内（図6）に存在します。
最初に実行されるのがindex.jsで、それが内部的にApp.jsに定義されたAppコンポーネントをWebページに表示します。srcフォルダー内ファイルの役割を表1に示します。今回は、プロキシーを設定するsetupProxy.js（後述）以外は変更せずそのまま利用します。
| No. | ファイル名 | 役割 |
|---|---|---|
| 1 | App.js | Webページに表示する最上位のコンポーネント |
| 2 | App.test.js | App.jsの単体テストファイル |
| 3 | custom.css |
デフォルトのCSSファイル
|
| 4 | index.js |
最初に実行されて、App.jsのコンポーネントを画面に 表示する処理 |
| 5 | reportWebVitals.js | Webページの計測を行うWeb Vitalsのファイル |
| 6 | service-worker.js |
Webページと独立して動作するService Workerのファイル
|
| 7 | ServiceWorkerRegistration.js | Service Workerを登録する処理のファイル |
| 8 | setupProxy.js | プロキシーを設定する処理のファイル |
Webページの表示内容に対応する実装（コンポーネント）は、Clientapp/src/componentsフォルダー内に存在します（図7）。
componentsフォルダー内各ファイルの役割を表2に示します。Layout.jsがページ全体に対応し、その中にNavMenu.jsによる画面上部メニューが表示されます。画面上部メニューの「Home」「Counter」「Fetch data」リンクをクリックすると、各リンクに対応するHome.js、Counter.js、FetchData.jsのコンポーネントを切り替え表示できます。
| No. | ファイル名 | 役割 |
|---|---|---|
| 1 | Counter.js | Counterページに対応するコンポーネントファイル |
| 2 | FetchData.js | Fetch dataページに対応するコンポーネントファイル |
| 3 | Home.js |
Homeページに対応するコンポーネントファイル
|
| 4 | Layout.js | ページ全体の表示に対応するコンポーネントファイル |
| 5 | NavMenu.css | 画面上部メニューのスタイルシート |
| 6 | NavMenu.js | 画面上部メニューのコンポーネントファイル |
以上を踏まえて、本記事ではcomponentsフォルダーにコンポーネントのファイルを1つ追加して、その中でFlexGridを表示するように実装していきます。
