Claude Code + clasp で GAS 開発が激変した話

スポンサーリンク
スポンサーリンク

「GASってなんか開発しづらいな」——ずっとそう思いながら使い続けていた。ブラウザのスクリプトエディタ上でポチポチ書いて、保存して、実行して。エラーが出たらまたスクリプトエディタを開いて……。

それがClaude CodeとClaspを組み合わせて使い始めてから、完全に変わった。ローカル開発・バージョン管理・AI補完がぜんぶ揃って、GASがまるで別のツールになった感覚がある。

この記事では、バックオフィス業務でGASを日常的に使っている経理マネージャー視点から、その変化を具体的に書いていく。

スポンサーリンク

そもそもGAS開発のどこがしんどかったか

GAS（Google Apps Script）は経理・バックオフィス現場では本当によく使う。スプレッドシートの自動集計、フォームからSlack通知、MoneyForwardへのデータ連携……ちょっとした自動化の多くがGASで完結する。

ただ、開発体験はずっと微妙だった。従来とclasp+Claude Code導入後の違いをまとめると以下のとおりだ。

❌ 従来のGAS開発（ブラウザエディタ）
  • ブラウザ上のエディタで書く（補完がほぼ効かない）
  • Gitでバージョン管理できない
  • AIにコードを貼り付けて質問する手間がかかる
  • デプロイはボタンをぽちぽち押す作業
  • 「昨日の動いていたバージョンに戻したい」が難しい
✅ clasp + Claude Code 導入後
  • VSCodeやターミナルで書ける（TypeScript型補完が効く）
  • Gitで完全管理できる
  • AIがプロジェクト全体のコンテキストを把握して補助してくれる
  • clasp push コマンド一発でデプロイ完了
  • コミット履歴があるので怖くない

「ブラウザのエディタで書くのが普通」という状態が続きすぎて、それがデフォルトになっていた。claspの存在は知っていたけど、「設定がめんどくさそう」で後回しにしていた。それを動かしたのがClaude Codeとの組み合わせだった。

clasp とは——30秒で理解する

ClaspはCommand Line Apps Script Projectsの略で、Googleが公式で提供しているCLIツール。GASプロジェクトをローカルのファイルとして扱えるようにする橋渡し役だ。

一度セットアップすれば、clasp push でローカルのコードをGASにアップロード、clasp pull で既存プロジェクトをローカルに取得できる。

インストールはnpmで一行で済む。

npm install -g @google/clasp

これだけでも相当便利なのだが、Claude Codeと組み合わさると次元が変わる。

Claude Code が何を変えたか

Claude Codeはターミナル上で動くAIコーディングエージェントで、単純な「コードを補完する」だけでなく、プロジェクト全体のファイルを読みながら実装・修正・テストまでやってくれる。

これがclaspと組み合わさると、次のループが回る。

STEP 1

ローカルでGASコードを書く（TypeScript）
VSCodeとClaude Codeが全ファイルのコンテキストを持ちながら補完・実装してくれる。スプレッドシートのAPI型定義も効く。

STEP 2

Claude Codeに「このパターンの処理を実装して」と頼む
プロジェクト構造を理解した上で、既存の共通モジュール（auth.ts、sheets_reader.ts など）を活用したコードを生成してくれる。

STEP 3

clasp push で即デプロイ
コマンド一発でGASに反映。スクリプトエディタを開く必要もない。

STEP 4

Git でバージョン管理
パターンごとにブランチを切って、PRベースで管理。「昨日の動いていたバージョンに戻したい」が一瞬でできる。

実際のディレクトリ構成

現在使っているプロジェクトの構成はこんな感じ。MoneyForward連携のジャーナル登録ツールをGAS + TypeScriptで作っている。

gas-project/
├── src/
│   ├── main.ts              # エントリーポイント
│   ├── auth.ts              # OAuth2.0認証
│   ├── sheets_reader.ts     # スプレッドシート読み込み
│   ├── flag_writer.ts       # 処理済みフラグ書き込み
│   └── patterns/
│       ├── revenue_01.ts    # パターンごとの処理
│       └── expense_01.ts
├── docs/                    # Claude Code用の仕様書
│   ├── CLAUDE.md
│   ├── revenue/
│   └── expense/
├── .clasp.json
├── tsconfig.json
└── appsscript.json

ポイント

docs/CLAUDE.md にプロジェクト全体の設計・制約・パターン一覧を書いておくのがミソ。Claude Codeはこれを最初に読んで全体像を把握した上でコードを書いてくれるので、「文脈がわかっていないAIに毎回説明するストレス」がゼロになる。

具体的にどう楽になったか

① 「既存コードに倣って書いて」が通じる

従来はChatGPT等にコードを貼り付けて「このスタイルで続きを書いて」と頼んでいた。毎回コンテキストを渡す手間がかかるし、プロジェクト全体の構造はAIに伝わらない。

Claude Codeはローカルの全ファイルを参照しているので、「revenue_01.tsと同じ構造でexpense_04を実装して」と言えばそのまま動く。共通モジュールのimportも適切にやってくれる。

② TypeScriptの型エラーをその場で直してくれる

GASにはSpreadsheetApp等のグローバルオブジェクトがあり、型定義を@types/google-apps-scriptで入れると補完が効く。型エラーが出たらClaude Codeに投げると即座に修正案が返ってくる。

// TypeScriptの恩恵例：型が効いている
function readSheet(sheetName: string): string[][] {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName(sheetName);
  if (!sheet) throw new Error(`シート "${sheetName}" が見つかりません`);
  return sheet.getDataRange().getValues() as string[][];
}

③ デプロイが怖くない

以前は「間違ってデプロイしたら元に戻せない」という不安があった。今はGitで管理しているのでコミット履歴がある。clasp push前にgit diffで確認して、問題なければ反映。本番用ブランチと開発ブランチを分ける運用もできる。

セットアップの手順（要点だけ）

前提条件

Node.js 18以上、Google Workspaceアカウントがあること。GASのAPIをGoogle Cloud Consoleで有効にしておく必要がある。

STEP 1

claspをインストール・ログイン

npm install -g @google/clasp
clasp login

Google認証ブラウザが開くので許可する。

STEP 2

既存プロジェクトをcloneまたは新規作成

# 既存GASがあれば
clasp clone [スクリプトID]

# 新規なら
clasp create --title "MyProject" --type standalone

STEP 3

TypeScript環境を整える

npm install --save-dev @types/google-apps-script typescript

tsconfig.json と .claspignore を配置する。

STEP 4

CLAUDE.md を書く
プロジェクトの目的・ファイル構成・制約をまとめたドキュメントを作成。Claude Codeへの「設計書」になる。

STEP 5

Claude Codeでガシガシ実装

claude

コマンドでエージェントを起動。あとは自然言語で指示するだけ。

注意点・ハマりポイント

便利なのは間違いないが、いくつか知っておくべき点もある。

OAuth2.0の設定はClaude Codeでも自動化できない

Google Cloud ConsoleでOAuth同意画面を設定し、スコープを正しく指定するのは手動作業になる。「内部」設定にすればWorkspaceドメイン内に自動制限されるので、追加設定不要で済む場合が多い。

claspのTypeScriptコンパイルはtscを使わない

claspが独自にトランスパイルするため、tsconfig.jsonの一部オプションが無視される。高度な型変換が必要な場合は事前にtscで確認しておくと安全。

GASの実行時間制限（6分）は変わらない

ローカル開発になっても、GASランタイムの制約はそのまま。大量データを処理する場合はバッチ処理設計が必要。

まとめ

この組み合わせで変わったこと
  • ブラウザエディタからローカル開発環境へ移行できた
  • GASがGitで管理できるようになり、デプロイが怖くなくなった
  • Claude Codeがプロジェクト全体を把握した上でコードを書いてくれる
  • TypeScriptの型補完で実装ミスが激減した
  • clasp push で即デプロイ、開発サイクルが圧倒的に速くなった

バックオフィスでGASを使い続けている人には、claspの導入だけでも相当効果がある。そこにClaude Codeを加えると、「AIにコードを教えてもらう」ではなく「AIと一緒に設計・実装する」感覚になる。一度体験すると、ブラウザのスクリプトエディタには戻れなくなる。

GAS開発やバックオフィス自動化についてもっと掘り下げてほしいテーマがあれば、コメントで教えてください。

スポンサーリンク

コメント

タイトルとURLをコピーしました