Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

ken0909
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away