概要

GASでWebAPIを公開して、Reactで取得します。

参考

Web API作成(Get)

Googleアカウントにログインして、スプレッドシートを作成する。https://docs.google.com/spreadsheets/
スプレッドシートにデータを入力する
ツール-スクリプトエディタを起動する
doGet(e)関数を実装する
ウェブアプリケーションとして導入する
ブラウザからURLにアクセスして動作確認
Reactで取得

https://qiita.com/y_ohr/items/09e8b3983fbca7c02a23 にて、クラスのプロパティで保持していたデータを、Web APIからの取得に置き換え。
Web APIのURLはぼかしています。

App.tsx抜粋

private expressions: Expression[] = [
    /*
    new Expression(0, 0, Operator.plus, 1),
    new Expression(1, 2, Operator.minus, 3),
    new Expression(2, 4, Operator.times, 5),
    new Expression(3, 6, Operator.divide, 7),
    */
];

public constructor(props: any) {
    super(props);
    this.state = {
        list: this.expressions
    };

    this.handleXChange = this.handleXChange.bind(this);
    this.handleOChange = this.handleOChange.bind(this);
    this.handleYChange = this.handleYChange.bind(this);

    fetch('https://script.google.com/macros/s/***/exec')
        .then(response => response.json())
        .then(data => data.map((d: Expression) => new Expression(d.n, d.x, d.o, d.y)))
        .then(e => this.expressions = e)
        .then(() => { this.setState({ list: this.expressions }); });
}

感想

Reactでサーバと通信できた
更新(doPost())もやってみたい
fetch()とpromise()は、もう少しこなれた書き方はできないか？
TypeScriptの: typeとas typeが混同する
TypeScriptのnumber + numberがstringのコンカチになった

以上

GASのWebAPIをReactで取得

概要

Web API作成(Get)

感想