Google Apps Scriptをローカルで開発するツールclaspとTypeScriptのセットアップ手順

最近個人的にclaspを使ってGASを書くことが多いので、TypeScriptで書く際のセットアップ手順をまとめました。

プロジェクトの作成

$ mkdir clasp-sample
$ cd clasp-sample
$ git init
$ hub create -p
$ npm init -y
$ npm i --save-dev @google/clasp @types/google-apps-script @types/node @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier prettier

$ npx clasp login

Logging in globally...
🔑 Authorize clasp by visiting this url:
https://accounts.google.com/o/oauth2/v2/auth?xxxxxxxx

Authorization successful.
Default credentials saved to: ~/.clasprc.json (/Users/shike/.clasprc.json).

$ npx clasp create --title="clasp sample" --rootDir=src
Clone which script?
❯ standalone
 docs
 sheets
 slides
 forms
 webapp
 api
 
 Created new standalone script: https://script.google.com/d/xxxx/edit
 Cloned 1 file.
 └─ src/appsscript.json

TypeScriptで開発するからには、型定義とリントを使って安全にスムーズに開発したいので、型定義とESLint+Prettierを入れます。

tsconfig.jsonの作成

プロジェクトルートにtsconfig.jsonを以下のように作ります。

tsconfig.json

{
  "compilerOptions": {
    "lib": ["esnext"],
    "types": [
      "@types/node",
      "@types/google-apps-script"
    ]
  }
}

appssscript.jsonの修正

次に、srcディレクトリにあるappsscript.jsonのタイムゾーンの設定を東京に変更しておきます。

src/appsscript.json

{
  "timeZone": "Asia/Tokyo",
  "exceptionLogging": "STACKDRIVER"
}

ESLint / Prettierの設定

最後にESLintとPrettierの設定をします。

プロジェクトルートに.eslintrc.jsと.prettierrc.jsを作成します。

.eslintrc.js

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  plugins: [
    '@typescript-eslint',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    project: './tsconfig.json'
  },
  rules: {
    'prettier/prettier': [
      'error',
    ],
  }
}

.prettierrc.js

module.exports = {
  printWidth: 120,
  semi: false,
  singleQuote: true,
  trailingComma: 'es5'
}

あとはsrc配下に.tsファイルを作り、そこに実際のGASのコードを書いていくだけです。

おわりに

出来上がったGASはclaspのコマンドラインclasp push一つでデプロイでき、同時にトランスパイルも自動でしてくれるので、煩わしいbabelやらwebpackやらの設定がいらないのは、環境構築が簡単で素早く実装に入れるので非常に良いですね。

何と言ってもTypeScriptによる型定義の恩恵がとても大きく、GASのAPIの補完がゴリゴリに効くのでとても快適に開発できます。