GASをTypeScriptで書いてみた

GAS を書くときに TypeScript を使えるようになったって話は昨年くらいにキャッチアップしていたんだけど、プライベートで GAS をやるまでの気力はなく、仕事でも特に書くことはなかったので完全に放置していた。

最近ようやく仕事で GAS を書く機会に恵まれた（実際は GAS である必要は全くないけど）ので、GAS × TypeScript をお試ししてみた。

参考リンク

以下の記事を参考にさせてもらった。

• Google Apps Scripts で Typescript が超簡単に使えるようになった！ - アクトインディ開発者ブログ

環境整備

上記のリンクを読んだ感じ、 node の環境があれば動きそうなだったので、Dockerfileと、

FROM node

RUN apt-get -y install \
    git \
    curl

WORKDIR /app

docker-compose.yamlを準備した。

version: "3"
services:
  app:
    build: ./docker/node
    image: ts4gas_image
    container_name: ts4gas_container
    tty: true
    volumes:
      - .:/app

プロジェクト初期化

Docker を上げて初期化、必要なものを入れていく。

$ npm init -y
$ npm install @google/clasp tslint -D
$ npm install @types/google-apps-script -S
$ npx tslint --init

.gitignoreはgiboでパッと作る（これはホスト上で）。

$ gibo dump node >> .gitignore

clasp コマンド

clasp とかいうのは今までに使ったことがないので、コマンドを見ておく。

--helpを叩くと、色々とコマンドがある様子。参考リンクだと特にやってなかったけど、多分ログインした方がいい気がするので、ログインからやっていく（後続でエラーで弾かれるので、apis enableも先に叩いておくが吉）。

$ npx clasp --help
Usage: clasp <command> [options]

clasp - The Apps Script CLI

Options:
  -v, --version
  -h, --help                                  output usage information

Commands:
  login [options]                             Log in to script.google.com
  logout                                      Log out
  create [options]                            Create a script
  clone [options] [scriptId] [versionNumber]  Clone a project
  pull [options]                              Fetch a remote project
  push [options]                              Update the remote project
  status [options]                            Lists files that will be pushed by clasp
  open [options] [scriptId]                   Open a script
  deployments                                 List deployment ids of a script
  deploy [options]                            Deploy a project
  undeploy [options] [deploymentId]           Undeploy a deployment of a project
  version [description]                       Creates an immutable version of the script
  versions                                    List versions of a script
  list                                        List App Scripts projects
  logs [options]                              Shows the StackDriver logs
  run [options] [functionName]                Run a function in your Apps Scripts project
  apis [options]                              List, enable, or disable APIs
    list
    enable <api>
    disable <api>
  help                                        Display help
  setting|settings [settingKey] [newValue]    Update <settingKey> in .clasp.json
  *                                           Any other command is not supported

ログイン、プロジェクト作成

Docker 上からのログインなので、--no-localhostを付けてやる。

--no-localhostを付けなかったらログイン後に localhost にリダイレクトされるが、その際のポートがバラバラなようで、EXPOSE で開けれなさそうだった。

--no-localhost付きで実行したら、Auth 後にトークンが発行されるので、それをコピペする。

$ npx clasp login --no-localhost
Enter the code from that page here:
Default credentials saved to: ~/.clasprc.json (/root/.clasprc.json).

成功したら credential ファイルが出来上がる。

ただ、この credential ファイルは HOME ディレクトリ配下に生成されるので、Docker だとちょっと扱いづらい。解決策が思い浮かばないので、放置。

で、ここまで来たら create する。が、ここでいくつか注意点。

$ npx clasp create ts4gas --rootDir ./src
? Clone which script? sheets
Created new Google Sheet:
User has not enabled the Apps Script API. Enable it by visiting https://script.google.com/home/usersettings then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.

まず 1 点目として、--rootDirしても効いてないように見える。なので、リンク先にあるように手動で src ディレクトリを切ってファイルを動かしてやる必要がある。バグなのか、指定方法が悪いのかは不明。

2 点目は、API の有効化を先にしとかないといけない様子。権限は付与してるんだから、CLI で一緒にやってくれればいいのに。

とりあえずリンク先にあるように pull して src ディレクトリに移動させていく。

$ npx clasp pull

あとはサンプルコードを貼り付けて push。試しに linter にかけたらエラーが出たのでとりあえず見なかったことにする。

$ npx clasp push
# -wオプションで、変更時に自動でpushすることも可能
$ npx clasp push -w

なお、対象のディレクトリは open で開くことができる。

$ npx clasp open

おわりに

ここまで出来れば、TypeScript のお作法はあるだろうけど、そんなにコストかけずに実装できそうな感覚はある。

ただ TypeScript は型がいいって話と型定義ファイルが面倒って話を両方聞くので、実際問題、使い勝手としてはどうなんだろうね。

なにはともあれ、こんにちは TypeScript！