Zenn
💬

TypeScriptも使えるGASのローカル開発パッケージ「clasp」の環境構築

2020/11/01に公開
GAS
tech

GASをローカルで開発できるパッケージ「clasp」というのがあります。

https://github.com/google/clasp

GASをローカルの普段使い慣れているエディタで書いて、そのコードをすぐ反映させたり、バージョンなどを指定してデプロイできたりと使ってみて便利だったので使い方をメモっておきます。

インストール

公式だとグローバルにインストールしていますが、汚れるのが嫌ならプロジェクト内でも良いと思います。

npm install -g @google/clasp

そしてローカルで使い出す前にGoogle App Script APIの設定をオンにしておきます。

https://script.google.com/home/usersettings

そして使用するアカウントでログインします。ログインコマンドを実行するとブラウザで権限を許可しますというページが開くとで確認して許可ボタンを押してください。

$ clasp login

Logging in globally...
🔑 Authorize clasp by visiting this url:
https://accounts.google.com/o/oauth2/v2/auth?access_type=offline&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fscript.deployments%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fscript.projects%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fscript.webapp.deploy%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive.metadata.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive.file%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fservice.management%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Flogging.read%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&client_id=1072944905499-vm2v2i5dvn0a0d2o4ca36i1vge8cvbn0.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Flocalhost%3A50160

Authorization successful.

Default credentials saved to: ~/.clasprc.json (/Users/<username>/.clasprc.json).
~

ファイル作成

このコマンドを実行するとGASのファイル群を作成します。実行すると、どのスクリプトとして作成するか聞かれます。standaloneだと独立したGASファイル。spreadsheetやdocsだとそのファイルに紐付いているアドオンとして作成されます。

$ clasp create

? Create which script?
❯ standalone
  docs
  sheets
  slides
  forms
  webapp


Create which script? sheets
Created new Google Sheet: https://drive.google.com/open?id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Created new Google Sheets Add-on script: https://script.google.com/d/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/edit
Warning: files in subfolder are not accounted for unless you set a '.claspignore' file.
Cloned 1 file.
└─ appsscript.json

appsscript.jsonはGASを実行する際のタイムゾーン、やランタイムのバージョン、別ファイルのGASを使いたいときの設定ができる

.clasp.jsonはプッシュ・デプロイするときの設定ファイル。どのスクリプトシートを使うか、反映させるときのディレクトリをどこにするかなどの設定ができます。ファイルの拡張子も設定でき、.tsを指定できますが最新のバージョンだと指定しなくても、tsファイルはトランスパイルされるので不要でした。

プッシュ・デプロイ

試しにTSファイルを作ってプッシュ・デプロイします。

function index(): void {
  const greeting: string = 'Hello World';
  console.log(greeting);
}

プッシュします。

$ clasp push
└─ appsscript.json
└─ index.ts
Pushed 2 files.

実際に見てみるとJSにトランスパイルされています。

// Compiled using ts2gas 3.6.3 (TypeScript 3.9.7)
function index() {
    var greeting = 'Hello World';
    console.log(greeting);
}

開発時は毎回pushをして確認するのが面倒だと思うので、watchを使うと変更がある度にpushをしてくれるので快適に開発ができます。

そして、開発と検証が終わってこれを正規なバージョンとして使用するってなったらdeployを使ってバージョン管理をすることも可能です

// clasp deploy [--versionNumber <version>] [--description <description>] [--deploymentId <id>]
$ clasp deploy --versionNumber "3" --description "version 3"

バージョン管理をするとpullでバージョンを指定してローカルに反映させることができます。ただ、TypeScriptで書いている場合はpullしてもJavaScriptにトランスパイルされている状態のものをもってくるのであまり恩恵はなさそうです。素直にGitで管理しましょう。

余談：npmパッケージ使いたい、ローカルでトランスパイルしてから反映したい場合

Webpackとそのプラグインgas-webpack-pluginを使うとできます。

Discussion