【始め方】GASプロジェクト開発時にやること(GAS + TypeScript + clasp + Prettier + ESLint)

はじめに

GAS, clasp, TypeScript, Prettier, ESLint を使用したプロジェクト開始時に行うことについて書いていきます。

TypeScript のプロジェクト開始方法についても記事を書いているので、こちらもご参照ください。

開発環境の構築

claspのダウンロード

GASをローカルで開発しやすくするためのツールです。

Then enable the Google Apps Script API: https://script.google.com/home/usersettings

と書いているので、オンにします。

プロジェクトの作成

clasp login #　初めて使用する場合は login します。
clasp create

typescript 導入

typescript のインストール

# typescript のインストール
yarn add -D typescript @types/node@"^16.7.0"

# tsconfig の作成
yarn run tsc --init

target は ES2019 にしておきます

tsconfig.json

"target": "ES2019"

ESLint, prettier の導入

# インストール
yarn add -D prettier eslint eslint-config-prettier

# eslint の初期設定
# 対話式で入力していく
# Would you like to install them now with npm? は　Yes を選択
yarn run eslint --init

# npmではなくyarnを使ってるので、やり直し
rm -rf package-lock.json
yarn install

@typescript-eslint/explicit-function-return-type の rule を有効化する

.eslintrc.js

rules: {
  "@typescript-eslint/explicit-function-return-type": "warn",
  ...
}

prettier に対応させるために、.eslintrc.js を修正して extends の最後に "prettier"を入れる

extends: [... "prettier"],

prettier の設定ファイルの作成

echo "module.exports = {\n\tprintWidth: 120\n}" > .prettierrc.js
echo "tsconfig.json" > .prettierignore

import 周りをいい感じにする

こちらをご参照ください。

@types/google-apps-script をインストール

yarn add -D @types/google-apps-script

eslint の no-undef に対応する

を使えばいい

設定ファイルの変更

jq '.rootDir = "./src" | .filePushOrder = ["src/main.ts"]' .clasp.json > tmp.json && mv -f tmp.json .clasp.json
yarn prettier .clasp.json --write

jq '.timeZone = "Asia/Tokyo"' appsscript.json > tmp.json && mv -f tmp.json appsscript.json
yarn prettier appsscript.json --write

ファイルの作成

mkdir src
touch src/main.ts

# appscript.json を移動
mv appsscript.json src

src/main.ts

// eslint-disable-next-line no-unused-vars
const main = (): void => {
  console.log("hello");
};

コードをプッシュし確認します

clasp push
clasp open

スクリプトエディタが開くので、実行する。

おわりに

これにて、ローカルで GAS を TypeScript でいい感じに開発することが出来るようなりました！