「Wijmo（ウィジモ）」とElectron、Reactに、TypeScriptを組み合わせてスムーズなアプリ開発を実現

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

生産性を描画するアプリを作る

　それでは、ElectronとWijmoを活用したアプリをTypeScriptで書いていきましょう。セットアップ手順は前編に書いた通りです。

1. プロジェクトの作成、パッケージインストール
2. package.jsonを変更
3. public/electron.jsとpublic/preload.jsを追加
4. src/@types/global.d.tsを追加
5. @grapecity/wijmo.react.allをインストール

　前編の記事からの続きでも構いませんし、今回新たに、1～5のセットアップをしてから行っても構いません。

　今回は、データをビジュアル化するためにWijmoのチャート「FlexChart」やデータグリッド「FlexGrid」を使います。これらのコンポーネントは、利用者が定義したデータ型の配列を渡して描画できるものです。

　そこでまずはTypeScriptでデータ型を定義してみましょう。

データ型を定義する

　TypeScriptではtype Data = ...のように型を定義します。

// src/types.ts
export type Data = {
  /** 年月2020/01のような形式 */
  ym: string;
  /** 稼働時間合計 */
  time: number;
  /** 生産数 */
  count: number;
};

　src/types.tsにData型を定義しました。Data型は年と月を表現するymという文字列、稼働時間のtimeという数値型、生産数のcountという数値型を持ちます。

生産性表示コンポーネントを作成する

　次に、Wijmoのチャートとデータグリッドを組み合わせた、生産性表示コンポーネントProductivityを作成します。

// src/Productivity.tsx
import { useMemo } from "react";
import * as wjGrid from "@grapecity/wijmo.react.grid"; //（1）グリッドを読み込む
import * as wjChart from "@grapecity/wijmo.react.chart"; //（2）チャートを読み込む
import * as wj from "@grapecity/wijmo"; //（3）CollectionView を読み込む
import { Data } from "./types";

//（4）Productivity コンポーネント
/** 生産性描画コンポーネント
 *  @param data 生産性データの配列
 */
const Productivity: React.FC<{ data: Data[] }> = ({ data }) => {
  //（4-1）プロパティで受け取った Data型の配列を、WijmoのCollectionViewに変換する
  const items = useMemo(() => {
    return new wj.CollectionView<Data>(data);
  }, [data]);

  return (
    <div>
      <wjChart.FlexChart itemsSource={items} bindingX="ym">
        <wjChart.FlexChartSeries name="稼働時間" binding="time" />
        <wjChart.FlexChartSeries
          name="生産数"
          binding="count"
          chartType="LineSymbols"
        />
        <wjChart.FlexChartLegend position="Bottom" />
      </wjChart.FlexChart>
      <wjGrid.FlexGrid itemsSource={items}>
        <wjGrid.FlexGridColumn header="年月" binding="ym" width="*" />
        <wjGrid.FlexGridColumn header="稼働時間" binding="time" width="*" />
        <wjGrid.FlexGridColumn header="生産数" binding="count" width="*" />
      </wjGrid.FlexGrid>
    </div>
  );
};

export default Productivity;

　（1）と（2）でそれぞれWijmoのFlexGridとFlexChartを読み込んでいます。

　（3）では、Wijmoのコンポーネントで使われるCollectionViewクラスを読み込んでいます。

　（4）が、今回作るProductivityコンポーネントで、先ほど作成したData型の配列をdataというプロパティで受け取るものです。const Productivity: React.FC<{ data: Data[] }> = ...はProductivityというReactの関数型コンポーネントを定義しています。

　const name = 'Wijmo';のようなシンプルな変数定義と違う点は、: React.FC<{ data: Data[] }>でしょう。これはTypeScriptの型アノテーションと呼ばれるもので、React.FCというReact関数型コンポーネントであり、コンポーネントのプロパティは、{ data: Data[] }つまり、Data型の配列であるdataを持つという宣言をしています。

　少し複雑な型アノテーションであるため、もっとシンプルなケースを説明します。例えば文字列型ならconst name: string = 'Wijmo';のようになりますし、数値型ならconst yaer: number = 2020;になります。

　ただし、実際には数値や文字列の変数定義のように、型がわかりやすいものは、型推論というTypeScriptの賢い機能があるため、わざわざ: stringや: numberを指定することは必要はありません。

　次に、Productivity関数型コンポーネントの実際の中身を見ていきましょう。

　（4-1）では、ReactHooksのuseMemoというフック関数を使って、Data型の配列を、WijmoのCollectionViewオブジェクトに変換しています。useMemoは、第2引数の配列が変更されない限りは同じ値を返すという仕様をしています。キャッシュに似た仕組みであるメモ化をしてくれるものです。

サンプルデータを描画する

　それでは、作成したProductivityコンポーネントを使って、実際にサンプルデータを用意して描画してみましょう。

// src/App.tsx
import React from "react";
import Productivity from "./Productivity";
import { Data } from "./types";

import "@grapecity/wijmo.styles/wijmo.css";
import "@grapecity/wijmo.cultures/wijmo.culture.ja";

//（1）Data型配列のサンプルデータを作成する関数
const createData: () => Data[] = () => {
  return [
    {
      ym: "2018/09",
      time: 160,
      count: 200,
    },
    {
      ym: "2018/10",
      time: 200,
      count: 300,
    },
    {
      ym: "2018/11",
      time: 120,
      count: 150,
    },
    {
      ym: "2018/12",
      time: 240,
      count: 200,
    },
  ];
};

const App: React.FC = () => {
  return <Productivity data={createData()} />;
};

export default App;

　（1）ではData型配列のサンプルデータを作成する関数を定義しています。ここでは、() => Data[]という型アノテーションをつけています。引数はなしで、戻り値がData型の配列であるという宣言になります。

サンプルデータを表示