React & Wijmoクイックスタート【2019年版】

ReactはFacebookが開発したJavaScriptフレームワークです。AngularやVueと並んで人気があり、フロントエンドの開発でよく使われています。

本記事では、このReactとWijmoを使用してグリッドでデータ表示を行うReactアプリケーションを作成する方法を紹介します。2017年11月24日に投稿した記事「React & Wijmoクイックスタート」を、2019年2月時点における最新の技術と弊社製品で更新した内容です。

ReactではコマンドラインツールCreate React Appを使用することで、非常に簡単にReactアプリケーションを作成することが可能です。

また、WijmoはReactをサポートしており、Reactの標準的な方法でグリッド/入力/チャートなどのエンタープライズ開発で必要とされるWijmoのコンポーネントを利用することができます。

Reactアプリケーションを作成する

アプリケーションを作成するフォルダを用意しておきます。npm installコマンドを実行して、Create React Appパッケージをグローバルにインストールします。インストール済みの場合は不要です。

npm install -g create-react-app

create-react-appコマンドを実行して、Reactアプリケーションを作成します。少し待つと、アプリケーションのソースファイルや設定ファイルが自動生成され、パッケージがインストールされます。

create-react-app quickstart

アプリケーションプロジェクトのフォルダに移動して、npm startコマンドを実行すると、開発サーバー上でアプリケーションが実行されます。アプリケーションはブラウザでhttp://localhost:3000を参照すると表示でき、ソースファイルを変更すると自動的に変更が反映されます。

cd quickstart
npm start

開発サーバーの起動を確認したらCtrl + Cをクリックして終了しておきます。

Wijmoのパッケージをインストールする

npm installコマンドを実行して、Wijmoパッケージをアプリケーションにインストールします。

npm install wijmo

※2019J v1以降を使用する場合は以下になります。

npm install @grapecity/wijmo.react.all

src/App.jsにWijmoのCSSファイルwijmo.css、FlexGridモジュールwijmo.react.grid、カルチャーファイルwijmo.culture.ja.jsをインポートします。

import 'wijmo/styles/wijmo.css';
import * as wjGrid from 'wijmo/wijmo.react.grid';
import 'wijmo/cultures/wijmo.culture.ja.js';

※2019J v1以降を使用する場合は以下になります。

import '@grapecity/wijmo.styles/wijmo.css';
import * as wjGrid from '@grapecity/wijmo.react.grid';
import '@grapecity/wijmo.cultures/wijmo.culture.ja';

src/App.jsAppクラスにコンストラクタconstructorgetDataを追加してFlexGridで表示するデータdataを設定します。

class App extends Component {
constructor(props) {
super(props);
this.state = {
data: this.getData()
};
}
getData() {
var gridData = [
{ id: 15, product: 'ピュアデミグラスソース', date: '2017/01/10', amount: 6000 },
{ id: 17, product: 'だしこんぶ', date: '2017/01/08', amount: 14500 },
{ id: 18, product: 'ピリカラタバスコ', date: '2017/01/12', amount: 4000 },
{ id: 84, product: 'なまわさび', date: '2017/01/21', amount: 8000 }
];
return gridData;
}
:
}

src/App.jsAppクラスにあるrender<header>要素の下に<div>要素を追加してFlexGridコンポーネント<wjGrid.FlexGrid>を設定します。FlexGridコンポーネントでは、itemsSourceプロパティに表示するデータdataを設定します。

render() {
return (
<div className="App">
<header className="App-header">
:
</header>
<div>
<wjGrid.FlexGrid itemsSource={this.state.data}>
<wjGrid.FlexGridColumn header="ID" binding="id" width={60}/>
<wjGrid.FlexGridColumn header="商品名" binding="product" width={200}/>
<wjGrid.FlexGridColumn header="受注日" binding="date" width={120}/>
<wjGrid.FlexGridColumn header="金額" binding="amount" width={100}/>
</wjGrid.FlexGrid>
</div>
</div>
);
}

FlexGridコンポーネントで表示するセルの高さを調整するためにApp.cssに以下のスタイルを追加します。

.wj-flexgrid .wj-cell {
height: 30px;
}

以上の手順で、クイックスタートアプリケーションの作成は完了です。

npm startコマンドを実行してhttp://localhost:3000に接続すると、ReactアプリケーションでFlexGridコンポーネントが表示されていることを確認できます。

f:id:GrapeCity_dev:20190218164000p:plain