GoogleAppsScriptをローカルかつTypeScriptで開発するための環境を構築してテンプレートリポジトリを作成しました。
必要なもの
- Node.js
- エディタ(僕はVisual Studio Code)
- Googleアカウント
手順
claspの導入
claspというGoogleが提供しているGoogleAppsScriptにアクセスするCLIツールを利用します。
npm install -g @google/clasp
https://script.google.com/home/usersettings
上記URLでGoogleAppsScriptAPIを利用可能にします。
Googleアカウントにclaspでログインしておきましょう。
clasp login
実行するとブラウザが起動するので
Googleアカウントを選択して
許可をクリック。
これでclaspからGASを操作する権限付与ができました。
プロジェクトテンプレート
先駆者たちのお知恵をお借りして作りました。
https://github.com/stin-dev/gas-ts-template
イメージは下記のような感じ。
-
src配下でTypeScript開発 - src以下のtsファイルをWebpackでバンドルして
dist/index.jsを作成 -
claspでdist/index.jsをGASにアップロード
経緯
claspはTypeScriptに対応しているのでtsファイルをそのままアップロードしても実行可能なのですが、import, exportなどモダンな記法に対応していないので少し処理が大きくなってモジュール分割したいと思ってもできません。
なのでデプロイ時にWebpackで一つのjsファイルに圧縮することで開発中はモダンな記法を利用することが可能になります。
参考記事
[GAS] TypescriptでGoogle Apps Scriptの開発を加速する
Google Apps ScriptをTypeScriptで書いてWebpackでbundleする
使い方
プロジェクトをクローンしてパッケージをインストールしておきます。
git clone https://github.com/stin-dev/gas-ts-template <your-project-name>
cd <your-project-name>
npm install
gitのリモートURLを書き換えておきます。
git remote set-url origin git@github.com:<your-account>/<your-repository-name>.git
claspで新しいGASプロジェクトを作成します。
clasp create --type standalone --title "Your GAS Project Name" --parentId "1D_Gxyv*****************************NXO7o" --rootDir ./dist
Webコンソールに新しいプロジェクトが追加されます。
実行する関数はsrc/index.ts内のglobalオブジェクトに挿入していきます。
global.hello = () => { console.log("Hello GoogleAppsScript!"); }
こうすることでWebコンソールでhello関数が実行可能になります。
GoogleAppsScriptは処理の定期実行をしたりGoogleの種々なサービスと連携できて便利ですが、Webエディタで書くのは非常に苦痛です。
TypeScriptを導入することでコーディングの自動補完も効くしWebpackでフォルダ分割もできるし今後は楽に開発できそうです。