TypeScriptでGASの開発を行うための環境構築 #TypeScript

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が対応しているものをインストールし¹、コードを整えるために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　を作成したら、ドキュメントに従ってファイルを編集します²³。

tsconfig.json

{
  "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と同じディレクトリにある必要があるので移動させます²。また、"fileExtension": "ts"を追加することで、ローカルプロジェクトの拡張子を指定することができます。

.clasp.json

{
    "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はまだまだ続きます！ぜひ購読登録して、明日以降の記事もチェックしてみてください！