はじめに

個人開発でタイマートリガーを利用したLineへの通知アプリを作成した際にGoogle Apps Script(GAS)を利用してみました！

GASは無料で使えるし、専用のエディタの補完機能も良い感じですが、個人的にはVSCodeを用いてローカル開発したり、TypeScriptを用いて型付けをしっかりしたり、デプロイは自動でしたりしたいな～という思いからその環境を作ってみたので備忘録として残します。

前提

Node.jsがインストール済み

Google Apps Script APIを有効にする

まずは外部からGASプロジェクトを操作できるようにGoogle Apps Script APIを有効にします。

Apps Script – Google Apps Script

claspとTypeScriptの導入と認証

対象のフォルダ内で以下のコマンドを実行します。

npm init

npm install @google/clasp

GAS関連のスクリプトもインストールしておきます。

npm install @types/google-apps-script

claspの導入後、以下のコマンドで認証を行います。

clasp login

ログイン後、Windowsユーザの場合はC:\Users\{ユーザ名}フォルダに.clasprc.jsonファイルが出来ています。Github Actionsの設定で後々使うのでファイルの場所は忘れないようにしましょう。

以下のコマンドでプロジェクトを新規作成します。

clasp create

※ちなみにTypeScriptはclaspが最初からサポートしているので独自にインストールする必要はありません。

eslintとpretterの導入

こちらは個々人の好みかと思いますが、eslintとpretterも導入しておきます。

npm install eslint prettier eslint-config-prettier eslint-plugin-googleappsscript

※eslintがなかなか効かなくてハマってしまったのですが、どうやら.eslintrc.jsファイルにてparserOptions.project項目へ対象のtsconfig.jsonファイルのパスを追加する必要があるみたいでした。

parserOptions: {
    /* 省略 */
    project: ["tsconfig.json"],
},

Pretterについても.vscode\settings.jsonファイルに設定を書いて動くようにします。今回は保存時にフォーマット警察が動くようにしています。

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

Github Actionsにて自動デプロイ

.github\workflowsフォルダにrun.ymlファイルを作成します。中身は以下のような感じにして、masterブランチにマージ(もしくは直接プッシュ)されたときに自動デプロイが走るようにしました。

name: cicd-notificate-app

on:
    push:
        branches:
            - master
    workflow_dispatch:
jobs:
    deploy:
        runs-on: ubuntu-latest
        steps:
            - name: checkout
              uses: actions/checkout@v3
            - name: setup Node.js
              uses: actions/setup-node@v3
              with:
                  node-version: "16"
            - name: install Clasp
              run: |
                  npm init -y
                  npm install clasp
            - name: create clasprc.json
              # scopeは長いのでこの記事では空にしてます。
              run: |
                  echo \{\"token\":\{\"access_token\":\"${{ secrets.ACCESS_TOKEN}}\",\"scope\":\"\",\"token_type\":\"Bearer\",\"id_token\":\"${{ secrets.ID_TOKEN }}\",\"expiry_date\":1673089616269,\"refresh_token\":\"${{ secrets.REFRESH_TOKEN }}\"\},\"oauth2ClientSettings\":\{\"clientId\":\"${{ secrets.CLIENTID }}\",\"clientSecret\":\"${{ secrets.CLIENT_SECRET }}\",\"redirectUri\":\"http://localhost\"\},\"isLocalCreds\":false\} > ~/.clasprc.json
            - name: deploy
              run: |
                  clasp push

ポイントはコメントを書いている下のrun項目の部分でしょうか。こちらはデプロイの際にGASプロジェクトへアクセスする際に必要な内容(.clasprc.jsonファイルの内容)です。 secrets.・・・と書いている部分はGitHubのSecretを利用しています。

暗号化されたシークレット - GitHub Docs

直接機密情報をアップするのは好ましくないので、こういうサービスは積極的に使っていきたいですね。

以上でmasterブランチにマージされた後にGASプロジェクトへ自動デプロイされることが出来るかと思われます。