GAS 用の CLI ツール clasp をインストールして GAS をローカルで開発して実行できる環境の構築手順をメモしました。

GAS 用のローカル環境を構築するに至った経緯

仕事でちょっとしたスクリプトを書くことが増えてきて毎回ブラウザで書くのがしんどく感じるようになったのと
コードはローカルで書いて Github 上で管理をしたかったことがきっかけて環境を構築してみました。

clasp

clasp とは？

Google 公式の GAS 用 CLI（コマンドライン）ツールで、スクリプトの作成(Standalone Script のみ)や複製、アップロード機能などを提供します。

clasp の特徴

• ローカルで開発ができる
• デプロイバージョンを管理できる
• TypeScript で開発ができる

環境

• Node.js 14.15.3
• Yarn 1.22.10

ファイル操作で利用するUnixコマンドについて

基本的なディレクトリ作成やファイル操作はUnixコマンドを利用します。
Unixコマンドについて詳しくはこちらの記事を参考にしてください。

clasp の環境構築

プロジェクトの初期化

プロジェクトディレクトリの作成

~/clasp-sample というプロジェクトディレクトリを作成して移動します。

terminalCopy code$ mkdir ~/clasp-sample && cd ~/clasp-sample

プロジェクトの初期化

yarn でプロジェクトの初期化を行います。 npm で実施する方は必要に応じて変更してください。

terminalCopy code$ yarn init -y
yarn init v1.22.10
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨  Done in 0.06s.

パッケージのインストール

clasp をインストール

yarn installコマンドで clasp をインストールします。
グローバルにインストールするのが一般的なようですがプロジェクトの中へ閉じたいためローカルヘインストールしています。

terminalCopy code$ yarn add -D @google/clasp
yarn add v1.22.10
// 中略
success Saved 1 new dependency.
info Direct dependencies
└─ @google/clasp@2.3.2
info All dependencies
└─ @google/clasp@2.3.2
✨  Done in 4.40s.

型定義ファイルのインストール

TypeScript で書くため型定義ファイルをインストールします。

rubyCopy code$ yarn add -D @types/google-apps-script

インストールしたパッケージの確認

package.json を開きインストールしたパッケージを確認します。

package.jsonCopy code  "devDependencies": {
    "@google/clasp": "^2.3.2",
    "@types/google-apps-script": "^1.0.34"
  }

GAS API の設定変更

G Suite ユーザー設定画面から Google Apps Script API をオンにして下さい。
G Suite ユーザー設定画面

clasp プロジェクトの作成

clasp create

clasp createコマンドでclasp-sampleという clasp プロジェクトを作成します。
コマンドを実行するとスクリプトの種別を問われますので用途に応じて選択してください。

terminalCopy code yarn run clasp create clasp-sample
yarn run v1.22.10
$ /Users/XXXX/clasp-sample/node_modules/.bin/clasp create clasp-sample
? Create which script? (Use arrow keys)
❯ standalone
  docs
  sheets
  slides
  forms
  webapp
  api

.clasp.json

コマンドを実行すると.clasp.jsonというファイルが作成されているので
中身を確認します。

terminalCopy code$ cat .clasp.json
{"scriptId":"XXXXXXXXXXXXXXXXXXXXXXXXXXX"}

今回は TypeScript で開発するのとソースの管理はsrc配下で管理したいため
下記設定を追記します。

terminalCopy code$ vi .clasp.json

変更後の.clasp.json

rootDirとfileExtensionを追記します。

.clasp.jsonCopy code{
  "scriptId": "XXXXXXXXXXXXXXXXXXXXXXXXXXX",
  "rootDir": "./src",
  "fileExtension": "ts"
}

src ディレクトリの作成

mkdirコマンドで src ディレクトリを作成します。

terminalCopy code$ mkdir src

GAS プロジェクトページの確認

clasp openコマンドで GAS プロジェクトページを開いてプロジェクト確認します。

terminalCopy code$ yarn run clasp open

コマンドを叩くとブラウザが起動しプロジェクトページが開きます。

GAS プロジェクトのpull

clasp pullコマンドで GAS プロジェクトをローカルへ取得します。

terminalCopy code$ yarn run clasp open
// 中略
└─ ./src/appsscript.json
✨  Done in 3.90s.

src​/​appsscript.jsonというファイルが作成されました。

コードを作成する

とりあえずコードを書いてみます。

sample.tsの作成

sample.tsの作成します。

terminalCopy code$ vi src/sample.ts

適当なコードをかきます。

sample.tsCopy codefunction sample() {
  const message = 'Hello world!'
  Logger.log(message);
  console.log(message);
}

作成したコードをプロジェクトへpushする

clasp pushコマンドで GAS プロジェクトコードを送信します。

terminalCopy code$ yarn run clasp push

GASプロジェクトを開いて作成したコードを確認

clasp openコマンドで GAS プロジェクトページを開いてプロジェクト確認します。

terminalCopy code$ yarn run clasp open

作成したコードが登録されていました。
また利用したconstがトランスパイルされていことも確認できます。

スクリプトの実行

スクリプトを実行してみます。
上部メニューの真ん中あたりにある実行をクリックします。

スクリプトの実行結果

実行ログのところに実行結果が表示されていることが確認できます。

ローカルに環境を構築しローカルで書いたコードを実行できるようになりました。

コマンドを実行をブラウザのエディタからではなくローカルで実行できるようにする手順については下記の記事を参照ください。

GASのコマンドを実行をブラウザのエディタからではなくローカルで実行できるようにする手順