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


  • Google App Scriptで開発する機会があったので、claspを使ってみることにした。開発環境のベースを用意するまでの手順をメモしておく。

  • nodeはインストールされている前提です。


claspをインストール


  • Google App Scriptのプロジェクトをローカルで開発するのに便利なツール。


    • これがあるとclasp pullとかclasp pushとかでカジュアルな開発ツールのようにGASコードが扱える。

    • typescriptのトランスパイル機能もあり、素のjavascriptを書きたくない勢(自分)としては必須ツール。




bash

$ npm i @google/clasp -g



googleにログイン


  • claspインストール後にclaspでGoogle App Scriptを動作させるアカウントにログインする。


bash

$ clasp login



  • ブラウザが起動してgoogleアカウントのログイン画面になるので普通にログインする。

  • login後、以下のページにGoogle App Scriptの機能をONにしておこう。しておかないとGASがサーバ上で使えない。




typscriptをインストール


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


bash

$ npm i typescript -g

$ npm i tslint -g


プロジェクトを用意


  • プロジェクトフォルダを作っていく。typescriptで開発したいので、@types/google-apps-scriptも入れる。tslintは必ず入れよう!

  • srcはrootDirではなく、./src配下に入れる設定でclasp createする。


bash

$ 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になっていることを確認。


appsscript.json

{

"scriptId":"****************************",
"rootDir":"./src"
}


  • とりあえずこの時点でgitでfirst commitしておこう。


bash

$ git init

$ git add .
$ git commit -m "first commit"


claspでコードをpushする。


  • 早速コードをpushしてみよう。今回は、ローカルで1から作っているが、すでに既存のコードがサーバ上にある場合はgit cloneのようにclasp cloneで紐づけることもできる。


  • ./src/Code.tsを作る。とりあえずhello,world出すだけでいい。


src/Code.ts

function main() {

console.log('Hello World');
}


  • ログはLoggerモジュールで出すこともできるし、普通にアプリ書く場合はそっちの方が素性が良いのだが、今回はstackdriverにログを出したいのでconsole.logを使う。

  • 早速pushしてみよう。


bash

$ clasp push



  • 簡単だ。これだけでpushは完了する。ts(typescript)で書いたコードがトランスパイルされて、サーバ上にCode.jsとして配置される。


typescript用のgitignoreを配置


vscodeのextensionを入れる


typescript用のedtorconfigを配置


終わり


  • あとはvscodeでガンガンコードを書いて、clasp pushするを繰り返すだけ。

  • typessriptを簡単に扱えるようになって、ほんと素敵。。。