Posted at

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の補完がゴリゴリに効くのでとても快適に開発できます。