【GAS】Google Apps ScriptでTypeScriptを使う

はじめに

今回はGoogle Apps ScriptでTypeScriptを使えるように設定をする記事になります！

私は普段C#を使っているのでGASは本当に便利ですごいと思いますが、JavaScriptを書くのが辛い…となってしまいます。

どう頑張っても動的型付けに拒否感がでてしまうんですよね。

ただTypeScriptを使えるようにできる方法があるという事で、本当に嬉しかったです。

というわけで早速やっていきましょう。

claspを導入する

claspはGoogleがリリースしたGASをローカルで開発できるようにしたツールです。つまりVisual Studio Codeなどの使いなれたエディタでコーディングできるというわけです。

また今回目的のTypeScriptを使うためには必須っぽいので、導入しちゃいましょう。

コマンドプロンプトやPowerShellなどでこちらのコマンドを打ち込みます。

> npm i @google/clasp -g

これでclaspがインストールできます。またnpmが入っていない方は調べて入れてみてください。

ログインをする

claspはグーグルアカウントと紐づけるためにログインが必要です。

> clasp login

ブラウザが開いてどのアカウントと紐づけるか聞かれるので、好きなものを選択，許可をすればＯＫです。

またこれらの情報は~\.clasprc.jsonに格納されるみたいですね。

プロジェクトを作成する

自分の好きな場所にディレクトリを作成しておくと見やすくて良いと思います。

> mkdir sample
> cd sample

プロジェクトを作成するにはこちらのコマンド。

> clasp create sample

しかしこのようなエラーが出てきてしまいました。

User has not enabled the Apps Script API. Enable it by visiting https://script.google.com/home/usersettings then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.

この指示の通り、https://script.google.com/home/usersettingsにアクセスして許可をしましょう。

もう一度打ち込むと成功できるはずです。

それぞれの中身はこんな感じ。
〇.clasp.json

{"scriptId":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}

〇appsscript.json

{
  "timeZone": "America/New_York",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER"
}

timeZoneはAsia/Tokyoに変更しても良いでしょう。（しなくても大丈夫ぽい）

そしてブラウザで開きたいときはこちらのコード。

> clasp open

pullする

これはGitを扱ったことがある人なら分かると思いますが、リモートにあるデータをローカルに持ってきます。

コマンドはこちら。

> clasp pull

pushする

ローカルで更新したものをアップロードするにはpushをします。

ただその前に不要なファイルのアップロードをさけるために.claspignoreが作成した方がよいでしょう。いわゆる.gitignoreのclaspバージョンみたいなものですね。

〇.claspignore

**/**
!*.js
!*.ts
!appsscript.json

そしたらこのコマンドでpushをします。

> clasp push

TypeScriptを使う

早速本題のTypeScriptを使ってみましょう。といっても実はclaspを導入した時点でやる事は終わっているんです。

ローカルにある〇〇.jsを〇〇.tsにリネームし、TypeScriptを書いてみましょう。

const text: String = "Hello, World!"

function hello(): void{
  Logger.log(text);
}

これをpushしてブラウザ上で確認してみると…。

// Compiled using ts2gas 3.4.4 (TypeScript 3.6.4)
var exports = exports || {};
var module = module || { exports: exports };
var text = "Hello, World!";
function hello() {
    Logger.log(text);
}

補間が全然されない

先程のコードを書いていて、おそらく「全然補間してくれないやんけ」と思ったのではないでしょうか。

これは GoogleAppsScript 固有クラスの補完を行うために TypeScript 用の型定義ファイルを追加することで解決できます。

npm install -S @types/google-apps-script

さいごに

TypeScriptが使えるようになっただけでなく、Visual Studio Codeでコーディングできるようになったりもう最高ですね。

まだまだGASの魅力から逃れられなさそうです！