clasp事始め2 - いてづきブログ

前回の続き

iteduki.hateblo.jp

前回はとりあえずローカルで書いたコードがclasp経由でそのままGoogleドライブ上のGASファイルとして上がることを確認した。

しかしあくまで書く場所がローカルになっただけでES6記法とかもそのまま上がってしまっていたのであまり意味がなかった。

TypeScriptを使う

claspはTypeScriptをサポートしている。
いろいろ調べていくと、

@types/google-apps-script を導入することでローカルでもGASの補完が効く
clasp pushするだけで自動的に.gsファイルにトランスパイルしてくれる

ということらしいので実際に試してみた。

試したことやハマったこと

環境の準備

claspのインストールと、TypeScriptでのGAS補完のインストール。

npm install @google/clasp --save-dev 
npm install @types/google-apps-script

いろんな記事を参照してると最初に1階層ディレクトリを掘ってたりするけど、VSCodeでやる場合、上記コマンドで作られるnode_moduleディレクトリがVSCodeで開いてるフォルダの直下にないと補完が効かない[要検証]

プロジェクトを作る

clasp create --type standalone --title clasp_ts_test --rootDir ./src

各オプションについて説明。詳しくはドキュメント参照。

--typeはdocとかstandaloneとか。指定しない場合は実行後に画面上で選択する。
--titleはプロジェクト名。指定しなかった場合現在のディレクトリ名がプロジェクト名になる。
--rootDirはGASプロジェクトで扱うファイルを保存するディレクトリ。指定しない場合はカレントディレクトリ。

--rootDirは指定しないとカレントに直接GASプロジェクトのファイルが入ってきてわかりにくくなるので指定したほうが良さそう。
あとから指定する場合は.clasp.jsonに"rootDir":"./src"を追加する。

これで.clasp.jsonファイルとsrcフォルダとsrcの中にappsscript.jsonが作られているはず。

TypeScriptでコードを書いてプッシュする

srcフォルダの中にcode.tsを作成して下記のようなコードを書いてみた。

function myFunction(){
  const spreadSheet = SpreadsheetApp.create('sample spread sheet')
  const sheets = spreadSheet.getSheets()

  sheets.forEach(sheet => {
    this.showMessage(sheet.getSheetName())
  })
}

function showMessage(message: string){
  Logger.log(message)
}

TypeScript素人なのでコードの内容については目をつむってほしい(^_^;)

保存したらclasp pushでアップロードして、clasp openでブラウザのGASプロジェクトページが開く。

すると、TSで書いたコードがトランスパイルされたものが表示される。

// Compiled using ts2gas 1.6.0 (TypeScript 3.2.4)
var exports = exports || {};
var module = module || { exports: exports };
function myFunction() {
    var _this = this;
    var spreadSheet = SpreadsheetApp.create('sample spread sheet');
    var sheets = spreadSheet.getSheets();
    sheets.forEach(function (sheet) {
        _this.showMessage(sheet.getSheetName());
    });
}
function showMessage(message) {
    Logger.log(message);
}

あとはこれを通常のGASプロジェクトと同じように実行して動かすことができる。

ちなみに、この状態でclasp pullをしてしまうとコードがトランスパイルしたものに置き換えられてしまうので注意（"fileExtension": "ts"を指定している場合）