GrapeCity.devlog

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

GrapeCity

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

本記事では、「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.jsondevDependenciesは以下のように構成されます。

"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.jsonscriptsに以下のコードを追加します。

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

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

index.htmlとindex.jsを作成

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

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

npm install @grapecity/wijmo.purejs.all

index.htmlbody要素に、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.htmlmain.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

  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の製品のデモアプリケーションをお試しください。