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

Spread.SheetsとInputManJSをReact上で連携させる

　応用例として、Reactに組み込んだSpread.SheetsとInputManJSを、React上で連携させるサンプル（図4）を説明します。フォームに代表者名と人数を入力して反映ボタンをクリックすると、入力内容がスプレッドシートに追記されます。なお、人数欄の数値コントロールには、「人」の接尾辞や数値の範囲（1～10）を設定しています。詳細はサンプルコードを参照してください。

図4　Spread.SheetsとInputManJSを連携させるサンプル（p004-combination）

　サンプルの要点を以下で説明します。まず、Appクラスのコンストラクターでは、リスト11の通りstateを初期設定します。（1）と（2）がInputManJSのコントロール、（3）がSpread.Sheetsのスプレッドシートに表示されます。なお、（3）には1件分のデータを初期設定しています。

リスト11　stateの初期設定（p004-combination/src/App.js）

this.state = {
  personName: '',  // テキストコントロール（代表者）の値 ...（1）
  personCount: 1,  // 数値コントロール（人数）の値 ...（2）
  data: [          // Spread.Sheetsに表示する値 ...（3）
    {
      personName: '山田太郎',
      personCount: 2,
      logTime: new Date()
    }
  ]
};

　入力フォームの反映ボタン押下時に実行する処理は、リスト12の通りです。

リスト12　反映ボタン押下時の処理（p004-combination/src/App.js）

applyValueToSpreadSheets() {
  // 検証コントロール ...（1）
  if (!this.validator.validate()) {
    return;
  }
  // 既存データに行を追加 ...（2）
  var newData = [].concat(this.state.data, [
    {
      personName: this.state.personName,
      personCount: this.state.personCount,
      logTime: new Date()
    }
  ]);
  // state更新 ...（3）
  this.setState({
    data: newData,  // データを更新 ...（4）
    personName: '', // InputManJSコントロールを初期値に戻す ...（5）
    personCount: 1,
  });
}

　（1）で入力内容を検証後（詳細は後述）、（2）で、InputManJSコントロールの入力値と現在時刻をデータ配列（this.state.data）の末尾に追加した新しいデータ配列newDataを作成します。（3）はstate更新処理で、（4）でnewDataを設定してSpread.Sheetsを更新する一方、（5）でInputManJSコントロールを初期値に戻してフォームを初期化します。

　図4のサンプルで利用されているSpread.SheetsやInputManJSの機能について、以下の補足も参考にしてください。

［補足］Spread.Sheetsに数式を設定

　図4のサンプルでは、スプレッドシートの1行目右端に「累積人数」が表示されます。この処理は、リスト13の処理でセルに数式を設定して実現しています。

リスト13　Spread.Sheetsセルへの数式設定（p004-combination/src/App.js）

<SpreadSheets workbookInitialized={this.spreadSheetsWorkbookInitialized}>
（略）
spreadSheetsWorkbookInitialized(spread) {
  if (spread) {
    var sheet = spread.getActiveSheet(); // ワークシートを取得 ...（1）
    sheet.setFormula(0, 3, '=sum(C:C)'); // C列の合計を表す数式を設定 ...（2）
  }
}

　ワークシート初期化後に実行されるSpreadSheetsタグのworkbookInitializedイベントに設定したthis.spreadSheetsWorkbookInitializedメソッド内で、スプレッドシートに対応するspread変数から、（1）でワークシートを取得して、（2）のsetFormulaメソッドで（0, 3）＝1行4列目のセルに、C列（人数）の合計値に対応する数式を設定します。

［補足］Spread.SheetsのautoGenerateColumns設定

　図4のサンプルでは、Spread.Sheetsの<WorkSheets>タグで、autoGenerateColumnsをfalseに設定しています。

リスト14　図4のサンプルの<WorkSheet>タグ（p004-combination/src/App.js）

<Worksheet name="来訪者"
  dataSource={this.state.data} autoGenerateColumns={false}>
  <Column （略）/>
（略）
</Worksheet>

　autoGenerateColumnsは、データ設定時に列を自動的に生成する設定です。デフォルトのtrueでは、setStateメソッドでデータが更新されてSpread.Sheetsに設定されるたび、<Column>タグで記述した列が消えて列が再生成されるため、最初に指定した列幅の設定が消えてしまいます。このサンプルではデータ更新時に列幅を維持するため、autoGenerateColumnsをfalseに設定しています。

［補足］InputManJSの検証コントロール

　図4のサンプルでは、代表者のテキストコントロールに、入力必須の検証コントロールを設定しています。検証コントロールは2018年10月のアップデートで追加されたInputManJSの新機能です。詳細は過去記事を参照してください。

図5　入力必須の検証コントロール（p004-combination）

　React環境でInputManJSの検証コントロールを利用するには、まず、検証するコントロールを参照する変数（ref）を作成します。Reactが提供するcreateRefメソッドで作成した変数を、コントロールに対応するタグのref属性に設定します（リスト15）。この場合、テキストコントロール（GcTextBox）を参照するthis.gcTextBox変数が作成されます。

リスト15　createRefによるコントロールの参照（p004-combination/src/App.js）

this.gcTextBox = React.createRef();
（略）
<GcTextBox ref={this.gcTextBox}（略）/>

　次に、AppコンポーネントがDOMツリーに追加されたときに実行されるcomponentDidMountメソッドで、リスト16の通り検証コントロールを作成します。リスト15で作成したthis.gcTextBox変数の「current.imControl」プロパティを、検証対象としてcontrolに指定します（1）。「current」はcreateRefメソッドで作成した変数から参照先を取得するReactのプロパティ、「imControl」はコントロールを取得するInputManJSのプロパティです。

リスト16　検証コントロールの作成（p004-combination/src/App.js）

componentDidMount() {
  this.validator = new InputMan.GcValidator({
    items: [
      {
        control: this.gcTextBox.current.imControl, // ...（1）
（略）
}

　ここで作成したthis.validatorを利用して、リスト12（1）で検証を行います。

まとめ

　本記事では、グレープシティのJavaScriptライブラリSpreadJSとInputManJSを、Reactと組み合わせて利用する方法を説明しました。Reactと組み合わせることで、各ライブラリのコントロールをReactのコンポーネントとして活用できます。応用として、Reactを仲立ちとして、SpreadJSとInputManJSを連携して動作させるサンプルを紹介しました。

参考資料

• SpreadJS
• InputManJS
• グレープシティ
• React