ES6 で GAS を書きたくて clasp を導入した

Google Apps Script Advent Calendar 2018 の 7日目です。昨日 6日目は tryforthさんの「CDN版Vue.jsで作るGoogleSpreadsheetお手軽サイドバー」でした。

GAS を ES6 で書きたい……

Googla Apps Scriptは、JavaScript的な文法で気軽に書けるのでありがたいですね。ただ、現時点では ES6 (ES2015〜) の記法が使えないんですよね…… ES5 相当でがんばって書く必要があります。なので、const宣言もアロー関数もテンプレートリテラルも使えません。

いやいやいや、それでも！ ES6で書きたいんじゃ！！

どうすればいいんでしょうか。やっぱり、ローカルで ES6 で書いて、babel などでビルドする環境用意して、ビルド結果をサーバに送る感じになるのでしょうか。なるのでしょうね。うう…… 環境構築とかめんどくさいですね……

f:id:matsuoshi:20190211140335p:plain

clasp + TypeScript の組み合わせを試す

clasp という手があった。

https://github.com/google/clasp

claspとは、Google謹製の GAS 開発環境です。ローカルで GASのコードを書いて、ターミナルからコマンドを入れればサーバへコードを転送してくれます。逆に、サーバ上のGASのコードをローカルに引っ張ってくることも可能です。ローカル側で git でコード管理などもできるようになり、いい感じです。

そして clasp は、TypeScript にも対応しています。ローカルで TypeScript で書いたコードを、サーバへの転送時に勝手にトランスパイルしてくれるのです。

TypeScript をガッツリ使うかどうかは別として、TypeScript は ES6 の文法のほとんどを包括してくれています、なので、clasp は ES6 的に GAS を書く環境としても使えそうじゃないですか。

やってみる

やってみた。

まずは適当なディレクトリに移動し、clasp を npm でインストール。

$ npm i -D @google/clasp

インストールできたら GASにログイン。それからプロジェクトを作成し、サーバ上からローカル側へファイルの同期 (pull) を実施。

$ clasp login
$ clasp create es6-sample --rootDir ./src
$ clasp pull

clasp create 時のオプション --rootDir は、ローカル側でのソースコードの置き場所を設定しています。デフォルトではプロジェクトのルートフォルダになるんですが、上記のように別の場所を設定しておいたほうが、管理上分かりやすいかと思います。

以上ここまでで環境設定は完了。ラクだ。

コードを書く

で、適当に ES6 でコードを書いてみます。clasp には TypeScript として扱ってもらえるよう、ファイルの拡張子は .ts で。ここでは src/example.ts としました。

// src/example.ts

function myFunction() {
  const result = example('ES6');
  Logger.log(result);
}

const example = (name) => {
  return `Hello, ${name}!!!`;
};

書けたら、サーバ側に転送 (push) します。