Zenn
❄️

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

2022/10/27に公開
Google Apps Script
TypeScript
GAS
clasp
tech

はじめに

claspという、Google Apps Script（GAS）をローカルで開発することを可能にするCLIツールがあります。そのツールを使うと、ローカルで開発をできるようになるだけでなく、TypeScriptを使って開発できるようになります。

今回は、TypeScriptでGASの開発をするために行なった環境構築の内容を備忘録としてまとめていきたいと思います。

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

TypeScript周りの諸々を準備する

まずはGASの開発を行うディレクトリを作成し、 TypeScriptや型などをインストールしていきます。TypeScriptと、コードを整えるためにTSLintとPrettierもインストールします。

$ mkdir -p clasp_project_sample/src && cd clasp_project_sample
$ npm init -y
$ npm i -S typescript
$ npm i -S @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　を作成したら、ドキュメントに従ってファイルを編集します[1][2]。

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をインストールしていきます。

$ 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:1]。また、"fileExtension": "ts"を追加することで、ローカルプロジェクトの拡張子を指定することができます。必要に応じて追加してください。

.clasp.json
{
    "scriptId": "YOUR_SCRIPT_ID",
    "rootDir": "./src",
+   "fileExtension": "ts"
}

Gitでプロジェクトを管理できるようにする

あとはGitで管理できるようにして、個人的には完了かなと思います。.clasp.jsonを上げるのは良くないので、.gitignoreに記載しておきましょう。

.gitignore
node_modules/
.clasp.json

最後にTypeScriptのファイルは./srcで作成して終わりです。
最終的にディレクトリ構造は、以下のようになりました。

clasp_project_sample/
├── node_modules/
├── src
│   ├── appsscript.json
│   └── main.ts
├── .clasp.json
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.json
└── tslint.json

さいごに

今回は自分の備忘録として、TypeScriptでGASの開発をするための環境構築についてまとめました！どなたかの参考になれば幸いです。

脚注

  1. https://github.com/google/clasp/blob/master/docs/typescript.md#prerequisites ↩︎

  2. https://github.com/google/clasp/blob/master/docs/typescript.md#typescript-configuration ↩︎ ↩︎

Discussion