はじめに
弊社ではclaspを使用してTypeScriptでGoogle Apps Script(以降GAS)の開発を行ってきました。
しかし、clasp2系から3系へのバージョンアップの際、claspのTypeScriptサポートが廃止となったため、既存プロジェクトの移行方法を検討・整理したのでその内容を紹介いたします。
前提
開発環境はMacを想定しています。
弊社では原則以下のフォルダー構成でGAS開発を実施しています。本記事はその前提のもと書いておりますので、実際にこの記事の内容で対応する場合は適宜読み替えて対応ください。
.
├── src
│ ├── appsscript.json
│ ├── *.html
│ └── *.ts
├── .clasp.json
├── package-lock.json
├── package.json
├── tsconfig.json
└── tslint.json
今回は以下のファイルに修正を加えています。
- .clasp.json
- package.json
- tsconfig.json
.clasp.jsonはもともと以下のような形式です。
{
"scriptId": "XXXXXXXXXXXXXXXXXXXXXX",
"rootDir": "./src"
}
tsconfig.jsonは以下のような形式でした。
{
"compilerOptions": {
"target": "ES2019",
"lib": [
"ES2019",
"DOM"
]
}
}
対応の方針
基本的な方針として、TypeScriptのコンパイルコマンド(tsc)を使用してJavaScriptにコンパイルしてclasp push
することとしました。
claspのREADMEでは以下のようなプロジェクトも紹介されており使用を検討しましたが、新規で使い始めるなら良いと思ったのですがたくさんある既存のプロジェクトを移行するのは工数がかかると判断し、なるべく既存のプロジェクトに寄せる形としました。
- https://github.com/WildH0g/apps-script-engine-template
- https://github.com/tomoyanakano/clasp-typescript-template
- https://github.com/google/aside
- https://github.com/sqrrrl/apps-script-typescript-rollup-starter
対応内容
package.jsonの修正
scripts
で以下のような設定を行いました。
"scripts": {
"build:ts": "npx tsc",
"copy:html": "mkdir -p dist && rsync -av --include='*/' --include='*.html' --exclude='*' ./src/ dist/",
"copy:json": "mkdir -p dist && cp ./src/appsscript.json dist/",
"clasp:push": "clasp push",
"build": "npm-run-all build:ts copy:html copy:json",
"push": "npm-run-all build clasp:push"
}
build:ts
はTypeScriptのコンパイルを実施しています。それ以外にGASのプロジェクトではappsscript.json
が必要となるため、コンパイル先のフォルダーにコピーするためcopy:json
を設定しています。
また、GASではWebアプリケーションなどを開発するためにHTMLファイルを使用する場合もあります。HTMLファイルをコンパイル先のフォルダーにコピーするためcopy:html
を設定しました。
build
はそれらをまとめて実行するため、push
はGAS上のコード更新(clasp push
)まで1コマンドで実行するために設定しています。
なので、実運用では以下のコマンドでこれまでのclasp push
を代替するイメージとなります。
npm run push
なお、devDependencies
は以下のようになっています。
"devDependencies": {
"@google/clasp": "^3.0.6-alpha",
"@types/google-apps-script": "^1.0.99",
"eslint": "^7.32.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.8.8",
"tslint": "^6.1.3",
"tslint-config-prettier": "^1.18.0",
"tslint-plugin-prettier": "^2.3.0",
"typescript": "^5.9.2"
}
@google/clasp
は記事執筆時点で3系はalpha版のみのリリースとなっているため、^3.0.6-alpha
のバージョンを使用しています。
tsconfig.jsonの修正
以下の内容に変更しました。
{
"compilerOptions": {
"target": "ES2019",
"lib": [
"ES2019"
],
"module": "ESNext",
"moduleResolution": "Bundler",
"outDir": "./dist"
},
"include": [
"./src/**/*.ts"
],
"exclude": [
"node_modules",
"dist"
]
}
コンパイル先としてdist
フォルダーを設定し、src
フォルダー以下の.ts拡張子のファイルをコンパイルするように設定しています。
.clasp.jsonの修正
コンパイル先をdist
に設定したため、"rootDir”
の値を"./dist”
に変更しました。
{
"scriptId": "XXXXXXXXXXXXXXXXXXXXXX",
"rootDir": "./dist"
}
上記修正が完了すれば、パッケージのインストールを実施後GAS上へのTypeScriptで書いたコードの反映が行えるはずです。
npm install
npm run push
まとめ
今回はclaspのTypeScriptサポート廃止に伴う弊社における対応を紹介させていただきました。既存プロジェクトへの対応策の1つとして、参考にしていただけますと嬉しく思います。
なお、この対応が必ずしも良いわけではないと思いますので、それぞれの組織の状況に合わせてご対応いただければと思います。
ここまでお読みいただきありがとうございました。