テクノロジの無駄づかい

日々の「ステュディオス」を求めて遠回りしがちなエンジニアの記録

GAS を Typescript でリファクタした

以前、GASをWebpackとBabelでモダンに実装した話を書いた。

hero.hatenablog.jp

このエントリを要約すると次の通り。

  • Togglで記録した作業時間をRedmineの作業時間に登録するGoogle スプレドッドシートアドオンを作った。
  • google\/clasp を利用して、ローカルでコーディング、バージョン管理した。
  • ES6 でJSを書いて webpack + babel でGAS用にビルドするようにした。

Claspが Typescriptをサポートした

まあまあモダンなJSでGASを実装できる構成を確立したことで、今後はやりやすくなるぞと思ってから、半年ほど。

Claspで驚くアップデートがあった。v1.5.0でTypescriptをサポートしたのだ。

qiita.com

clasp pushコマンドを実行すると、Javascriptのコードを対応するGASプロジェクトファイルにアップロードしてくれるのだが、Typescriptのコードも自動的にコンパイルしてアップロードしてくれるようになったのだ。

もちろん、HTTP通信にはUrlFetchApp.fetchを使わないといけないとかGASプラットフォームの制約はあるものの、コードのシンタックスはTypescriptのものが使える。

つまり、次が使える。

型以外はwebpack+babelの構成でも実現していたので、それほど目新しさはないが、webpack も babel も必要なく、これまで通りのコマンドを使うだけでトランスパイルしてアップロードしてくれる。

Toggl2rm を移行してみた

これは便利そうだということで、以前作ったToggl2rmを移行してみた。

移行前後のコードは次の通り。

依存モジュールが激減

移行前はこんな数のモジュールに依存していた。

  • @google/clasp
  • babel-core
  • babel-loader
  • babel-preset-env
  • babel-preset-gas
  • eslint
  • eslint-config-airbnb-base
  • eslint-plugin-googleappsscript
  • eslint-plugin-import
  • file-loader
  • gas-webpack-plugin
  • html-webpack-plugin
  • webpack

それが、移行後は たったの3つ。

トランスパイルに必要な一切を @google/claspが担保してくれるので、 どんどんアップデートされるwebpackやbabelを追いかける必要もない。 その他必要なモジュールの組み合わせにも悩まされることもない。

@types/google-apps-scriptによってGAS固有のクラス群にも型チェックできるようになるし、VSCodeならばコード補完が使えるのでドキュメントを確認する回数も減るだろう。

いいことしかない。

コードの書き換え

もともとのコードがES6だったこともありコードの書き換えも少なかった。

  • 拡張子を*.tsに変更する
  • 各関数の引数と戻り値に型アノテーションを追加
  • tslintのエラー箇所を修正
  • 変数globalを削除

ほぼこれだけで移行完了だった。

結構、関数コメントに引数や戻り値について書き込んでいたけれど、やはりコードで定義できるほうが確実だと思った。 そして、コード補完が感動的に便利。

いいことしかない。

まとめ

claspでTypescriptを使うのは簡単。

趣味レベルで使っているGASのコードは作った後はそれほど頻繁にはいじらないと思う。そういうコードほど型アノテーションは恩恵があると思う。 また、ビルドの依存モジュールも少なくてコード以外のもののメンテナンスが最小化される。

GASの実装でTypescriptを使わない理由が見当たらない。