✨

TypeScript + clasp + pnpm + Biome で快適なGAS開発環境を構築する

2025/03/27に公開

はじめに

Google Apps Script (GAS) の開発をより快適に行うための開発環境の構築方法を備忘録がてら書きます。
TypeScriptで書けて、Biomeによるコード品質管理を実現する環境を構築します。

🌟 実現すること

TypeScriptを使用したGAS開発
Biomeによるコード品質管理
claspによるGASプロジェクト管理
esbuildによるビルド

📚 プロジェクト構成

.
├── src/
│   └── main.ts      # メインのソースコード
├── dist/            
│   ├── appsscript.json # GASの設定ファイル
│   └── main.js　　　 # ビルド成果物
├── .clasp.json      # clasp設定
├── biome.json       # Biome設定
├── tsconfig.json    # TypeScript設定
└── esbuild.js       # ビルド設定

📦 プロジェクトのセットアップ

1. プロジェクトの初期化

# プロジェクトディレクトリの作成
mkdir your-gas-project
cd your-gas-project

# pnpmの初期化
pnpm init

2. 必要なパッケージのインストール

# 開発に必要なパッケージのインストール
pnpm add -D @biomejs/biome @types/google-apps-script esbuild esbuild-gas-plugin typescript @google/clasp

3. TypeScript設定

tsconfig.jsonを作成:

{
  "compilerOptions": {
    "target": "ES2019",
    "module": "ES2020",
    "lib": ["ES2019"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

4. Biome設定

biome.jsonを作成(設定は好みに合わせて変更してください):

{
  "$schema": "https://biomejs.dev/schemas/1.4.0/schema.json",
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single"
    }
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "organizeImports": {
    "enabled": true
  }
}

5. esbuildの設定

esbuild.jsを作成:

import esbuild from 'esbuild';
import { GasPlugin } from 'esbuild-gas-plugin';

esbuild
  .build({
    entryPoints: ['./src/main.ts'],
    bundle: true,
    minify: true,
    outfile: './dist/main.js',
    plugins: [GasPlugin],
  })
  .catch((e) => {
    console.error(e);
    process.exit(1);
  });

6. claspの設定

# claspにログイン
pnpm clasp login

# 新規プロジェクトの作成
pnpm clasp create --type standalone

.clasp.jsonを編集:

{
  "scriptId": "YOUR_SCRIPT_ID",
  "rootDir": "./dist",
}

※スプレッドシートを使用するのであれば、"parentId": ["YOUR_PARENT_ID"]も必要です。

7. スクリプトの設定

package.jsonのscriptsセクションを編集(個人的な好みも含んでます):

{
  "scripts": {
    "build": "node esbuild.js",
    "push": "clasp push",
    "open": "clasp open",
    "deploy:gas": "pnpm build && pnpm push && clasp open",
    "d": "pnpm deploy:gas",
    "format": "biome format --write .",
    "lint": "biome lint .",
    "check": "biome check --write .",
    "cd": "pnpm check && pnpm deploy:gas"
  }
}

pnpm cdでコードチェック(自動整形)、ビルドとGASへのデプロイまでできるのでオススメです。

8. appsscript.jsonの設定(GAS)

appsscript.jsonの編集(適宜変更してください。):

{
  "timeZone": "Asia/Tokyo",
  "dependencies": {
    "enabledAdvancedServices": [
      {
        "userSymbol": "BigQuery",
        "serviceId": "bigquery",
        "version": "v2"
      }
    ]
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/script.external_request",
    "https://www.googleapis.com/auth/drive",
    "https://www.googleapis.com/auth/spreadsheets",
    "https://www.googleapis.com/auth/gmail.send",
    "https://www.googleapis.com/auth/calendar"
  ]
}

まとめ

以上、この構成によりTypeScript、clasp、pnpmとBiomeでGASをTypeScriptで扱えて
コード品質も管理できるようになりました。
普段からGASはよく使うので、雛形としてよく使用してます。
GASのコードの管理ついては様々な現場で課題感はあるのではないでしょうか？
何かの役に立てれば幸いです。
以下、参考記事はとても役に立ちました。ありがとうございました。