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を簡単に扱えるようになって、ほんと素敵。。。