「React（リアクト）」はMeta（旧Facebook）が開発したJavaScriptフレームワークで、世界のIT技術者1万人以上を対象としたアンケート「State of JavaScript」において、2016年から2025年まで常にトップの利用率を維持しているフロントエンドフレームワークです。
ExcelライクなスプレッドシートをWeb上で実現するJavaScriptライブラリ「SpreadJS（スプレッドJS）」は、このReactをはじめとする主要なJavaScriptフレームワークに対応しています。
本記事では、ReactとViteを使ってSpreadJSを組み込んだアプリケーションを構築する方法についてご紹介します。
開発環境
- Node.js（Version 24.13.1）
- Vite（Version 7.3.1）
- React（Version 19.2.0）
- SpreadJS（Version 18.2.4）
SpreadJSを組み込んだReactアプリケーションの構築
Viteを使ったReactアプリケーションの作成
Reactのアプリケーションはビルドツール「Vite」を使用することで非常に簡単に作成することが可能です。
※ ReactではこれまでReactアプリケーションの作成に使えるコマンドラインツール「Create React App」を提供していましたが、現在は非推奨になっています。
最初に、ターミナル等で以下のコマンドを実行して、ベースとなるReactアプリケーションを作成します。
npm create vite@latest spreadjs-vite-app実行後するといくつかの選択肢が提示されるので、フレームワークとバリアントに「React」と「TypeScript」を選択し、その他の項目は既定値のままにします。
アプリケーションが作成されたら、cdコマンドを実行してアプリケーションのフォルダに移動します。
cd spreadjs-vite-app移動後に以下のコマンドを実行してアプリケーションを起動します。
npm run devブラウザで「http://localhost:5173/」を参照するとReactアプリケーションが表示されます。
動作を確認したらターミナルウィンドウに戻り、Ctrl+Cキーを押下することで実行を中断できます。
SpreadJSのインストールと組み込み
先ほど作成したReactアプリケーションにSpreadJSを組み込んでいきます。最初に行うのはSpreadJS関連モジュールのインストールです。
npmパッケージのインストール
npm installコマンドを実行してSpreadJSのReactモジュールをインストールします。先ほど作成したプロジェクトのルートフォルダで次のコマンドを実行します。
npm install @mescius/spread-sheets
npm install @mescius/spread-sheets-react
npm install @mescius/spread-sheets-resources-ja上記コマンドでは最新バージョンがインストールされますが、「@18.2.4」のようにバージョンを指定してインストールすることもできます。
npm install @mescius/spread-sheets@18.2.4
npm install @mescius/spread-sheets-react@18.2.4
npm install @mescius/spread-sheets-resources-ja@18.2.4続いて「src/App.tsx」ファイルを次のように変更します。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。
import { useState } from 'react';
import { SpreadSheets, Worksheet, Column } from '@mescius/spread-sheets-react';
import * as GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-resources-ja';
import './App.css'
import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
// ライセンスキーとカルチャの設定
GC.Spread.Sheets.LicenseKey = 'ここにSpreadJSのライセンスキーを設定します';
GC.Spread.Common.CultureManager.culture('ja-jp');
const App = () => {
let spread: GC.Spread.Sheets.Workbook;
const [hostStyle] = useState({
width: '865px',
height: '250px',
border: '1px solid silver'
});
const [data] = useState([
{ 商品名: 'デスクトップPC', カテゴリ: 'PC本体', 単価: 128000, '購入店': 'PCショップA' },
{ 商品名: 'ラップトップPC', カテゴリ: 'PC本体', 単価: 249000, '購入店': 'PCショップA' },
{ 商品名: 'マウス', カテゴリ: '周辺機器', 単価: 1980, '購入店': 'PCショップA' },
{ 商品名: 'キーボード', カテゴリ: '周辺機器', 単価: 5680, '購入店': '家電量販店B' },
{ 商品名: 'プリンタ', カテゴリ: '周辺機器', 単価: 14480, '購入店': '家電量販店B' },
{ 商品名: 'SSD', カテゴリ: 'PCパーツ', 単価: 7980, '購入店': 'ネットショップC' },
{ 商品名: 'デスクトップPC', カテゴリ: 'PC本体', 単価: 168000, '購入店': 'PCショップA' },
{ 商品名: 'ラップトップPC', カテゴリ: 'PC本体', 単価: 249000, '購入店': 'PCショップA' },
{ 商品名: 'マウス', カテゴリ: '周辺機器', 単価: 4980, '購入店': 'PCショップA' },
{ 商品名: 'キーボード', カテゴリ: '周辺機器', 単価: 4680, '購入店': '家電量販店B' },
]);
const [columnWidth] = useState(184);
const initSpread = (spreadObj: GC.Spread.Sheets.Workbook) => {
spread = spreadObj;
//// 実行時にコードでデータソースと列幅を設定する場合
// const sheet = spread.getActiveSheet();
// sheet.setDataSource(data);
// sheet.defaults.colWidth = 184;
}
return (
<div className="sample-spreadsheets">
<SpreadSheets hostStyle={hostStyle} workbookInitialized={spread => initSpread(spread)}>
<Worksheet dataSource={data}>
<Column dataField='商品名' width={columnWidth}></Column>
<Column dataField='カテゴリ' width={columnWidth}></Column>
<Column dataField='購入店' width={columnWidth}></Column>
<Column dataField='単価' width={columnWidth} formatter="¥ #,###"></Column>
</Worksheet>
{/* 実行時にコードでデータソースと列幅を設定する場合 */}
{/* <Worksheet>
<Column dataField='商品名'></Column>
<Column dataField='カテゴリ'></Column>
<Column dataField='購入店'></Column>
<Column dataField='単価' formatter="¥ #,###"></Column>
</Worksheet> */}
</SpreadSheets>
</div>
)
}
export default AppコントロールをReactに組み込む場合、クラスコンポーネントとして組み込む方法もありますが、新規開発での使用は非推奨となっているので、ここでは関数コンポーネントを使用しています。
また、上記ではReact用に用意されたSpreadJSのタグを使ってデータソースの設定と列幅の指定を行っていますが、関数式のinitSpread内で実行時にコード（コメントアウト箇所）で設定することも可能です。
※ React用のSpreadJSのタグについてはヘルプをご参照ください。
以上で、SpreadJSの組み込みが完了しました。
再度アプリケーションを実行して「http://localhost:5173/」に接続すると、データ連結したSpreadJSが表示されます。
さいごに
今回の記事では、ReactとViteを使ってSpreadJSを組み込んだアプリケーションを構築する方法についてご紹介しました。
製品サイトでは、SpreadJSの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。