😽

GAS & TypeScript のローカル開発環境を準備する

2021/01/23に公開

はじめに

今回の記事で作成した内容はこちらからクローンできます。
適宜設定変更して利用してください。
https://github.com/iwatos/gas-template

また、GASデプロイ/公開の詳しい内容は本記事では説明はしてません。

GASプロジェクトの準備

プロジェクト用ディレクトリ名: gas-project-directory
プロジェクト名: gas-project
として説明を進めます。適宜自分のプロジェクトに合わせて変更してください。

まずGASプロジェクト用のディレクトリを作成します

mkdir gas-project-directory
cd gas-project-directory

以下のpackage.jsonをフォルダ直下に作成後、yarnかnpmでinstallを実行します
GASのローカル開発で用いるclaspのほか、typescript eslint prettierを導入してます。

gas-project-directory/package.json
{
  "name": "<プロジェクト名>",
  "version": "1.0.0",
  "description": "Template of Google App Script ",
  "author": "<>",
  "license": "MIT",
  "scripts": {
    "lint": "prettier './src/**/*.{js,ts}' && eslint './src/**/*.{js,ts}'",
    "lintfix": "prettier --write './src/**/*.{js,ts}' && eslint --fix './src/**/*.{js,ts}'"
  },
  "dependencies": {
    "@google/clasp": "^2.3.0",
    "@types/google-apps-script": "^1.0.21"
  },
  "devDependencies": {
    "eslint": "^7.18.0",
    "prettier": "^2.2.1",
    "@typescript-eslint/eslint-plugin": "^4.14.0",
    "@typescript-eslint/parser": "^4.14.0",
    "eslint-config-prettier": "^7.2.0",
    "typescript": "^4.1.3"
  }
}
yarn install # または `npm install`

GASをローカルで開発するためのツールclaspがインストールされます。
claspを利用してプロジェクトを新規作成します

まずは下記コマンドGoogleアカウント連携をおこないます。ブラウザ認証画面が表示されます。

clasp login 

次にプロジェクト作成をおこないます。

clasp create gas-project
# standalone, api, sheet, doc など初期設定を聞かれるので選ぶ
# どれを選んでも以降の作業に問題はないはず 

実行後にディレクトリ直下に .clasp.json appscript.json が作成されます。

以降はTypeScriptの準備になります。
JSでも構わない方は、このまま下記のclaspコマンドを使用してローカルでGAS開発が行えます。

clasp コマンド紹介

よく使うもの

  • clasp open ブラウザでGASエディタを開く
  • clasp pullクラウドで保存されている内容を取得する
  • clasp push ローカルの内容をクラウドに反映させる
  • clasp deploy GASを公開する
  • clasp login Googleアカウントログイン
  • clasp logout Googleアカウントログアウト

その他のコマンドが気になる方はこちらをご参照ください・
https://github.com/google/clasp/blob/a556599e78bdc3f168e3bb5cdc2ff0a55909f6f5/README.md

TypeScript導入

まずソースコードはディレクトリ直下にsrcディレクトリを作成してその配下に移動してください。
その後.eslintrc.json .prettierrc.json tsconfig.json をディレクトリ直下に作成します。

.eslintrc.json
{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/@typescript-eslint"
  ]
}
.prettierrc.json
{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}
tsconfig.json
{
    "inlude": [
        "src/**/*"
    ],
    "compilerOptions": {
        "target": "ES2015",
        "module": "commonjs",
        "allowJs": false,
        "outDir": "./dist",
        "strict": true,   /* Enable all strict type-checking options. */
        "skipLibCheck": true
    }
}

設定ファイルを作成し、以下コマンドが動作することを確認します。

yarn run prettier './src/**/*.{js,ts}'
yarn run eslint './src/**/*.{js,ts}'

以上でTS導入もこれで完了です。
clasp pushはクラウドへのプッシュと同時に TS ⇨ JS 変換も行いますので、TSコンパイルはローカルで行う必要はありません。

Discussion