💡

GAS開発をApps ScriptエディタからCLIに寄せ、コピペ地獄を無くす方法（clasp+TypeScript+AIエージェント）

に公開
AI
TypeScript
GAS
Google Apps Script
clasp
tech

はじめに

業務で、GASからBigQueryを定期実行して、結果(何十項目もある)を複数シート・複数表に整形して出力する処理を書いていました。

Geminiにコードを貼って「ここを直して」「この列を追加して」などとやっていたのですが、
毎回コピペしてApps Scriptエディタに戻すのがとにかく面倒でした。

そこで、ローカルでCLIからAIに指示してGASを書く運用ができないか考えてみました。

つらかったこと

  • BigQueryの取得項目が多く、出力フォーマット変更が頻発
  • 「AIに依頼→コード受け取り→Apps Scriptにコピペ」の往復が重い
  • 修正のたびに差分管理しづらい（どこを直したか追いにくい）

方針

やりたいことはシンプルです。

  1. GASコードはローカルで編集（もちろんCLIからAIで指示出しする）
  2. ローカルでの変更は自動反映する
  3. 実行・ログ確認をCLI中心で回す

最小構成

以下については済んでいる前提とします。

  • Node.jsが入っている
  • clasp login済み
  • Apps Script APIを有効化済み

1.プロジェクト作成

clasp create --type sheets --title "スプレッドシートのタイトル"
  • スプレッドシート紐づけのApps Scriptを作成
  • .clasp.json が生成される

2.TypeScript導入

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

tsconfig.build.json を用意して Code.ts -> dist/Code.js をビルドする構成にしました。
（Code.ts をそのままpushするとasなどのTS構文でエラーになるため）

※tsconfig.build.jsonの例も載せておきます。

{
  "compilerOptions": {
    "target": "ES2019",
    "module": "none",
    "strict": true,
    "types": ["google-apps-script"],
    "skipLibCheck": true,
    "outFile": "dist/Code.js"
  },
  "files": ["Code.ts"]
}

3.package.json作成

{
  "name": "morning-dashboard",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "mkdir -p dist && npx tsc -p tsconfig.build.json && cp appsscript.json dist/appsscript.json",
    "push": "npm run build && clasp push",
    "watch": "npm run build && clasp push --watch",
    "open": "clasp open-script",
    "logs": "clasp tail-logs --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/google-apps-script": "^2.0.10",
    "typescript": "^5.9.2"
  }
}

主要なコマンド

npm run push   # ローカルでの変更をリモート(GASのエディタ)にJSをビルドしてpush
npm run open    # GASのスクリプトエディタがブラウザで開ける
npm run logs    # ログの監視

やってみて思ったこと

以下の点で大幅に開発体験が向上しました。

  • 修正指示をそのままローカルに反映できる
  • 差分が追いやすい（Gitで管理できるため）
  • ターミナルでコードの作成を完結できる(Web上のエディタでは必須だったコピペがなくなる)

まとめ

GASはブラウザだけでも書けますが、
規模が大きくなるならclasp + TypeScript + CLI運用の方がストレスが少ないと思います。

特に、AIでコード修正を回すなら、
コピペ前提よりも、ローカルでCLIで指示を出して修正させるほうがストレスが少ないです。

同じ悩みがある人の参考になればうれしいです。

おまけ

作業用ディレクトリを作ってそこでCLI上で任意のAIを起動し、
以下のようなプロンプトを実行すると簡単に環境構築できます。

GAS（Google Apps Script）を「ローカル編集 → 自動push → 実行/ログ確認」できる最小構成を、
実際にコマンド実行して作ってください。

要件:
- claspでスプレッドシート紐づけのGoogle Apps Scriptプロジェクトを作る（未作成なら）。
- TypeScriptで書ける状態にする（tsconfig + 型定義）。
- Code.tsを作り、次の関数を用意する：
  (ここに作って欲しい処理に関して記述)
- console.logを適度に入れてclasp logsで追えるようにする

実行手順:
1) まず、 `pwd`と `ls -la`を実行して現状を確認。
2) `.clasp.json`が無ければ、`clasp create --type sheets --title "スプレッドシートのタイトル"`を実行してプロジェクトを作成。
3) `npm init -y` を実行し、devDependenciesに`typescript`と`@types/google-apps-script`を入れる。
4) `tsconfig.json`を作成（module:none / target:ES2019 / types:google-apps-script / strict:true）。
5) claspが作った`Code.gs`がある場合は削除または`Code.ts` に置き換え（最終的にCode.ts だけを使う）。新規作成でもOK。
6) `.claspignore`と`.gitignore`を作り、node_modulesや.gitなどをpush対象外にする。
7) package.jsonにscriptsを追加：
   - "push": "clasp push"
   - "watch": "clasp push --watch"
   - "open": "clasp open"
   - "logs": "clasp logs --watch"
8) ここまでできたら`npm run push`を1回実行してアップロード成功を確認。
9) 最後に、私が次に叩くコマンド（watch/open/logs）を3行で提示して終了。

注意:
- 可能な限りターミナルだけで完結させてください（ただし clasp login の再実行は不要）。
- ファイル作成はcat/EOFなどで中身をちゃんと書き込んでください。
- 途中でエラーが出たら、その場で原因を確認して修正し、手順を続行してください。

Discussion