GAS + clasp + TypeScript + GitHub Actions の環境構築

定期的にGASを使用することがあるが、毎度claspやTypeScriptで環境構築する方法を忘れるため自分のためにも記事にしておく。

https://github.com/HidakaRintaro/gas-clasp-ts-gha-template

実行環境

node: 20.11.1 
yarn: 1.22.19 
clasp: 2.4.2

環境構築

下記から Google Apps Script API をONにする。
https://script.google.com/home/usersettings

パッケージのインストール

$ yarn init -y
$ yarn add -D @google/clasp typescript @types/google-apps-script
$ yarn add -D eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier

設定ファイル類の設定

$ yarn tsc --init
$ touch eslint.config.js 
$ touch .prettierrc.yaml

Googleへのログイン

$ yarn clasp login 

新規作成

$ yarn clasp create

準備

$ mkdir src
$ touch src/index.ts
$ mv appsscript.json src

.clasp.json

{
  "scriptId": "<スクリプトID>",
- "rootDir": "<カレントディレクトリ>"
+ "rootDir": "./src"
}

src/appsscript.json

{
- "timeZone": "America/New_York",
+ "timeZone": "Asia/Tokyo",
  "dependencies": {
  },
  "runtimeVersion": "V8"
}

GASを書いていく

pushができるかの確認のため少しだけ記述

src/index.ts

function outputHello(): void {
  console.log(`Hello World`);
}

デプロイ

$ yarn clasp push

# openで開いたGASのエディタに `index.gs` があればOK！
$ yarn clasp open

GitHub Actionsでデプロイ

mkdir -p .github/workflows
touch .github/workflows/push-gas.yaml

GitHubのSecretsへ下記を登録する

• ACCESS_TOKEN
• ID_TOKEN
• EXPIRY_DATE
• REFRESH_TOKEN
• CLIENT_ID
• CLIENT_SECRET

.github/workflows/push-gas.yaml

name: push-gas

on:
  push:
    branches:
      - main
    paths:
      - "src/**"
      - ".github/workflows/push-gas.yaml"

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version-file: "package.json"
          cache: "yarn"

      - name: Install packages
        run: |
          yarn install

      - name: Create .clasprc.json
        run: |
          cat << EOS > ~/.clasprc.json
          {
            "token": {
              "access_token": "${{ secrets.ACCESS_TOKEN }}",
              "refresh_token": "${{ secrets.REFRESH_TOKEN }}",
              "scope": "https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/logging.read https://www.googleapis.com/auth/script.deployments https://www.googleapis.com/auth/service.management https://www.googleapis.com/auth/cloud-platform https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/drive.metadata.readonly https://www.googleapis.com/auth/script.projects https://www.googleapis.com/auth/script.webapp.deploy openid https://www.googleapis.com/auth/userinfo.email",
              "token_type": "Bearer",
              "id_token": "${{ secrets.ID_TOKEN }}",
              "expiry_date": "${{ secrets.EXPIRY_DATE }}"
            },
            "oauth2ClientSettings": {
              "clientId": "${{ secrets.CLIENT_ID }}",
              "clientSecret": "${{ secrets.CLIENT_SECRET }}",
              "redirectUri": "http://localhost"
            },
            "isLocalCreds": false
          }
          EOS

      - name: Create .clasp.json
        run: |
          cat << EOS > ./.clasp.json
          {
            "scriptId": "${{ secrets.SCRIPT_ID }}",
            "rootDir": "src"
          }
          EOS

      - name: Push to Google Apps Script
        run: yarn clasp push -f

その他

eslintやprettier、tsconfigも最低限セットアップできるといいな...

参考

https://zenn.dev/babel/articles/eslint-flat-config-for-babel
https://dev.classmethod.jp/articles/github-actions-gas-deploy/