JavaScript/Next.js/React/TypeScript/Wijmo/Wijmoクイックスタート

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

by MESCIUS-dev

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

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

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

準備

Node.jsとnpm

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

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

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

npm -v

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

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

Next.jsのアプリケーションのプロジェクトを作成するにはコマンドラインツールの「Create Next App」を使います。

プロジェクトの作成

最初に行うのはプロジェクトの作成です。ターミナルウィンドウで任意のフォルダに移動の上、以下のコマンドを実行します。なお、コマンドの後ろにある「wijmo-nextjs-app」はプロジェクト名ですので、任意の名前を設定してください。また「–use-npm」オプションを設定し、明示的にnpmをパッケージ管理に使用するようにします。
※ 本記事の手順ではNext.js 14.2.5を使用しています。

npx create-next-app@latest wijmo-nextjs-app --use-npm

上記のコマンド実行後、いくつかの項目でYesかNoを選ぶ必要がありますが、全てEnterキーを押下しデフォルトの設定で進めます。プロジェクト名のついたフォルダ「wijmo-nextjs-app」が作成されれば、このステップは完了です。

アプリケーションの実行

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

npm run dev

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

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

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

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

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

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

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

npm install @mescius/wijmo.react.all

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

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

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

実装

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

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

componentsフォルダ

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

'use client'

import { useState } from "react";
import "@mescius/wijmo.styles/wijmo.css";
import * as WjCore from "@mescius/wijmo";
import * as WjGrid from "@mescius/wijmo.react.grid";
import { FlexGridFilter } from "@mescius/wijmo.react.grid.filter";
import "@mescius/wijmo.cultures/wijmo.culture.ja";

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

const FlexGrid = () => {
  const [data, setData] = useState(gridData);
  
  return (
    <div>
      <WjGrid.FlexGrid itemsSource={data}>
        <FlexGridFilter />
        <WjGrid.FlexGridColumn header="受注番号" binding="id" width={110} />
        <WjGrid.FlexGridColumn header="商品名" binding="product" width={250} />
        <WjGrid.FlexGridColumn header="受注日" binding="date" width={120} />
        <WjGrid.FlexGridColumn header="金額" binding="amount" width={120} format='c' />
      </WjGrid.FlexGrid>
    </div>
  );
}

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

export default FlexGrid;

次に「app/page.tsx」ファイルの内容を以下のように書き換えます。「components/FlexGrid.tsx」ファイルを動的インポートし、その際{ ssr: false }オプションを指定することで対象ファイルをSSR（サーバーサイドレンダリング）しないように設定します。

import dynamic from 'next/dynamic'

const FlexGrid = dynamic(
    () => {
        return import("../components/FlexGrid");
    },
    { ssr: false }
);

export default function Home() {
    return (
        <>
            <h1 className="m-2.5 text-sky-500 text-4xl font-bold">
                Wijmo×Next.jsサンプル
            </h1>
            <FlexGrid></FlexGrid>
        </>
    )
}

加えて「app/globals.css」を以下のように書き換え、FlexGridのスタイルを設定します。

@tailwind base;
@tailwind components;
@tailwind utilities;

.wj-flexgrid {
  width: 642px!important;
  margin: 10px;
}

実行

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

npm run dev

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

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

今回のサンプルでは、FlexGridFilterコンポーネントも組み込んでいるため（FlexGrid.tsxファイル18行目）、ソートやExcelライクなフィルタも利用可能です。

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

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

'use client'

import { useState } from "react";
import "@mescius/wijmo.styles/wijmo.css";
import * as WjCore from "@mescius/wijmo";
import * as WjGrid from "@mescius/wijmo.react.grid";
import { FlexGridFilter } from "@mescius/wijmo.react.grid.filter";
import "@mescius/wijmo.cultures/wijmo.culture.ja";

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

const FlexGrid = () => {
  const [data, setData] = useState(gridData);
  
  const cellEditEnding = (s: any, e: any) => {
    console.log("変更された値  : " + s.activeEditor.value);
  }

  return (
    <div>
      <WjGrid.FlexGrid itemsSource={data} cellEditEnding={cellEditEnding}>
        <FlexGridFilter />
        <WjGrid.FlexGridColumn header="受注番号" binding="id" width={110} />
        <WjGrid.FlexGridColumn header="商品名" binding="product" width={250} />
        <WjGrid.FlexGridColumn header="受注日" binding="date" width={120} />
        <WjGrid.FlexGridColumn header="金額" binding="amount" width={120} format='c' />
      </WjGrid.FlexGrid>
    </div>
  );
}

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

export default FlexGrid;

処理を追加後、再度アプリケーションを実行します。

npm run dev

FlexGrid上でセルを編集すると、以下のように「cellEditEnding」イベントにより編集後の値がコンソールに出力されます。

さいごに

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

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

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

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

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