GrapeCity.devlog

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

GrapeCity

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

Vue(Vue.js)は、AngularやReactなどと同じく近年フロントエンド開発で注目が集まっているJavaScriptフレームワークのひとつです。日本語ドキュメントも非常に充実しており学習しやすいのもポイントです。

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

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

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

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

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

npm install -g @vue/cli

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

vue create quickstart

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

cd quickstart
npm run serve

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

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

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

npm install wijmo

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

npm install @grapecity/wijmo.vue2.all

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

<script>
import HelloWorld from './components/HelloWorld.vue'

import 'wijmo/wijmo.vue2.grid';
import 'wijmo/cultures/wijmo.culture.ja.js';
import 'wijmo/styles/wijmo.css';

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

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

<script>
import HelloWorld from './components/HelloWorld.vue'

import '@grapecity/wijmo.vue2.grid';
import '@grapecity/wijmo.cultures/wijmo.culture.ja';
import '@grapecity/wijmo.styles/wijmo.css';

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

src/App.vue<script></script>にあるexport defaultの中にFlexGridで表示するデータgridDataを設定します。

<script>
import HelloWorld from './components/HelloWorld.vue'
import 'wijmo/wijmo.vue2.grid';
import 'wijmo/cultures/wijmo.culture.ja.js';
import 'wijmo/styles/wijmo.css';

export default {
  name: 'app',
  data: function () {
    return {
      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 }
      ]
    }
  },
  components: {
    HelloWorld
  }
}
</script>

src/App.vue<template></template>にある<HelloWorld>要素の下にFlexGridコンポーネント<wj-flex-grid>を設定します。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <wj-flex-grid :itemsSource="gridData">
      <wj-flex-grid-column header="ID" binding="id" :width="60"></wj-flex-grid-column>
      <wj-flex-grid-column header="商品名" binding="product" :width="200"></wj-flex-grid-column>
      <wj-flex-grid-column header="受注日" binding="date" :width="120"></wj-flex-grid-column>
      <wj-flex-grid-column header="金額" binding="amount" :width="100" format="c"></wj-flex-grid-column>
    </wj-flex-grid>
  </div>
</template>

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

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

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