TypeScript経験者のためのGASの開発環境構築

先日Google Apps Script (GAS)を初めて触ったのですが 、開発環境はかなり不便な部分がったのでTypeScriptで書くためにやった過程のメモ

GASの不便さ

GASは拡張機能 => App Scriptから標準のオンラインエディタで直接コードを書くことができますが、エンジニア視点だと大分不便です

1. Git管理ができない

Git扱えないので毎回デプロイして確認みたいな手間が発生します

2. VSCodeが使えない

VSCodeじゃないので全置換すらだいぶめんどくさい。シンタックスもない、、

3. 型がない

補完は一応出ますが、やっぱり型が保証されてないので書きにくいです

必要なツールのインストール

まず、GASをTypeScriptで書くために必要なツールをインストールしましょう。以下の2つのパッケージが必要です。

1. google/clasp

   claspを使うとローカルでVSCodeで開発したコードをそのまま連携できるので非常に便利です

   npm install -g @google/clasp
   

2. @types/google-apps-script

   これを使うとGASの関数やライブラリを補完してくれます

   npm install @types/google-apps-script
   

TypeScriptとGASの互換性問題を解決

clasp/typescriptを単純に使うと、ES6モジュール（importやexport）に対応していないので、TypeScriptのコードそのまま使うことができません。
ですが、それさえ解決してしまえばTypeScriptと全く同じように書けます

exportとimportの行をbuildしたjsからsedで消してしまえばいいのです

sed -i '' 's/export //g' 
sed -i '' '/import/d'

実際に書いてみる

ディレクトリ構成は以下のとおりです

├─ src
|   ┗ index.ts
├─ .clasp.json.template
├─ .gitignore
├─ package-lock.json
├─ package.json
└─ tsconfig.json

package.json

{
  "name": "gas-ts-clasp-esbuild-template",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "type-check": "tsc --noEmit",
    "build": "rm -rf dist && tsc -p tsconfig.json && cp src/appsscript.json dist/appsscript.json && sed -i '' 's/export //g' dist/**/*.js dist/**/**/*.js && sed -i '' '/import/d' dist/**/*.js dist/**/**/*.js",
    "push": "clasp push",
    "open": "clasp open",
    "deploy": "npm run build && npm run push"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "volta": {
    "node": "20.10.0"
  },
  "devDependencies": {
    "@google/clasp": "^2.4.2",
    "@types/google-apps-script": "^1.0.82",
    "clasp": "^1.0.0",
    "esbuild": "^0.20.1",
    "esbuild-gas-plugin": "^0.8.0",
    "typescript": "^5.3.3"
  }
}

tsconfig.ts

{
  "compilerOptions": {
    "target": "es2016",
    "experimentalDecorators": true,
    "module": "ES2022",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["./src/**/*.ts"]
}

この状態でindex.tsにTypeScriptのコードを書いてbuild & deployすることでGASに反映できます
package.jsonのscriptを見てもらえればわかりますが、distを作成してそのまま上げてます

npm run deploy

さいごに

勘違いして欲しくないのがGAS自体はめちゃくちゃ便利でマジでなんでもできます。
自分も「エクセルのマクロみたいなもんやろｗｗｗｗ」程度に思って舐めてましたが、スプシの管理はもちろんのこと、使い方によっては「インフラ代のかからないバックエンド/DB」にもすることができます。

また、クリーンアーキテクチャで書くことも可能です
これはまた次の記事で紹介します！

追記：書きました
https://qiita.com/p3033119/items/b0d384472b73fd18266d