Google App Scriptの開発をClasp & Typescript & VSCodeでやるための準備

Posted by roadman on Monday, December 24, 2018

TOC

  • Google App Scriptで開発する機会があったので、claspを使ってみることにした。
  • nodeはインストールされている前提です。

claspをインストール

  • Google App Scriptのプロジェクトをローカルで開発するのに便利なツール。
    • これがあるとclasp pullとかclasp pushとかでカジュアルな開発ツールのようにGASコードが扱える。
    • typescriptのトランスパイル機能もあり、素のjavascriptを書きたくない勢(自分)としては必須ツール。
$ npm i @google/clasp -g

googleにログイン

  • claspインストール後にclaspでGoogle App Scriptを動作させるアカウントにログインする。
$ clasp login
  • ブラウザが起動してgoogleアカウントのログイン画面になるので普通にログインする。
  • login後、以下のページにGoogle App Scriptの機能をONにしておこう。しておかないとGASがサーバ上で使えない。

typscriptをインストール

  • typescriptで開発したのでtyepscriptも入れておく。tslintも一緒に。
$ npm i typescript -g
$ npm i tslint -g

プロジェクトを用意

  • プロジェクトフォルダを作っていく。typescriptで開発したいので、@types/google-apps-scriptも入れる。tslintは必ず入れよう!
  • srcはrootDirではなく、./src配下に入れる設定でclasp createする。
$ mkdir sample
$ cd sample
$ npm init -y
$ npm i @types/google-apps-script -S
$ tslint --init
$ mkdir src
$ clasp create helloworld --rootDir ./src
  • clasp crateするとappsscript.jsonが作成される。rootDirが./srcになっていることを確認。
{
    "scriptId":"****************************",
    "rootDir":"./src"
}
  • とりあえずこの時点でgitでfirst commitしておこう。
$ git init
$ git add .
$ git commit -m "first commit"

claspでコードをpushする。

  • 早速コードをpushしてみよう。今回は、ローカルで1から作っているが、すでに既存のコードがサーバ上にある場合はgit cloneのようにclasp cloneで紐づけることもできる。
  • ./src/Code.tsを作る。とりあえずhello,world出すだけでいい。
function main() {
  console.log('Hello World');
}
  • ログはLoggerモジュールで出すこともできるし、普通にアプリ書く場合はそっちの方が素性が良いのだが、今回はstackdriverにログを出したいのでconsole.logを使う。
  • 早速pushしてみよう。
$ clasp push
  • 簡単だ。これだけでpushは完了する。ts(typescript)で書いたコードがトランスパイルされて、サーバ上にCode.jsとして配置される。

typescript用のgitignoreを配置

vscodeのextensionを入れる

typescript用のedtorconfigを配置

終わり

  • あとはvscodeでガンガンコードを書いて、clasp pushするを繰り返すだけ。
  • typessriptを簡単に扱えるようになって、ほんと素敵。。。