GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の、製品のTIPSや発売などに関する最新情報をお届けします。

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

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';

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

  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉ではエンジニア経験者を幅広く募集しています。
  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の製品のデモアプリケーションをお試しください。