はじめに
「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）をサンプルコードに含めています。
npx create-react-app p001-default # プロジェクト生成 ...（1） cd p001-default # プロジェクトフォルダーに移動 ...（2） npm start # プロジェクト実行 ...（3）
このプロジェクトをベースに修正して、SpreadJSやInputManJSを組み込んでいきます。
