JavaScriptフレームワーク「React」でWijmoを使う【2025年版】

「React（リアクト）」はMeta（旧Facebook）が開発したJavaScriptフレームワークです。世界中のIT技術者1万人以上から取ったアンケートの結果をまとめた「State of JavaScript」において、2016年から2024年まで常にトップの利用率を維持しているフロントエンドフレームワークです。

JavaScript開発ライブラリ「Wijmo（ウィジモ）」はReactをサポートしており、Reactの標準的な方法でグリッド／入力／チャートなどのエンタープライズ開発で必要とされるWijmoのコンポーネントを利用することができます。

本記事では、このReactとWijmoを使用してグリッドでデータ表示を行うReactアプリケーションを作成する方法を紹介します。

開発環境

• Node.js（Version 22.16.0）
• Vite（Version 6.3.5）
• React（Version 19.1.0）
• Wijmo（Version 5.20251.34）

Wijmoを使用したReactアプリケーションの作成

ViteでReactアプリケーションの作成

Reactのアプリケーションはビルドツール「Vite」を使用することで非常に簡単に作成することが可能です。
※ ReactではこれまでReactアプリケーションの作成に使えるコマンドラインツール「Create React App」を提供していましたが、現在は非推奨になっています。

以下のコマンドを実行して、ベースとなるReactアプリケーションを作成します。今回は「react-swc」のオプションを指定し、Next.jsのデフォルトのトランスパイラとしても使用されている「SWC（Speedy Web Compiler）」を使用したReactのアプリケーションをスキャフォールドします。
※ 使用可能なテンプレートはこちらをご覧ください。
※ Windows環境でPowerShellを使用する場合、--は演算子として使用されているので、コマンドプロンプトを使用するか、npm create vite@latest wijmo-react-quickstart --- --template react-swcとして実行してください。

npm create vite@latest wijmo-react-quickstart -- --template react-swc

templateオプションを指定せずに実行した場合は、以下のようにコマンドライン上で使用するフレームワーク等を指定します。

次に以下のコマンドを実行してアプリケーションプロジェクトのフォルダに移動し、必要なパッケージのインストールを行います。

cd wijmo-react-quickstart
npm install

パッケージがインストールされたら、以下のコマンドを実行してReactアプリケーションを起動します。

npm run dev

ブラウザで「http://localhost:5173/」を参照すると以下のように開発サーバーでReactアプリケーションの実行を確認できます。

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

Wijmoのインストールと組み込み

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

npm install @mescius/wijmo.react.all

「src/App.js」を以下のように修正してWijmoのReactモジュールやCSS、日本語カルチャファイルをインポートし、FlexGridをReactの関数コンポーネントとして組み込みます。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。

import './App.css';
import * as React from 'react';
import '@mescius/wijmo.styles/wijmo.css';
import * as wjcCore from '@mescius/wijmo';
import * as wjGrid from '@mescius/wijmo.react.grid';
import '@mescius/wijmo.cultures/wijmo.culture.ja';

//wjcCore.setLicenseKey('ここにライセンスキーの文字列を設定します');

const App = () => {
  const [data] = React.useState(getData());
  return (
    <div className="grid">
      <wjGrid.FlexGrid itemsSource={data}  >
        <wjGrid.FlexGridColumn header="商品名" binding="product" width={200} />
        <wjGrid.FlexGridColumn header="受注日" binding="date" width={120} />
        <wjGrid.FlexGridColumn header="金額" binding="amount" width={100} format='c' />
      </wjGrid.FlexGrid>
    </div>
  );
};

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

export default App;

WijmoのコントロールをReactに組み込む場合、クラスコンポーネントとして組み込む方法もあります。詳しくは製品ヘルプをご覧ください。

次にスタイルの調整を行います。スキャフォールドされたプロジェクトでは「src/App.css」と「src/index.css」にそれぞれスタイルが定義されているので、「src/App.css」を以下のように書き換えてFlexGridのスタイル用のクラスを設定し、「src/index.css」の中身は全て削除します。

.grid {
  width: 470px;
  height: 200px;
}

（すべて削除する）

以上の手順で、Wijmoの組み込みは完了です。再びnpm run devコマンドを実行して「http://localhost:5173/」に接続すると、ReactアプリケーションでFlexGridが表示されていることを確認できます。

さいごに

以上がReactを使用してWijmoのデータグリッド「FlexGrid」でデータ表示を行うWebアプリケーションを作成する方法でした。

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

• デモアプリケーションを試す
• トライアル版をダウンロードして試す

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

• 問合せ先を確認する
• 個別相談会（Web会議）について確認する