GASでTypeScriptを使うときの注意点（実践編）

こんばんは！株式会社スマレジ、開発部のmasaです。

また、日が少し空いてしまい申し訳ないです。。。

今回は、前回予告した通り、実際のツールを元にGAS + TypeScriptのプラクティスを紹介します。

サンプルプログラム

今回は、スマレジの外部会員連携とPFAPI、それにSquareレジのAPIを利用して、取引や会員販売の情報をシートに取り込んで、簡単な集計を出すアプリを作成しています。

github.com

masa's blogではgithub初利用かもです笑

構成

ルートにwebpack.config.jsがあるので分かる通り、webpackを使用しています。

また、src/FrontController.tsにGASのdoGetを記載しており、doGet内では外部からのHTTPリクエストや、処理の振り分けに利用するactionIdなどの値を元に、適切なアクションクラスを呼び出すような作りになっています。

このdoGetの定義が重要で、下記のようにglobalのメンバとして定義してあげることで、webpackでビルドした後も、doGetメソッドをGAS上で認識することができます。

global.doGet = (e: any) => {
...

シートから処理を呼び出したいとき

シートから処理を呼び出したいときは、onopen.jsでactionIdを指定して、doGetを呼び出すことで実現します。

/**
 * ファイルを開いたときのイベントハンドラ
 */
function onOpen() {
    let ui = SpreadsheetApp.getUi();         
    let menu = ui.createMenu('アプリ');
    menu.addItem('会員売上比率', 'displaySearchFormForCustomerSalesPiChart');   
    menu.addToUi(); 
}

function displaySearchFormForCustomerSalesPiChart() {
    callService("displaySearchFormForCustomerSalesPiChart");
}

...(中略)

function callService(actionId, request) {
    let e = {};
    e.parameter = {};
    e.parameter.actionId = actionId;
    if (typeof request !== "undefined") {
        e.parameter.req = request;
    }
    return doGet(e);
}

callService内部でdoGetを呼ぶことができるのは、先述のglobalのメンバとしてdoGetを定義しているからです。また、このonopen.jsはwebpackの対象ではないので、そのままデプロイされます。

GETリクエストを処理したいとき

doGetがそのままGAS上で認識されるので、FrontController.tsに送られてくるリクエストを元にactionを呼び出してあげればOKです。 FrontController.tsの61行目以降が当該処理になります。

このツールは社内で検証用として利用するツールがベースになっているので、FrontControllerの書き方などは正直ぐちゃっとしているのですが、まあ、GAS自体ツール作成に用いられることが主なので、読みにくくなければ気楽に書いて使っていいんじゃないかなと思っています。（でもMVCはふんわり意識した方が実装が楽なのでTSは使いたい。何よりこの手のツールは後で手を加えることが多いので、若干の追加改修に耐えうる程度には整理して作成しておいた方が無難なイメージがあります。）