Ateam Group U-30 Advent Calendar 2022の5日目は、 @zumi0 が担当します！
はじめに
claspという、Google Apps Script（GAS）をローカルで開発することを可能にするCLIツールがあります。そのツールを使うと、ローカルで開発をできるようになるだけでなく、TypeScriptを使って開発できるようになります。
今回は、TypeScriptでGASの開発をするために行なった環境構築の内容を備忘録としてまとめていきたいと思います。
TypeScriptでGASの開発を行うための環境構築
TypeScript周りの諸々を準備する
まずはGASの開発を行うディレクトリを作成し、 TypeScriptや型などをインストールしていきます。TypeScriptはclaspが対応しているものをインストールし1、コードを整えるためにTSLintとPrettierもインストールします。
$ mkdir -p clasp_project_sample/src && cd clasp_project_sample
$ npm init -y
$ npm i -S typescript@3.8.2 @types/google-apps-script @types/node
$ npm i -D tslint prettier tslint-config-prettier tslint-plugin-prettier
インストールが完了したら、以下のコマンドを実行してtsconfig.jsonとtslint.jsonを作成します。
$ npx tslint --init
$ npx tsc --init
tsconfig.json を作成したら、ドキュメントに従ってファイルを編集します23。
{
"compilerOptions": {
"isolatedModules": true,
"noLib": true,
"noResolve": true,
"target": "ES2019",
"lib": ["esnext"],
"module": "None",
"noImplicitUseStrict": true,
"experimentalDecorators": true,
"types": ["google-apps-script", "node"]
}
}
claspを導入する
まずはclaspをインストールしていきます。
TypeScriptでGASを開発する場合claspのバージョンは1.5.0のものを利用してください
$ npm i -g @google/clasp
claspのインストールが完了したら、claspを使ってGASのプロジェクトを作成します。以下のコマンドで作成します。
$ clasp login
$ clasp create --type standalone --title "clasp project sample" --rootDir ./src
詳しい説明は省きますが、気になる方や不明なところがあった方はこちらの記事を参照してください。
GASのプロジェクトを作成すると、./srcに.clasp.jsonが作成されます。このファイルはtsconfig.jsonと同じディレクトリにある必要があるので移動させます2。また、"fileExtension": "ts"を追加することで、ローカルプロジェクトの拡張子を指定することができます。
{
"scriptId": "YOUR_SCRIPT_ID",
"rootDir": "./src",
+ "fileExtension": "ts"
}
clasp_project_sample/
├── .clasp.json
├── node_modules/
├── package-lock.json
├── package.json
├── src
│ ├── appsscript.json
│ └── main.ts
├── tslint.json
└── tsconfig.json
最後になりますが、必要に応じてGitで管理できるようにすれば完了です！
さいごに
今回は、TypeScriptでGASの開発を行うための環境構築の方法をまとめました。ご活用いただけたら嬉しいです。
Ateam Group U-30 Advent Calendar 2022はまだまだ続きます！ぜひ購読登録して、明日以降の記事もチェックしてみてください！