Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

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

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

図4 Spread.SheetsとInputManJSを連携させるサンプル(p004-combination)
図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)
図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を連携して動作させるサンプルを紹介しました。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:ComponentZine(InputMan)

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5