VSCodeとClaspでGASプチ開発の環境作り(Javascript ES6)

やっぱり流行りはTypeScriptらしくて、GAS＋Claspの関係はTypeScriptでの環境構築は多いんだけど、Javascriptは見当たらない気がする
というわけで、自分の環境を書き残しておこう

1.VSCode

特に意識せずDLして使ってます。Unityソースもいじるので拡張それなり。

2.Clasp

Claspを入れる前に、
Node.JS
Npm
が必要。
Npmは別にインストールが必要かと思ったけど、本家バイナリだと一緒にインストールできるのね。
NodeJSってナニソレ、的な人はこれでよいかと。
Node入れるにはHomebrewをいれてnodebrewをいれてバージョンを管理して、というのがほとんどで、そこで引いちゃう可能性があるなぁ、と感じる

サーバ側の開発でNodeJSを使う人は指定されるバージョンがあったりするので、Node自身のバージョンを切り替える必要があり、上記をやるのは正しいのだけど、今回の場合などは本家バイナリでよいのではないかなぁ、と程度の差はあれ思ったり。

3.素の環境づくり

GAS側でプロジェクトを作るでも（clasp clone)、ローカルから作る（clasp create）でもプロジェクトのフォルダー上に
Code.js
.clasp.json
appsscript.json
がいる。ファイルが多くなりそうな場合は、rootDirの設定をする。（多くなくてもやったほうがきれいね）
以下すべてVSCodeのターミナルからの入力MyDirはそれぞれ自分の開発フォルダに置き換えてください

MyMac:MyDir$clasp clone --rootDir src
or
MyMac:MyDir$clasp create --rootDir src

4.GASのコード補完

GASのたくさんあるクラスを使うのにタイプミスをへらすために、コード補完の準備

package.jsonの準備

MyMac:MyDir$npm init --y

これでpackage.jsonができたり、NPMでNodeのパッケージをプロジェクトに入れる準備ができた

GASの定義ファイルの準備

npm i @types/google-apps-script --save-dev

これでTypeScriptのGASのクラス定義ファイルがプロジェクトフォルダにインストールされます。
そうTypeScriptの。。。

JavaScript(ES6)でも使えるようにjsconfig.jsonを作成

jsconfig.json

{
    "compilerOptions": {
      "target": "ES6"
    }
}

これでソース記載時に、GASのクラスのヘルプがでる、、はず。
（VSCodeのExtensionがいるかもしれないけど、もはやどれかわからず。。。）

4.設定ファイルをいじる

appsscript.json

場合によって追加が必要そうなのは２点

webapp

こちらは作ったスクリプトをWeb公開するパターンで必要。（前エントリ参照）

oauthScopes

こちらは、
・スタンドアローンスクリプトでDocumentやSpreadsheetを使う
・ビルトインスクリプトで他のSpreadsheetやDriveを使う
・とにかくUIを使う
際に権限設定として必要になる（こちらも前エントリ参照）
また、このファイルは、GASエディター上で「表示」→「マニフェストファイルを表示」で確認できる

.clasp.json

普通につくるとこんな感じ

scriptId

clasp.json

{
    "scriptId":"あなたのScriptId"
}

複数ファイルで作りたい人は以下エントリ追加

filePushOrder

clasp.json

{
    "filePushOrder": [
        "src/constants.js",
        "src/baseClass.js",
        "src/extendClass.js"
    ]
}

上から順番に変数定義の参照がされる。
余談；クラスをnewするときはClass定義は後ろでもOK、extendsするときは前じゃないとだめなのね

rootDir

なお、createやclone時にrootDirオプションつけてたら

clasp.json

{
    "rootDir" : "src"
}

のエントリが存在するはず。
また、つけわすれてても、自分で記載することも可能

package.json

こちらは一部便利なところを利用させていただく

  "scripts": {
    "web:deploy": "clasp deploy -i [deployId]",
    "web:push": "clasp push",
    "web:pull": "clasp pull",
    "web:open": "open 'https://script.googleusercontent.com/macros/s/[deployId]/exec?'"
  },

普段はpush、pullだけでよい気がする。web公開版の場合にdeployやらopenを入れとくと楽〜
（なお、openはMac版の話。Winはもってないのでわからないっす）
次にVSCodeの設定から

"npm.enableScriptExplorer": true

で、これを保存すると、VSCodeのNPMScriptのマドにコマンドが並ぶのでマウスでポチポチクリックで実行してくれる、と。

.claspignore

ファイルの操作をするアプリには必須のignore

**/**
!*.js
!*.html
!appsscript.json

忘れないように書いておきます