claspのTypeScriptサポート廃止に対する既存プロジェクトの対応

Posted at 2025-08-14

はじめに

弊社ではclaspを使用してTypeScriptでGoogle Apps Script（以降GAS）の開発を行ってきました。

しかし、clasp2系から3系へのバージョンアップの際、claspのTypeScriptサポートが廃止となったため、既存プロジェクトの移行方法を検討・整理したのでその内容を紹介いたします。

前提

開発環境はMacを想定しています。

弊社では原則以下のフォルダー構成でGAS開発を実施しています。本記事はその前提のもと書いておりますので、実際にこの記事の内容で対応する場合は適宜読み替えて対応ください。

.
├── src
│   ├── appsscript.json
│   ├── *.html
│   └── *.ts
├── .clasp.json
├── package-lock.json
├── package.json
├── tsconfig.json
└── tslint.json

今回は以下のファイルに修正を加えています。

.clasp.json
package.json
tsconfig.json

.clasp.jsonはもともと以下のような形式です。

.clasp.json

{
    "scriptId": "XXXXXXXXXXXXXXXXXXXXXX",
    "rootDir": "./src"
}

tsconfig.jsonは以下のような形式でした。

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2019",
    "lib": [
      "ES2019",
      "DOM"
    ]
  }
}

対応の方針

基本的な方針として、TypeScriptのコンパイルコマンド（tsc）を使用してJavaScriptにコンパイルしてclasp pushすることとしました。

claspのREADMEでは以下のようなプロジェクトも紹介されており使用を検討しましたが、新規で使い始めるなら良いと思ったのですがたくさんある既存のプロジェクトを移行するのは工数がかかると判断し、なるべく既存のプロジェクトに寄せる形としました。

対応内容

package.jsonの修正

scripts で以下のような設定を行いました。

  "scripts": {
    "build:ts": "npx tsc",
    "copy:html": "mkdir -p dist && rsync -av --include='*/' --include='*.html' --exclude='*' ./src/ dist/",
    "copy:json": "mkdir -p dist && cp ./src/appsscript.json dist/",
    "clasp:push": "clasp push",
    "build": "npm-run-all build:ts copy:html copy:json",
    "push": "npm-run-all build clasp:push"
  }

build:tsはTypeScriptのコンパイルを実施しています。それ以外にGASのプロジェクトではappsscript.jsonが必要となるため、コンパイル先のフォルダーにコピーするためcopy:jsonを設定しています。
また、GASではWebアプリケーションなどを開発するためにHTMLファイルを使用する場合もあります。HTMLファイルをコンパイル先のフォルダーにコピーするためcopy:htmlを設定しました。

buildはそれらをまとめて実行するため、pushはGAS上のコード更新（clasp push）まで1コマンドで実行するために設定しています。

なので、実運用では以下のコマンドでこれまでのclasp pushを代替するイメージとなります。

npm run push

なお、devDependencies は以下のようになっています。

  "devDependencies": {
    "@google/clasp": "^3.0.6-alpha",
    "@types/google-apps-script": "^1.0.99",
    "eslint": "^7.32.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.8.8",
    "tslint": "^6.1.3",
    "tslint-config-prettier": "^1.18.0",
    "tslint-plugin-prettier": "^2.3.0",
    "typescript": "^5.9.2"
  }

@google/claspは記事執筆時点で3系はalpha版のみのリリースとなっているため、^3.0.6-alphaのバージョンを使用しています。

tsconfig.jsonの修正

以下の内容に変更しました。

{
  "compilerOptions": {
    "target": "ES2019",
    "lib": [
      "ES2019"
    ],
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "outDir": "./dist"
  },
  "include": [
    "./src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

コンパイル先としてdistフォルダーを設定し、srcフォルダー以下の.ts拡張子のファイルをコンパイルするように設定しています。

.clasp.jsonの修正

コンパイル先をdistに設定したため、"rootDir” の値を"./dist” に変更しました。

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

上記修正が完了すれば、パッケージのインストールを実施後GAS上へのTypeScriptで書いたコードの反映が行えるはずです。

npm install
npm run push

まとめ

今回はclaspのTypeScriptサポート廃止に伴う弊社における対応を紹介させていただきました。既存プロジェクトへの対応策の1つとして、参考にしていただけますと嬉しく思います。
なお、この対応が必ずしも良いわけではないと思いますので、それぞれの組織の状況に合わせてご対応いただければと思います。

ここまでお読みいただきありがとうございました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up