GASのローカル開発環境を構築する方法

Google Apps Script（GAS）は、Googleの各種サービスを自動化・拡張するための強力なツールですが、従来は専用のエディタ（スクリプトエディタ）を使って直接クラウド上で開発する必要がありました。しかし、より効率的かつ高度な開発を目指すなら、ローカル環境でGASを開発できる環境構築がおすすめです。この記事では、GASのローカル開発環境を構築する方法について、ステップごとにわかりやすく解説します。

GASについてより詳しく知りたい方は以下の記事を参照してください。

📄GAS（Google Apps Script）とは

GASを活用することで以下のようなシステムが構築できます。

📄GASで古いGmailを自動削除する方法

📄GASでNotionの日付プロパティを参照しGmail通知する

[目次を開く]

1. ローカル開発のメリット 2. claspのインストール 3. 新規プロジェクトの作成と設定 4. デプロイ・テスト 5. 補足：TypeScriptの活用 TypeScript導入の流れまとめ

1. ローカル開発のメリット

まず、GASをローカルで開発する主なメリットを整理しましょう。

バージョン管理（Gitなど）との統合が容易
お気に入りのエディタ（VSCodeなど）を利用可能
パッケージ管理（npmなど）を活用できる
チーム開発やCI/CDとの連携もスムーズ

これらの利点から、業務効率化や開発体験の向上を実感できます。

GitやGithubについては以下の記事を参照してください。

📄【初心者入門用】GitとGithubの基礎

2. claspのインストール

GASのローカル開発で必須となるのが、Google公式のCLIツール「clasp（Command Line Apps Script Projects）」です。claspを使うことで、ローカルPCからGASプロジェクトの作成・編集・デプロイが可能になります。

インストール手順：

Node.jsのインストール（未導入の場合）
以下の記事を参考にNode.jsの環境を構築してください。

📄nvmでNode.jsをバージョン管理する
claspのインストール
ターミナル（コマンドプロンプト）で以下を実行します。
```
// 安定版をグルーバルインストール
npm install -g @google/clasp@latest

// バージョン確認
clasp --version
```
バージョン確認で「3.0.6-alpha」などalpha版がインストールされていた場合は、

npm show @google/clasp versions でインストールできるバージョンを確認し安定版を明示的に指定しインストールしてください。

※利用できる機能やコマンドに違いがある場合があるため
claspのログイン
```
clasp login
```
ブラウザが開き、Googleアカウントで認証を行います。

3. 新規プロジェクトの作成と設定

claspの基本操作を見ていきましょう。

新規ディレクトリの作成
```
mkdir my-gas-project
cd my-gas-project
```
claspプロジェクトの初期化
```
clasp create --type sheets --title "My GAS Project"
```
- -typeはスプレッドシート・ドキュメントなど、用途に合わせて変更可能です。
ローカルで開発
お好きなエディタ（例：VSCode）でCode.gsなどのスクリプトファイルを編集します。

4. デプロイ・テスト

GASプロジェクトへの反映（アップロード）

// コードをGAS側へ反映するには
clasp push

// GASの変更をローカルに反映するには
clasp pull

GASエディタでの確認・実行
```
# clasp2.x系
clasp open

# clasp3.x系
clasp open-script
```
でブラウザが自動で開きます。エラーが表示される場合はclasp -vで自身の環境にインストールされているclaspのバージョンに合わせて実行してください。

以下のリンクからもGASのプロジェクトを確認できます。

https://script.google.com

5. 補足：TypeScriptの活用

より快適な開発を目指すなら、TypeScript対応もおすすめです。

tsconfig.jsonを用意し、npmで型定義などもインストールすることで、型安全なGAS開発が可能になります。

TypeScript導入の流れ

TypeScript導入の流れをみる

1. TypeScriptをインストール

プロジェクトのルートで以下を実行：

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

2. tsconfig.json の作成

npx tsc --init

または以下の内容で手動作成してもOK↓

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "none",
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "esModuleInterop": true,
    "types": ["google-apps-script"]
  },
  "include": ["src/**/*"]
}

3. ディレクトリ構成を決める

よくあるパターン：

/src         ← TypeScriptソース（例：main.ts）
/dist        ← 出力先（ここに.jsができる）
.clasp.json  ← claspの設定

4. TypeScriptコードを書く

srcディレクトリ内にmain.tsなどを作成してGASのコードを書く。

例: src/main.ts

function helloWorld() {
  Logger.log("Hello from TypeScript!");
}

5. トランスパイル（ts→jsへ変換）

npx tsc

→ /dist に JavaScript が出力されます。

6. clasp 設定の修正（.clasp.json）

通常はこうなっています：

{
  "scriptId": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "rootDir": "dist"
}

（rootDirで「dist」にすることで、clasp push 時に /dist 配下をアップロード）

7. デプロイ

package.jsonの修正

"scripts": {
  "build": "tsc && copy src\\appsscript.json dist\\",
  "deploy": "npm run build && clasp push"
}

npm run deploy

→ これでTypeScriptで書いたコードがGASに反映されます！

TypeScript導入の全体イメージ

src に .ts ファイルを書く
npx tsc で dist に .js を出力
.clasp.json の "rootDir" を "dist" にしておく
package.json にbuildやdeployに必要なコマンドを定義
npm run deploy でGASにデプロイ

まとめ

GASのローカル開発環境を構築することで、開発効率や品質を大幅に向上できます。claspの導入から始めて、自分だけの快適なGAS開発ライフを始めてみましょう。

アルアカ - Arcadia Academia