GASをTypeScriptで使う方法 Aug/2021

概要

Google Apps Script (GAS) は web アプリのエディタで ECMAScript (JavaScript) を使って開発するのが基本です。が、 Google の提供する clasp というツールを使うとローカル環境で TypeScript で開発することもできます。TypeScript は型推論が 容易なので 各種language serverなどによる、エディタ (emacs, vim, VSCodeなど) の高性能なコーディング支援機能を 使うことで大変快適に作業できます。 ここではその方法、というか手順を解説します。 …と言ってもほとんどの情報は 本家claspのサイト にあります。このページは自分向けの要約備忘メモといったところです。

claspの導入(初回のみ)

claspをインストールして、Googleアカウントでログインします。

npm install -g @google/clasp
clasp login

プロジェクトディレクトリの作成

掘って、npm で初期化して、GASをtypescriptで使うためのnode.js パッケージをインストールします。

mkdir gasproj
cd gasproj
npm init
npm i --save-dev @types/google-apps-script

さらに tsconfig.json という以下のような ファイルを作成します。(追記: これ不要かも)

{
  "compilerOptions": {
     "lib": ["esnext"],
     "experimentalDecorators": true
  }
}

GASプロジェクトの作成

新規作成する場合と、GASエディタで作った既存のGASプロジェクトを TypeScript にアップグレード(?)する場合それぞれの説明をします。

case 1: 新規作成する場合

clasp create で新規作成できます。プロジェクトの種類(type)は standalone, docs, sheets, slides, forms, webapp, api から 選択可能です。また --rootDirオプションで コードのルートディレクトリを指定できます。ごちゃごちゃ させたくない場合は指定しましょう。プロジェクトタイトルは --titleオプションです。 プロジェクトが作られると(rootDirの下に) appsscript.jsonというファイルが 作られます。timeZone だけAsia/Tokyo にでもしておきましょう。

clasp create --title gasproj --rootDir src
(sheets を選択)
vi src/appsscript.json
(timeZone を変更)
clasp open   # これをするとブラウザでGASエディタが開く

case 2: 既存プロジェクトを TypeScript に移行する場合

このケースも意外に多いのではないでしょうか。軽い気持ちで始めたGAS プロジェクトが肥大化して、もはやJSではやってられん、TSに移行するぞ、という ケースです。この場合は、前項のように clasp create せずに、clone から始めます。GAS エディタの設定から スクリプトIDをコピーして、clone します。 code.jsみたいなものが落ちてくるので 拡張子を変更しましょう。はい、もちろん勝手に JS が TS になるはずは ありません。自分で手作業でアップグレードしてください。

clasp clone ********(スクリプトID)********
mv code.js code.ts          

コードの更新 (push)

コードを書いてGAS側にアップロードするときは clasp push します。これだけです。ローカルの .ts コードがトランスパイル されて、GAS側の .gs (js) コードとして上書きされて、即 有効になります。

なお、clasp の基本的な使い方の1つとして pull があります。 これは GAS 側のコードをローカルに pull (ダウンロード) するものですが、本記事でやろうとしているような TypeScript での開発の際は pullしない ようにしましょう。 TypeScript (ローカル) → JavaScript (GAS) の変換は一方通行 です。逆はできません。もう今後の開発はローカル限定で オンラインのGASエディタは使わないことになります。

参考までに pull するとどうなるのかやってみたところ、 main.ts をpush, pullしたら、ローカルには main.ts と main.js の2つのファイルが存在する状態になりました。この状態で push しようとしたら ‘A file with this name already exists in the current project: main’とうことでエラーになりました。

git での管理

ローカル環境で享受できる恩恵は使い慣れた、 あるいは高機能なエディタの他に、git 等でのバージョン管理が 容易ということもあります。git で管理しましょう。 当然node_modules は .gitignoreに書きますが、 それ以外(package-lock.json 等)は 書かないのが正解っぽいです。(この辺詳しくないので良く 理解してません。) .gitignoreを 作って git init して、あとは一緒 です。このリポジトリclone したときは最初に npm ci としてパッケージをインストールします。( 参考サイト)