VSCode と clasp を使って TypeScriptでGoogle Apps Script(GAS)のコードを書くための開発環境の構築メモ。
TypeScriptで書いたファイルをGASに反映する方法、かつ、ローカルで編集したファイルをGASに反映する方法でもある。
参考までに俺はWindowsでやっております。


最初にやること
VSCode、Node.jsのインストール
こいつらは普通にインストーラをダウンロードしてポチポチするだけ。
VSCode(Visual Studio Code)
Node.js
clasp の導入と設定
GASのソースコードをローカル環境で開発できるツールclaspを導入する。
VSCode と Node.js をインストールしたら、コマンドプロンプト、PowerShell、VSCodeのターミナルなどどれでもいいので開き、以下を実行してclasp をインストールする。
次に以下を実行するとブラウザが開くので、任意のアカウントでGoogleにログインする。
そうしたら https://script.google.com/home/usersettings にアクセスし、Google Apps Script APIの設定をONにしておく。これをONにしないと外部から Apps Script のプロジェクトやデプロイメントを変更できない。
プロジェクトの設定
適当な空フォルダを作成する。今回は gassample
とする。
以下を実行してプロジェクトを作成する。このとき前述の「最初にやること」に書いたGoogle Apps Script APIの設定をONにしていないとエラーが出る。
どの形式で作成するかの選択肢が出るので、今回はwebapp
を選択する。
処理が成功すると .clasp.json
と appsscript.json
が作成されるので、appsscript.json
をエディタで開いて timeZone
の値をAsia/Tokyo
に変更しておく。
不要なファイルのアップロードを避けたい場合は .claspignore
ファイルを作成し中身を好きにいじるとよい。globパターンで記述する。
(例)
TypeScript 用の型定義ファイルを追加することで、VSCode上でGAS固有クラスの補完を行うことができる。その場合以下を実行する。
※ 厳密にはプロジェクト単位ではなくVSCodeのワークスペースに追加したフォルダの直下で行う。
GASプロジェクト ← ここをワークスペースに追加する場合
└ node_modules
└ @types
└ google-apps-script
GAS ← ここをワークスペースに追加する場合
├ GASプロジェクト1
├ GASプロジェクト2
├ …
├ GASプロジェクトn
└ node_modules
└ @types
└ google-apps-script
※ ↑ ただしこれだと別プロジェクトなのにVSCodeが同一プロジェクトだと思って関数名被ってるとかエラーを出してくるのでおすすめしない
コードの作成と反映
使うコマンド
対象プロジェクトをブラウザで開きたいとき。
GASからpullするとき。
GASにpushするとき。
サンプルプログラム
先ほど作成したプロジェクト上に適当な .ts ファイルを作成し、以下を記述する。
push
してGASにアップロードしたらopen
でGASの画面を開き、ブラウザ上で実行してログが出ることを確認する。