GASをTypeScriptで書いてesbuild + claspでデプロイする環境を作る

はじめに

GASをほぼ初めて使いました。GitHubでコードを管理するためにはいろいろセットアップが必要だったので、備忘録として残しておきます。

この記事でやること

Google Apps Script（GAS）をTypeScriptで書き、esbuildでバンドルし、claspでデプロイする開発環境を構築します。

前提

• Node.js がインストール済み
• Git がインストール済み
• Google アカウントを持っている

手順

1. プロジェクト作成

mkdir my-gas-project
cd my-gas-project
git init
npm init -y

2. パッケージインストール

npm install -D typescript @types/google-apps-script @google/clasp esbuild

3. TypeScript設定

ルートディレクトリにtsconfig.jsonを作成します。

tsconfig.json

{
  "compilerOptions": {
    "target": "es2019",
    "module": "esnext",
    "lib": ["esnext"],
    "types": ["google-apps-script"],
    "strict": true,
    "noEmit": true,
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "isolatedModules": true
  },
  "include": ["src/**/*.ts"]
}

4. esbuild設定

ルートディレクトリにbuild.jsを作成します。

build.js

const esbuild = require("esbuild");

esbuild
  .build({
    entryPoints: ["src/index.ts"],
    outfile: "dist/index.js",
    bundle: true,
    format: "iife",
    target: "es2019",
    footer: {
      js: [
        "function checkContributions() { globalThis.checkContributions(); }",
        "function setupTrigger() { globalThis.setupTrigger(); }",
      ].join("\n"),
    },
  })
  .catch(() => process.exit(1));

5. claspセットアップ

claspはGASのコードを自分のローカルフォルダで管理するために使います。

5-1. ログイン

npx clasp login

ブラウザが開き、Googleアカウント認証が行われます。

5-2. GASプロジェクト作成

npx clasp create --type standalone --title "My GAS Project"

ここで.clasp.jsonとappsscript.jsonが生成されます。

5-3. .clasp.json の編集

rootDirをdistに変更します。claspはこのディレクトリの内容をGASへプッシュします。

.clasp.json

// 〜〜〜
{
  "scriptId": "生成されたScript ID",
  "rootDir": "dist"
}
// 〜〜〜

5-4. appsscript.jsonの編集

先ほど生成されたappsscript.jsonを書き換えます。

appsscript.json

{
  "timeZone": "Asia/Tokyo",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}

6. npm scripts設定

package.jsonのscriptsを設定します。

package.json

// 〜〜〜
{
  "scripts": {
  "build": "node build.js",
  "push": "npm run build && cp appsscript.json dist/ && clasp push"
  }
}
// 〜〜〜

• npm run build — TypeScriptをバンドルしてdist/index.jsを生成
• npm run push — ビルド → appsscript.jsonをdistへコピー → GASへデプロイ

7. .gitignoreを追加

.gitignore

node_modules/
dist
.clasp.json

• dist — ビルド成果物のため不要
• .clasp.json — Script IDが含まれるため管理外にする

8. 動作確認

8-1. src/index.tsを作成する

src/index.ts

function hello(): void {
  Logger.log("Hello GAS from TypeScript!");
}

(globalThis as any).hello = hello;

8-2. build.js のfooterを変更する

build.js

// 〜〜〜
  footer: {
    js: 'function hello() { globalThis.hello(); }',
  },
// 〜〜〜

8-3. デプロイ

npm run push

GASエディタでhelloを実行し、ログに「Hello GAS from TypeScript!」と表示されれば完了です。

最終的なディレクトリ構成

  my-gas-project/
  ├── src/
  │   └── index.ts           # TypeScriptソースコード
  ├── dist/                  # ビルド成果物（git管理外）
  │   ├── index.js
  │   └── appsscript.json
  ├── build.js               # esbuild設定
  ├── package.json
  ├── tsconfig.json
  ├── appsscript.json        # GASマニフェスト
  ├── .clasp.json            # clasp設定
  └── .gitignore

おわりに

ここまでセットアップできればあとはindex.tsを編集してnpm run pushするだけでGASで好きなことができます。

私はGitHubの草を監視して、21:00時点でcontributionがない場合、メールで通知するという仕組みを作ってみました！
GASは無料で色々できてとても便利ですね、今後もたくさん使っていきます！