claspとTypeScriptを用いたGAS開発

はじめに

先日、私用のプロジェクトで GAS（Google Apps Script） に触れる機会がありました。

Google Form でクイズを出題し、その回答を Google Spreadsheet で管理していたのですが、集計処理を自動化したいと考え、GAS を利用することにしました。

調べてみると、clasp を利用することでローカル環境から好きなエディタで開発できることを知りました。
さらに、TypeScript を用いた開発にも対応しているそうな。

本記事では、clasp と TypeScript を用いた GAS 開発環境の構築手順について紹介します。

構築手順

claspとは

clasp とは、ローカル環境でGAS開発を可能にするCLIツールで「Command Line Apps Script Projects」の略だそうです。

Apps Scriptプロジェクトの作成や編集、デプロイを行うことができ、様々なGoogleのサービス向けのウェブアプリやアドオンを作成し、公開することができます。

Node.jsの準備

clasp を動作させるにはNodeの環境が必要です。
利用可能か確認しておきましょう。

$ node -v
v22.19.0

現時点（2026年4月2日）ではNode.jsのバージョンは22.0.0以上が必要です。

claspのインストール

下記コマンドでグローバルにインストールしました。

npm install -g @google/clasp

実行することでGAS APIが使用可能になります。
実行後、下記URLよりGAS APIをオンにしてください：
https://script.google.com/home/usersettings

ログイン

ローカルでGASをするためにプロジェクトを作成するGoogleアカウントにログインする必要がある。

clasp login

コマンド入力後、ブラウザが立ち上がるのでアカウントを選択してclaspの使用を許可することでログインが完了します。

GASプロジェクトのクローン

今回は既存のGASを clasp で管理したかったので、下記コマンドから clone を行いました。

clasp clone {スクリプトのプロジェクトID}

プロジェクトIDはGASエディタのURLから取得できます：
https://script.google.com/home/projects/{プロジェクトID}/edit

TypeScriptの設定

デフォルトでは JavaScript を使用しているので、TypeScript で記述できるようにしていきます。

TypeScriptインストール

まずは下記コマンドを実行。

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

実行すると下記が自動で生成されます：

• node_module
• package.json
• package-lock.json

tsconfig.json作成

続いて下記を実行して tsconfig.json を作成します。

npx tsc --init

中身はこんな感じで設定

{
  // Visit https://aka.ms/tsconfig to read more about this file
  "compilerOptions": {
    // File Layout
    "rootDir": "./src",

    // Environment Settings
    "module": "ESNext",
    "moduleResolution": "bundler",
    "target": "ES2020",
    "types": ["google-apps-script"],
    "lib": ["ES2020"],
    "experimentalDecorators": true,

    // Stricter Typechecking Options
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,

    // Recommended Options
    "strict": true,
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "skipLibCheck": true
  }
}

ビルド用パッケージのインストール

npm install -D esbuild esbuild-gas-plugin

ビルド用スクリプトの作成

touch 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((error) => {
        console.log('build failed')
        console.error(error);
        process.exit(1);
    });

distの設定

まずはルート直下に dist フォルダを作成します

mkdir dist

clasp.json に下記内容を追記します。

{
    "rootDir": "./dist"
}

appsscript.json を作成した dist フォルダに移動させます。

ソースの移動

ルート直下に src フォルダを作成し、ソースコードを移動させます。

私の場合はプロジェクトをcloneしたのでこの時点でソースコードが存在していましたが、新たに作成する方は移動させるのではなく src 配下に作成してください。

package.jsonの編集

package.json に下記設定を記述します。

{
    "type": "module",
    "main": "./src/main.ts",
    "scripts": {
        "build": "node esbuild.js",
        "push": "clasp push",
        "open": "clasp open",
        "deploy": "npm run build && npm run push"
    },
}

フォルダ構成 と ファイル解説

フォルダ構成

この時点で私は下記のような構成になっていました。

root/
　├ dist/
　│   └ appsscript.json
　├ node_modules/　
　├ src/
　│   ├ doGet.ts
　│   ├ hogehoge.ts
　│   ├ index.html
　│   └ main.ts
　├ .clasp.json
　├ esbuild.js
　├ package-lock.json
　├ package.json
　└ tsconfig.json

ファイル解説

私の場合は下記4ファイルの構成でした：

ファイル名	説明
hogehoge.ts	画面に表示するボタン押下時に発火する処理を記述
doGet.ts	GASのWebアプリとして公開されたとき、URLへのGETリクエストを受け取り、index.html をHTMLページとして返す
index.html	描画するHTMLを記述
main.ts	GASへのエントリーポイント

肝心な doGet.ts と main.ts だけサンプルコード置いておきます：

doGet.ts

サーバーへのアクセスがあるとこの doGet() が呼ばれます。
index.htmlで記載した内容をreturnすることで画面が表示されます。

export function doGet(): GoogleAppsScript.HTML.HtmlOutput {
  return HtmlService.createHtmlOutputFromFile("index");
}

main.ts

このプロジェクトはバンドルしてGASにデプロイする構成です。
バンドラーはコードを即時実行関数などでラップするため、トップレベルで定義した関数がGASから見えなくなります。

そのため、global への代入でアクセス可能にしてやる必要があります。

import { doGet } from "./doGet";
import { hogehoge } from "./hogehoge";

interface Global {
  doGet: typeof doGet;
  hogehoge: typeof hogehoge;
}
declare const global: Global;

// GASランタイムへ関数を公開
global.doGet = doGet;
global.hogehoge = hogehoge;

ビルド・デプロイ

ビルドやデプロイなどはそれぞれ下記のコマンドで実行します。
コード修正後はデプロイコマンドを実行し、Apps Scriptで手動デプロイしてください。

# ビルド（コードをGAS用に変換）
npm run build

# プッシュ（ローカルの内容をGASに反映）
npm run push

# デプロイ済みWebアプリをブラウザで開く
npm run open

# デプロイ
npm run deploy

おわりに

今回は clasp と TypeScript を用いた環境開発構築を行いました。

clasp を利用することでコードをGithubなどでバージョン管理することができます。
CICDを設定することで clasp コマンドを実行できたりするので便利そうです。
また色々試してみよっと。

それでは。

参考文献