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

npm & Wijmoクイックスタート【2020年版】

by GrapeCity_dev

本記事では、「Wijmo（ウィジモ）」のnpmパッケージを使用して、Wijmoのデータグリッド「FlexGrid（フレックスグリッド）」でデータ表示を行うWebアプリケーションを作成する方法を紹介します。2018年3月19日に投稿した記事「Wijmoクイックスタート with npm！」を、2020年2月時点における最新の技術と弊社製品で更新した内容です。

Wijmoのnpmパッケージ

Wijmoのnpmパッケージは複数用意されています。あまりサイズを気にしなくていい場合や、とりあえず全てのパッケージをインストールする場合は@grapecity/wijmo.allを使用します。

JavaScriptフレームワークで使用する場合には個別に以下のパッケージを使用できます。これにより余計なパッケージのインストールがなくなり、アプリケーションのサイズを減らせます。

  • Angular：@grapecity/wijmo.angular2.all
  • React：@grapecity/wijmo.react.all
  • Vue：@grapecity/wijmo.vue2.all
  • 使用しない：@grapecity/wijmo.purejs.all

本記事ではフレームワークを使用せずにアプリケーションを作成するので、@grapecity/wijmo.purejs.allを使用します。

プロジェクトの作成

まず、Visual Studio Codeのターミナルでプロジェクトのフォルダquickstartを作成してquickstartフォルダに移動します。

mkdir quickstart
cd quickstart

npm initコマンドを実行して、package.jsonファイルを作成します。途中、プロジェクトの設定についていくつか質問されますが、すべてEnterを押して既定値を選択して問題ありません。

npm init

次にnpm installコマンドを実行して各パッケージをインストールします。今回インストールするパッケージは以下です。

  • webpack
  • webpack-cli
  • style-loader
  • css-loader
  • sass-loader
  • node-sass
  • html-webpack-plugin
npm install --save-dev webpack webpack-cli style-loader css-loader sass-loader node-sass html-webpack-plugin

webpackを利用してWijmoのSassをバンドルし、htmlファイルも生成するために必要なパッケージをインストールしています。全てインストールするとpackage.jsonのdevDependenciesは以下のように構成されます。

"devDependencies": {
"css-loader": "^3.4.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11"
}

quickstartフォルダにwebpackの設定ファイルwebpack.config.jsを作成して、下記のコードを追加します。

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.scss$/,
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
},
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};

package.jsonのscriptsに以下のコードを追加します。

"scripts": {
"build": "webpack"
},

quickstartフォルダにsrcフォルダを作成してindex.htmlとindex.jsを作成します。

index.htmlとindex.jsを作成

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

まず、npmでWijmoをインストールします。

npm install @grapecity/wijmo.purejs.all

index.htmlのbody要素に、FlexGridを表示するためのdiv要素を追加します。

<!DOCTYPE html>
<html>
<head>
    <title>Wijmoクイックスタート FlexGridサンプル</title>
</head>
<body>
<div>
<div id="flexGrid" style="height: 600px;"></div>
</div>
</body>
</html>

index.jsに下記のコードを追加します。FlexGridを生成します。

import '@grapecity/wijmo.styles/wijmo.scss';
import '@grapecity/wijmo.cultures/wijmo.culture.ja';
import * as wjGrid from '@grapecity/wijmo.grid';
let flexGrid = new wjGrid.FlexGrid('#flexGrid',{
itemsSource: getData(),
columns: [
{ binding: 'id', header: 'ID'},
{ binding: 'product', header: '商品名'},
{ binding: 'date', header: '受注日'},
{ binding: 'amount', header: '金額'}
]
});
function getData() {
return [
{ 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 },
];
}

アプリケーションのビルドと確認

Visual Studio Codeのターミナルでnpm run buildを実行するとdistフォルダにindex.htmlとmain.jsが作成されます。

ビルド

ローカルの開発環境において、簡易的な開発サーバー（ローカルサーバー）を使用して確認する方法は色々ありますが、Visual Studio Codeの拡張機能「Live Server」を利用するのが簡単でおススメです。

Live Server – Visual Studio Marketplace

Live ServerをインストールしてVisual Studio Codeを再起動した後、index.htmlを右クリックして「Open with Live Server」をクリックします。

Live Server

ブラウザが起動しindex.htmlが表示されます。ページ内のFlexGridでデータが表示されていることが確認できます。

FlexGrid