JavaScript/React/Wijmo/Wijmoクイックスタート

React & Wijmoクイックスタート

by MESCIUS-dev

※2019年2月時点における最新の技術と弊社製品で更新した内容はこちらです。 


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

また、WijmoはReactをサポートしており、Reactの標準的な方法で、グリッド／入力／チャートなどのエンタープライズ向けの高度なUIコンポーネントを利用することができます。

この記事では、Create React AppとWijmoを使用して、日付入力コントロールでデータ連結とイベント処理を行うReactアプリケーションを作成する方法を紹介します。React開発する際のサンプルやチュートリアルとしてご活用ください。

この記事では、次のバージョンのライブラリを使用して動作確認を行っています。

  • React 16.0.0
  • Create React App v1.4.3
  • Node.js 8.9.1

f:id:ComponentOne_JP:20171122154559p:plain

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

まだCreate React Appがインストールされていない場合は、次のコマンドを実行して、Create React Appパッケージをグローバルにインストールします。

npm install -g create-react-app

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

create-react-app quickstart

アプリケーションの作成が終了したら、アプリケーションのフォルダに移動します。

cd quickstart

Wijmoコンポーネントを追加する

次のコマンドを実行して、Wijmoパッケージをプロジェクトにインストールします。Wijmo製品版を使用する場合は、製品版のNpmImagesフォルダを参照します。

# トライアル版の場合
npm install --save http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-AMD-5.20172.359.tgz
# 製品版の場合
npm install --save xxx/NpmImages/wijmo-amd-min/

CDNまたはWijmo製品版から下記の2つのファイルを取得して、プロジェクトのsrcフォルダに追加します。

src/App.jsファイルの先頭で、WijmoのCSSファイル、カルチャーファイル、Inputモジュールをインポートします。

import './wijmo.min.css';
import './wijmo.culture.ja.min.js';
import * as wjInput from 'wijmo/wijmo.react.input';

src/App.jsファイルのAppクラスで、日付値を保持するためのdate変数をStateに追加します。また、日付値が変更されたときに実行されるイベントハンドラを追加します。イベントハンドラでは、アラート画面を表示してから変更された値をStateに設定します。

class App extends Component {
constructor(props) {
super(props);
this.state = {
date: new Date(2017, 0, 1),
};
this.valueChanged= this.valueChanged.bind(this);
}
valueChanged(s, e) {
alert(s.value.toLocaleDateString() + 'に変更されました。');
this.setState({date: s.value});
}
}

src/App.jsファイルのApp.render()メソッドで、InputDateコンポーネントと選択された値を描画します。InputDateコンポーネントでは、valueプロパティに値を連結して、valueChangedイベントハンドラを設定します。

render() {
return (
<div>
<wjInput.InputDate value={this.state.date} valueChanged={this.valueChanged}></wjInput.InputDate>
<p>選択された値: {this.state.date.toLocaleDateString()}</p>
</div>
);
}

webpackの設定を変更する

Wijmoのカルチャーファイル（wijmo.culture.ja.min.js）を読み込むと、Wijmoコンポーネントをそのカルチャーの言語や書式で表示することができます。ただし、カルチャーファイルはモジュール形式ではないため、webpackのscript-loaderを使用してファイルを読み込む必要があります。

カルチャーファイルを読み込まない場合、このセクションの手順を行う必要はありません。

まず、script-loaderパッケージをインストールします。

npm install --save-dev script-loader

Create React Appで作成したアプリケーションでwebpackの設定を変更するために、npmのejectコマンドを実行します。

npm run eject

config/webpack.config.dev.jsファイルとconfig/webpack.config.prod.jsファイルに次のコードを追加して、script-loaderでカルチャーファイルを読み込めるようにします。

module: {
strictExportPresence: true,
rules: [
// ==== ここから ====
{
test: /wijmo\.culture/,
use: [ 'script-loader' ]
},
// ==== ここまで ====

アプリケーションを実行する

以上の手順で、クイックスタートアプリケーションの作成は完了です。npm startコマンドを実行すると、Reactアプリケーションが実行されて、日付入力コンポーネントが表示されます。また、日付を変更すると、アラート画面が表示されて連結データが変更されることを確認できます。

npm start

f:id:ComponentOne_JP:20171121115225p:plain

さいごに

製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼  この記事をシェアする  ／