おまけ: GAS用の開発環境構築メモ

VSCode と clasp を使って TypeScriptでGoogle Apps Script(GAS)のコードを書くための開発環境の構築メモ。

TypeScriptで書いたファイルをGASに反映する方法、かつ、ローカルで編集したファイルをGASに反映する方法でもある。

参考までに俺はWindowsでやっております。

VSCode
Blueskyの自分の投稿をRSSに変換する(GAS使用)
Google Apps Script(GAS)を使用してBlueskyの自分の投稿をRSSに変換する方法。IFTTTに食わせたい時などに。

最初にやること

VSCode、Node.jsのインストール

こいつらは普通にインストーラをダウンロードしてポチポチするだけ。

VSCode(Visual Studio Code)

Visual Studio Code – コード エディター | Microsoft Azure
ほぼすべての言語で動作し、任意の OS で実行される強力なコード エディターである Visual Studio Code を使用して、Azure 上で編集、デバッグ、デプロイを行います。

Node.js

Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

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.jsonappsscript.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の画面を開き、ブラウザ上で実行してログが出ることを確認する。