グリッドコントロールを設置しよう - Ignite UI for React で始めるフロントエンド開発 - ②

f:id:cleverdog:20210204105206j:plain

こんにちは！ソリューションコンサルタントの中江です。

本記事では、アプリケーション開発におけるフロントエンド構築のための JavaScript ライブラリ React の入門記事として、新規 React プロジェクトの作成から、簡単なアプリケーションの構築を行なっていきます。

アプリケーションの構築には弊社開発ツールの Ignite UI for React を利用して、高機能なグリッドやチャートコントロールを、簡単に実装していきます。

以下の記事では、Ignite UI for React のコントロールを組み込んだデータ可視化ダッシュボードのサンプルアプリケーションについて紹介しています。こちらもぜひご覧ください。

blogs.jp.infragistics.com

今回は Ignite UI で最も利用されるコントロールであるグリッドを組み込んでいきます。

事前準備
Ignite UI for React グリッドモジュールのインポート
コンポーネントの使用
データサービスの作成
- SampleDataService.ts
データのバインド、アプリケーションの確認
まとめ
- Ignite UI for React トライアル版を利用するには

事前準備

前回の記事をご参照いただき、開発環境の準備ができた状態にしてください。

blogs.jp.infragistics.com

Ignite UI for React グリッドモジュールのインポート

Ignite UI for React のグリッドコントロールを利用するためにモジュールをインポートする記述を行う必要があります。App.tsx を開き、以下のように変更します。

import React from 'react';
import logo from './logo.svg';
import './App.css';

// グリッドモジュールのインポート
import { IgrDataGridModule } from 'igniteui-react-grids';
import { IgrDataGrid } from 'igniteui-react-grids';
import { IgrGridColumnOptionsModule } from 'igniteui-react-grids';
// register() メソッドの実行
IgrDataGridModule.register();
IgrGridColumnOptionsModule.register();

コンポーネントの使用

では前回配置した、地理的マップコントロールと置き換える形でグリッドを配置してみます。App.tsx の App() 関数を以下のように変更します。

function App() {
  return (
    <div style={{height: "100%", width: "100%" }}>
      <IgrDataGrid
      height="100%"
      width="100%"
      rowHeight="60"
      defaultColumnMinWidth="110"
      isColumnOptionsEnabled="true"
      dataSource={data}>
      </IgrDataGrid>
    </div>
  );
}

<IgrDataGrid　dataSource={data}></IgrDataGrid> という形で、dataSource プロパティに {data} をバインディングしていることがわかるかと思います。この時点ではバインディング可能なデータがありませんので、グリッドに表示するためのデータを用意します。

データサービスの作成

今回は新規でデータサービス用のファイルを作成し、データサービスからグリッドに表示するためのデータを取得して dataSource にバインディングします。

データサービスではダミーデータを生成して返却するメソッドを用意します。

最終的なイメージとしてはこのようなグリッドを作成していきます。架空の競技において、各選手毎の得点を表形式で表示します。表には所属チーム情報とデータの作成日情報も含まれます。

SampleDataService.ts

新規ファイルとして、SampleDataService.ts を src フォルダ以下に作成し、以下のように記述しました。

//ダミーの名前リスト
export const Names: any[] = [
    '保坂 獅童','広田 サダヲ','笠井 浩正','畠山 徹','杉本 圭','樋口 真帆','柴咲 あい','丹野 貴美子','山内 雅之','鶴田 聖陽','香川 あさみ','脇田 仁晶','岸本 恵子','寺本 愛梨','平井 恵梨香','古田 恵美','今井 有起哉','村山 莉央','豊田 直人','牧田 友也'
]
//所属チームリスト
export const Teams: any[] = [
    'レッド', 'ブルー', 'グリーン'
]

//グリッドに与えるデータモデル
interface item {
  name: string,
  team: string,
  score: number,
  created: Date
}

/* tslint:enable */
export class SampleDataService {
  public static generateData(): any[] {
    const data: any[] = [];
    const date = new Date();
    for (let i = 0; i < Names.length; i++) {
      const name = this.randomNoRepeats(Names);
      const selectedTeam = this.randomNoRepeats(Teams);
      let item:item = {
          name: name,
          team: selectedTeam,
          score: Math.floor(Math.random() * 249 + 750),
          created: date
      }
      data.push(item);
    }
    return data;
  }
  public static randomNoRepeats(array: any[]): string {
    var copy = array.slice(0);
    if (copy.length < 1) { copy = array.slice(0); }
    var index = Math.floor(Math.random() * copy.length);
    var item = copy[index];
    copy.splice(index, 1);
    return item;
  }
}

上記のデータサービスで行なっている処理はシンプルです。あらかじめ定義したダミーの名前リストや所属チームリストからランダムで値を取り出し、同じくランダムに生成した数値を得点として与えたオブジェクトを１つのアイテムとします。そのアイテムのリストを generateData() メソッドで返す形になっています。（今回 created 列はランダム化せず、同じDateオブジェクトを与えています。）

データのバインド、アプリケーションの確認

データサービスの準備が出来ましたので、先ほど用意したグリッドコントロールにバインドします。App.tsx を開いて、 SampleDataService をインポートし、 App() 関数を以下のように変更します。

...
import { SampleDataService } from './SampleDataService';
...
function App()
  //データサービスからサンプルデータを取得
  const data = SampleDataService.generateData();
  return (
    <div style={{height: "100%", width: "100%" }}>
      <IgrDataGrid
      ...
      isColumnOptionsEnabled="true"
      dataSource={data}>
      </IgrDataGrid>
    </div>
  );
}