概要

通常サーバー側でスクリプトを保存・管理している GoogleAppsScript をローカルで開発するための連携ツール clasp を使用して、ローカルにインストールした VisualStudioCode で GoogleAppsScript を書く。
オンラインのスクリプトエディターとなるべく環境を合わせるために、あえて TypeScript からのトランスコンパイル機能は使わない。

※2020/02/13 追記
Google Apps Script 側で V8 ランタイムを使用することができるようになったため、TypeScript を使用しなくても ES6 以降の仕様に準拠したスクリプトが書けるようになった。

準備

以下をあらかじめインストールしておく
- VisualStudioCode
- Node.js
スクリプトを保存するためのディレクトリを作成しておく
コマンドラインで操作するのでユーザーディレクトリ内にしておくと後で楽

clasp のインストール

コマンドラインを開き以下のコマンドを実行する。
(npm は Node.js 付属のライブラリー管理ツール)

npm install -g @google/clasp

インストールが完了したら、以下のコマンドを実行して Google にログインの上で、 clasp との連携を許可しておく。

clasp login

連携のための設定

コマンドラインであらかじめ作成しておいたスクリプト保存用フォルダーに移動する。

cd gas

プロジェクト用のディレクトリを作成する。

mkdir test
cd test

VisualSudioCode で GoogleAppsScript 固有クラスの補完を行うために TypeScript 用の型定義ファイルを追加する。

npm init -y
npm install -S @types/google-apps-script

GoogleAppsScript のプロジェクトを作成する。
--rootDir オプションを使用することでスクリプト本体の保存先ディレクトリをプロジェクトの設定ファイルなどから分離することができる。

clasp create --rootDir ./src test

ただし、--rootDir オプションが正常に動作しないことがあるため、その場合には手動で設定する必要がある。

【手動設定】
プロジェクトフォルダー内の appsscript.json を対象のディレクトリーにコピー。

mkdir src
mv appsscript.json ./src

更に .clasp.json の内容をエディターを使用して以下のように編集する。

{
    "scriptId":"スクリプトID",
    "rootDir": "./src"
}

プロジェクト自体はこれで作成が完了するが、一度 Web ブラウザでプロジェクトを開かないとサーバー側にデフォルトのスクリプトファイルが生成されない模様。
以下のコマンドで Web ブラウザでプロジェクトを開くことが可能。

clasp open

clasp による同期

サーバー上のスクリプトをローカルにダウンロードする

コマンドラインでプロジェクトフォルダーに移動した状態で以下のコマンドを実行する。

clasp pull

ローカルのスクリプトをサーバーにアップロードする

コマンドラインでプロジェクトフォルダーに移動した状態で以下のコマンドを実行する。

clasp push

作成済みのプロジェクトをローカルで開発したい場合

clone することで作成済みのプロジェクトをローカルにダウンロードして紐つけることも可能。

clasp clone --rootDir ./src スクリプトID

V8 ランタイムの使用 (2020/02/13 追記)

V8 ランタイムを使用したい場合は appsscript.json に「"runtimeVersion": "V8"」を追加する。
なお、clasp で新規作成したプロジェクトでは、タイムゾーンが「"America/New_York"」に設定されている場合があるため、こちらも修正しておくと良い。
appsscript.json 修正後は、clasp push でサーバー側に内容を反映させる必要がある。

{
  "timeZone": "Asia/Tokyo",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}

Windows 環境において PowerShell で clasp コマンドを使用する際の注意点 (2020/02/13 追記)

PowerShell では clasp.ps1 というスクリプトファイルによって clasp コマンドが提供されている。
PowerShell の初期設定ではセキュリティポリシーにより、スクリプトファイルの実行が許可されていないため、clasp コマンドを使用するためにはスクリプトファイルの実行を許可する必要がある。
※セキュリティポリシーの変更を伴うため、実施には細心の注意を払う必要がある。

PowerShell でのスクリプトファイルの実行の許可

PowerShell を管理者権限で起動し、以下のコマンドを実行する。


Set-ExecutionPolicy RemoteSigned

開発

VisualStudioCode で clasp を使って準備したスクリプトを開くと読み込んだファイルが通常の .js ファイルでも types/google-apps-script の型定義を読み込んで GoogleAppsScript 固有クラス等の補完を行ってくれる。非常に便利。

なお、clasp は TypeScript のトランスコンパイルに対応しているので、モダンな環境で開発したスクリプトを GoogleAppsScript 仕様に変換してアップロードすることも可能となっている。
ローカルメインの開発を考えるのであれば TypeScript を使用する方が多いかと思われる。 (2020/02/13 修正)

参考

GAS のGoogle謹製CLIツール clasp
Google Apps ScriptsでTypescriptが超簡単に使えるようになった！

VisualStudioCodeでGoogleAppsScriptを補完機能を使いながら開発する方法

概要

準備