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 をインストールする。
|
1 |
> npm i @google/clasp -g |
次に以下を実行するとブラウザが開くので、任意のアカウントでGoogleにログインする。
|
1 |
> clasp login |
そうしたら https://script.google.com/home/usersettings にアクセスし、Google Apps Script APIの設定をONにしておく。これをONにしないと外部から Apps Script のプロジェクトやデプロイメントを変更できない。
プロジェクトの設定
適当な空フォルダを作成する。今回は gassample とする。
以下を実行してプロジェクトを作成する。このとき前述の「最初にやること」に書いたGoogle Apps Script APIの設定をONにしていないとエラーが出る。
|
1 2 |
> cd gassample > clasp create gassample |
どの形式で作成するかの選択肢が出るので、今回はwebappを選択する。
処理が成功すると .clasp.json と appsscript.json が作成されるので、appsscript.json をエディタで開いて timeZoneの値をAsia/Tokyoに変更しておく。
不要なファイルのアップロードを避けたい場合は .claspignore ファイルを作成し中身を好きにいじるとよい。globパターンで記述する。
（例）
|
1 2 3 4 |
**/** !*.js !*.ts !appsscript.json |
TypeScript 用の型定義ファイルを追加することで、VSCode上でGAS固有クラスの補完を行うことができる。その場合以下を実行する。
|
1 |
> npm install @types/google-apps-script --save-dev |
※ 厳密にはプロジェクト単位ではなくVSCodeのワークスペースに追加したフォルダの直下で行う。
GASプロジェクト ← ここをワークスペースに追加する場合
└ node_modules
└ @types
└ google-apps-script
GAS ← ここをワークスペースに追加する場合
├ GASプロジェクト1
├ GASプロジェクト2
├ …
├ GASプロジェクトn
└ node_modules
└ @types
└ google-apps-script
※ ↑ ただしこれだと別プロジェクトなのにVSCodeが同一プロジェクトだと思って関数名被ってるとかエラーを出してくるのでおすすめしない
コードの作成と反映
使うコマンド
対象プロジェクトをブラウザで開きたいとき。
|
1 |
> clasp open |
GASからpullするとき。
|
1 |
> clasp pull |
GASにpushするとき。
|
1 |
> clasp push |
サンプルプログラム
先ほど作成したプロジェクト上に適当な .ts ファイルを作成し、以下を記述する。
|
1 2 3 |
function test(): void { Logger.log("Helloween"); } |
pushしてGASにアップロードしたらopenでGASの画面を開き、ブラウザ上で実行してログが出ることを確認する。