JavaScript/Nuxt.js/TypeScript/Vue.js/Wijmo/Wijmoクイックスタート

JavaScriptフレームワーク「Nuxt.js」でWijmoを使う

by MESCIUS-dev

業務アプリケーションの様々な要件に対応できるUI部品を備えたJavaScriptライブラリ「Wijmo（ウィジモ）」は、ReactやAngular、Vue.jsといったフロントエンドフレームワークだけでなく、「Next.js」や「Nuxt.js」といったメタフレームワークでも、CSR（クライアントサイドレンダリング）に限り利用が可能です。

今回はVue.jsベースのメタフレームワーク「Nuxt.js」を使ってアプリケーションを構築し、そのUIにWijmoのデータグリッドコントロール「FlexGrid（フレックスグリッド）」を利用する方法についてご紹介します。

Nuxt.jsの詳細は以下の記事もご参考ください。

準備

Node.jsとnpm

はじめに開発環境を整備します。Nuxt.jsを使った開発には次の2つが必要です。

名称概要
Node.jsJavaScript実行環境
npmnpmから様々なモジュールを取得するためのパッケージ管理ツール

Node.jsのインストーラーは公式サイトから取得可能です。またnpmは、Node.jsのインストールによって利用できるようになります。Node.jsのインストール後にターミナルウィンドウを開き、以下のコマンドを実行してみましょう。

npm -v

バージョン番号（“10.8.2”といった番号）が確認できれば、セットアップは成功です。

Nuxt.jsでアプリケーションの作成

プロジェクトの作成

最初に行うのはプロジェクトの作成です。Nuxt.jsのアプリケーションのプロジェクトを作成するにはNuxt.jsのコマンドラインツールの「nuxi」を使います。

ターミナルウィンドウで任意のフォルダに移動の上、以下のコマンドを実行します。なお、コマンドの後ろにある「wijmo-nuxtjs-app」はプロジェクト名ですので、任意の名前を設定してください。
※ 本記事の手順ではNuxt.js 3.13.0を使用しています。

npx nuxi@latest init wijmo-nuxtjs-app

使用するパッケージマネージャを選択するように聞かれるので「npm」を選択します。

パッケージマネージャーの選択

その後、Gitレポジトリを初期化するか聞かれるので、「No」にしておきます。

Gitレポジトリの初期化

プロジェクト名のついたフォルダ「wijmo-nuxtjs-app」が作成されると、このステップは完了です。

アプリケーションの実行

プロジェクトを作成したら、動作確認のために実行してみましょう。プロジェクトフォルダ「wijmo-nuxtjs-app」に移動し、以下のコマンドを実行します。

npm run dev

実行後、ターミナルに表示されている「http://localhost:3000」にブラウザからアクセスすると以下のようにNuxt.jsのアプリケーションが表示されます。

Nuxt.jsアプリケーションの起動

Nuxt.jsのアプリケーションでWijmoを使う

先ほど作成したNuxt.jsのアプリケーションにWijmoのFlexGridを組み込んでいきます。最初に行うのはWijmoのモジュールのインストールです。

npmパッケージのインストール

Nuxt.jsでWijmoを使用する場合、Vue.js用のWijmoコンポーネントを使用します。Vue.js用のWijmoコンポーネントはnpmパッケージとして配布されており、「@mescius/wijmo.vue2.grid」のように必要なコントロールに対応したコンポーネントを個別にインストールするか、グループパッケージの「@mescius/wijmo.vue2.all」からすべてのコントロールをまとめてインストールすることも可能です。今回は後者のグループパッケージを使用する方法をご紹介します。
※ パッケージ名が「vue2」となっていますが、Vue 3でも利用可能です。

ターミナルウィンドウを使い、先ほど作成したプロジェクトのルートフォルダで次のコマンドを実行します。

npm install @mescius/wijmo.vue2.all

なお通常、npm installコマンドは指定したパッケージの最新版をインストールします。インストールするパッケージのバージョンを指定したい場合は、パッケージ名のあとに“@”とバージョン番号をつけてコマンドを実行します。

以下に示すのはWijmoのパッケージインストールにあたり、そのバージョンを2024J v1.1（5.20241.19）に指定する例です。

npm install @mescius/wijmo.vue2.all@5.20241.19

実装

npmパッケージをインストールしたら、アプリケーションのプロジェクトフォルダにあるファイルを編集してWijmoの実装を行なっていきます。

まずはプロジェクトのルートフォルダに「components」フォルダを作成します。
※ 「components」フォルダがすでに存在する場合はこの手順は不要です。

componentsフォルダ

今回は「FlexGrid」を使用してデータ表示を行うコンポーネントを作成していきます。「components」フォルダにVueコンポーネントファイル「FlexGrid.vue」を追加し、以下のように記述します。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。

<script setup>
import * as WjCore from "@mescius/wijmo";
import { WjFlexGrid, WjFlexGridColumn } from '@mescius/wijmo.vue2.grid';
//日本語化カルチャをインポートします。
import '@mescius/wijmo.cultures/wijmo.culture.ja';

WjCore.setLicenseKey('ここにWijmoのライセンスキーを設定します');

const gridData = [
  { id: 15, product: 'ピュアデミグラスソース', date: '2024/01/10', amount: 6000 },
  { id: 17, product: 'だしこんぶ', date: '2024/01/11', amount: 14500 },
  { id: 18, product: 'ピリカラタバスコ', date: '2024/01/12', amount: 4000 },
  { id: 84, product: 'なまわさび', date: '2024/01/21', amount: 8000 }
];

</script>

<template>
  <div>
    <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" format="c" :width="100"></wj-flex-grid-column>
    </wj-flex-grid>
  </div>
</template>

<style>
/* Wijmoのスタイルファイルをインポートします */
@import '@mescius/wijmo.styles/wijmo.css';

.wj-flexgrid {
    width: 521px;
}
</style>

次に「app.vue」ファイルの内容を以下のように書き換えます。

<template>
  <h1>
    Wijmo×Nuxt.jsサンプル
  </h1>
  <div>
    <FlexGrid />
  </div>
</template>

さらに nuxt.config.ts ファイルを次のように変更し、SSR（サーバーサイドレンダリング）しないように設定します。

export default defineNuxtConfig({
  ssr: false,
})

実行

以上で実装は完了です。再びターミナルウィンドウで以下のコマンドを実行し、動作を確認してみましょう。

npm run dev

コマンド実行により起動したWebブラウザ上で以下のようにFlexGridが表示されていれば実装は成功です。

Nuxt.jsアプリケーション上でWijmoのFlexGridを使用

Nuxt.jsのアプリケーションでWijmoのフィルタ機能を使う

次にFlexGridFilterコンポーネントを組み込んでExcelライクなソートやフィルタを使用してみます。「FlexGrid.vue」を以下のように書き換えます。

<script setup>
import * as WjCore from "@mescius/wijmo";
import { WjFlexGrid, WjFlexGridColumn } from '@mescius/wijmo.vue2.grid';
import { WjFlexGridFilter  } from '@mescius/wijmo.vue2.grid.filter';
//日本語化カルチャをインポートします。
import '@mescius/wijmo.cultures/wijmo.culture.ja';

・・・（中略）・・・

<template>
  <div>
    <wj-flex-grid :itemsSource="gridData">
      <wj-flex-grid-filter />
      <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" format="c" :width="100"></wj-flex-grid-column>
    </wj-flex-grid>
  </div>
</template>

・・・（中略）・・・

再度実行すると、Excelライクなソートやフィルタが利用可能になります。

Nuxt.jsのアプリケーションでWijmoのイベントを使う

次にNuxt.jsのアプリケーションでWijmoのイベントを使う方法を試してみたいと思います。「components/FlexGrid.vue」ファイルを以下のように追記し、セルの編集が終了するときに発生する「cellEditEnding」イベントで編集した値をコンソールに出力するように設定してみます。

・・・（中略）・・・
function cellEditEnding(s, e) {
  console.log("変更された値  : " + s.activeEditor.value);
}

</script>

<template>
  <div>
    <wj-flex-grid :itemsSource="gridData" :cellEditEnding="cellEditEnding">
      <wj-flex-grid-filter />
・・・（中略）・・・

処理を追加後、再度アプリケーションを実行します。FlexGrid上でセルを編集すると、以下のように「cellEditEnding」イベントにより編集後の値がコンソールに出力されます。

さいごに

今回はWijmoの代表的なコントロールFlexGridをNuxt.jsのアプリケーション上で使用する方法をご紹介しました。

製品サイトではWijmoを導入したばかりの方や、トライアル期間中の方向けに、Wijmoの概要や導入方法、基本的な使い方を紹介した「Wijmo利用ガイド」を公開しています。こちらも是非ご覧ください。

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

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

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