JavaScriptスプレッドシート部品「SpreadJS」と入力フォーム部品「InputManJS」をReact環境で活用

　本記事では、グレープシティが提供するJavaScriptスプレッドシート部品「SpreadJS（スプレッドJS）」と、入力フォーム部品「InputManJS（インプットマンJS）」を、JavaScriptライブラリReactと組み合わせて利用する方法を紹介します。SpreadJSやInputManJSを、Reactとシームレスに連携して活用できます。

はじめに

　「SpreadJS（スプレッドJS）」はグレープシティのJavaScriptスプレッドシート部品、「InputManJS（インプットマンJS）」は入力フォーム部品で、いずれも2018年にアップデートされました。各ライブラリの概要やアップデート内容は過去記事（SpreadJS、InputManJS）も参考にしてください。

　これらのライブラリでは、Angular、React、Vue.jsといったJavaScriptフレームワークやライブラリとの組み合わせが想定されています。本記事では、これらのうちReactとの組み合わせについて、実装方法を紹介します。SpreadJSやInputManJSのコントロールをReactのコンポーネントとして利用できます。

対象読者

• React環境で、多機能なUI部品を利用したい方
• SpreadJSやInputManJSを使いつつ、それ以外のJavaScript実装も楽に行いたい方
• 商用JavaScriptライブラリの利用に興味があるReactユーザーの方

必要な環境

　SpreadJSやInputManJSがサポートするブラウザは「Internet Explorer 11、Microsoft Edge、Chrome、Safari 5.1以上、Firefox、iOS（Safari、Chrome）」です。詳細はそれぞれの公式ページ（SpreadJS、InputManJS）を参照してください。

　Reactでは、プロジェクトを生成する「create-react-app」ツールが利用できます。ツールの動作にはNode.jsが必要です。

　以上を踏まえて、今回は以下の環境で動作を確認しています。

• Windows 10 64bit版
  • SpreadJS V11J
  • InputManJS V2J
  • React 16.6.3
  • Node.js v10.14.1 64bit版
  • Microsoft Edge 44.17763.1.0

　サンプルコードを実行するには、プロジェクトのフォルダーで「npm install」コマンドを実行してライブラリをダウンロード後、「npm start」コマンドを実行します。なお、InputManJSを利用するサンプルでは、公式ページからダウンロードできるトライアル版の圧縮ファイルから、React用の追加ファイルをプロジェクトのsrc/inputmanjsフォルダーに配置する必要があります（詳細は後述）。

　サンプルコードはトライアル版として実行されます。正式版ライセンスの設定方法は公式ページを参照してください。

Reactの概要とサンプルプロジェクトの生成

　Reactは、Facebook社とオープンソースコミュニティで開発されているJavaScriptライブラリです。詳細はWijmo＋Reactの解説記事や、CodeZineの連載記事「基礎からはじめるReact入門」を参照してください。

　Reactのプロジェクトを生成して実行するには、リスト1のコマンドを実行します。生成されたプロジェクト（p001-default）をサンプルコードに含めています。

リスト1　Reactのプロジェクトを生成して実行するコマンド

npx create-react-app p001-default # プロジェクト生成 ...（1）
cd p001-default                   # プロジェクトフォルダーに移動 ...（2）
npm start                         # プロジェクト実行 ...（3）

　このプロジェクトをベースに修正して、SpreadJSやInputManJSを組み込んでいきます。