CodeZine(コードジン)

特集ページ一覧

JavaScriptライブラリ「Wijmo」のFlexGridをReact+ASP.NET Core環境で使ってみよう

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第19回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本記事では、グレープシティのJavaScriptライブラリ「Wijmo(ウィジモ)」に含まれるグリッド部品FlexGridを、Reactと組み合わせて利用する方法を説明します。ReactとASP.NET Coreを利用するVisual Studio 2022のテンプレートをもとに、FlexGridを表示させる実装を行います。関連して、ASP.NET CoreでWeb APIを作成して、APIの戻り値をFlexGridで表示する方法も説明します。

目次

はじめに

 Wijmo(ウィジモ)は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。現状の最新版は「2021J v3」です。

図1 Wijmoの製品ページ(https://www.grapecity.co.jp/developer/wijmo)
図1 Wijmoの製品ページ

 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から取得したデータを表に表示するサンプルです。

図2 Visual Studio 2022で生成できるReactアプリの実行結果(P001ReactPlain)
図2 Visual Studio 2022で生成できるReactアプリの実行結果(P001ReactPlain)

 プロジェクトの作成方法を説明します。まずVisual Studioでプロジェクトを新規作成します。プロジェクトテンプレートは「React.js での ASP.NET Core」を選択します。

図3 Visual StudioでReactアプリのテンプレートを選択してプロジェクトを作成
図3 Visual StudioでReactアプリのテンプレートを選択してプロジェクトを作成

 プロジェクト名と生成先パスの設定を行った後、フレームワークの選択では「.NET 6.0」を選択し、それ以外はデフォルト設定のままで「作成」をクリックすると、図2の通り実行できるプロジェクトが生成されます。

Reactプロジェクトの概要説明

 図2のプロジェクトをもとにFlexGridの実装を追加するため、プロジェクトを構成するファイル群の概要を解説します。ソリューションファイル(P001ReactPlain.sln)と同じ階層のP001ReactPlainフォルダー(図4)内で、ClientAppフォルダーがReactを利用したクライアント側のコード、それ以外がASP.NET Coreを利用したサーバー側のコードです。Web APIはControllers配下に配置します(記事後半でWeb APIを追加実装します)。

図4 ReactプロジェクトのP001ReactPlainフォルダー(P001ReactPlain)
図4 ReactプロジェクトのP001ReactPlainフォルダー(P001ReactPlain)

 ClientAppフォルダー内(図5)には、Reactプロジェクトの定義ファイルpackage.jsonなどが存在します。aspnetcore-https.jsは開発用のSSL証明書を生成する処理のファイル、aspnetcore-react.jsは生成したSSL証明書を参照する設定ファイル(.env.development.local)を生成する処理のファイルです。publicフォルダーにはindex.htmlなどが配置されます。

図5 ReactプロジェクトのP001ReactPlain/ClientAppフォルダー(P001ReactPlain)
図5 ReactプロジェクトのP001ReactPlain/ClientAppフォルダー(P001ReactPlain)

 Reactを利用した実装の実体は、ClientApp/srcフォルダー内(図6)に存在します。

図6 ReactプロジェクトのP001ReactPlain/ClientApp/srcフォルダー(P001ReactPlain)
図6 ReactプロジェクトのP001ReactPlain/ClientApp/srcフォルダー(P001ReactPlain)

 最初に実行されるのがindex.jsで、それが内部的にApp.jsに定義されたAppコンポーネントをWebページに表示します。srcフォルダー内ファイルの役割を表1に示します。今回は、プロキシーを設定するsetupProxy.js(後述)以外は変更せずそのまま利用します。

表1 srcフォルダーに含まれるファイル(P001ReactPlain)
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)。

図7 ReactプロジェクトのP001ReactPlain/ClientApp/src/componentsフォルダー(P001ReactPlain)
図7 ReactプロジェクトのP001ReactPlain/ClientApp/src/componentsフォルダー(P001ReactPlain)

 componentsフォルダー内各ファイルの役割を表2に示します。Layout.jsがページ全体に対応し、その中にNavMenu.jsによる画面上部メニューが表示されます。画面上部メニューの「Home」「Counter」「Fetch data」リンクをクリックすると、各リンクに対応するHome.js、Counter.js、FetchData.jsのコンポーネントを切り替え表示できます。

表2 componentsフォルダーに含まれるファイル(P001ReactPlain)
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を表示するように実装していきます。


関連リンク

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:最先端テクノロジーに対応した高速・軽量なJavaScript UIライブラリ「Wijmo」の活用

もっと読む

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5