【gas・vscode】GASをvscodeで編集する

初書：2021/04/24
mac : 11.2.3
vscode : 1.55.1
clasp : 2.3.0
gas : Chrome V8 ランタイムが有効

前書き

GAS を vscode でも編集できないかなぁと思ったら出来そうなのでメモ。

しかも vscode だと typescript を使用できるらしい。

前提

homebrew・node.js がインストール済み

npm init

node.js を使うのでとりあえず初期化。
作業を行うディレクトリにて、

% npm init -y

-yオプションをつけると、デフォルト設定を使用してくれるらしい。
パッケージ化するわけでも実行するわけでもないのでこれでいいかと。

clasp のインストール

vscode - gas を接続する方法として、clasp というものが存在しているらしいのでインストールする。

% npm install @google/clasp --save-dev

7 high severity vulnerabilitiesという表示。どうやら脆弱性が存在しているらしい。大丈夫なのだろうか…？¹

% npx clasp login

ブラウザが立ち上がり、ログインができれば完了。

プロジェクトをローカルに入れる

既に GAS を作成している場合は、プロジェクトをローカルに入れるところから始まるので、まずはダウンロード。

npx clasp clone --rootDir ./src プロジェクトID

これで、.clasp.jsonとsrcができる。

typescript にする

せっかく vscode で編集するので、typescript で編集したいですよね。
なので変更する。

・・・前に、念のためにバックアップ(git)を取っておく。

バックアップ(git)

% git init
% git add -A
% git commit -m "first commit"

git の話は過去に何回か書いたので説明は省略：
git : vscode で扱う git のあれこれ(個人メモ) - Qiita
【git】ターミナルで github と連携する - Qiita

ts-migrate のインストール

バックアップが取れたら、実際に変更していく。
今回調べたところ、ts-migrateなるものが存在しているらしいので、これを使用する。

まずはインストール

% npm install --save-dev ts-migrate

実行する

無事インストールが終われば、次は実行する

% npx ts-migrate-full src

バックアップを取ってますか？という警告と、続けるか聞かれるので y を、
コンパイラをどうするか聞かれるのでそのままエンターを
これで js ファイルが ts ファイルへと変換される。

結構変換時エラーが出た。これ修正大変そう・・・
あと引数とか型 any にしてくれるかと思っていたが、そんなことはなかった。基本的にコメントアウトでエラーを提示してくるだけっぽい。

補完機能を入れる

typescript には入力補完がある上、型宣言とかが必要になるので以下も入れる

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

API を有効にする

pull は可能なのだが、push をするには API を有効にする必要があるらしい。
なので設定する。
まずはhttps://script.google.com/homeにアクセス

その後、設定 →Google Apps Script APIをクリックし、オフをオンに変更
これだけ。

GAS との連携

あとは簡単。サーバー側のスクリプトを DL し、更新する場合は

% npx clasp pull

ローカル側のスクリプトをアップロード(アップロードは UL で通じるのだろうか？)し、更新する場合は

% npx clasp push

するだけ。

バージョン管理

バージョンを追加する

% npx clasp version "説明"

バージョンを確認する

% npx clasp versions

後ろに s があるかないかの違い

GAS の Google 謹製 CLI ツール clasp - Qiita

pushする際にファイル順を指定する

グローバル変数を使用する場合、GAS側でのファイルの上から順番に読み込まれるため、使いたい変数が使う場所より後にファイルがあると実行時エラーが出てしまう。
それを回避するために、claspはアップロードするファイルの順番を指定できるようになっている。

方法は簡単で、.clasp.jsonにfilePushOrderを追加する。

    "filePushOrder" : [
        "src/filename2.ts",
        "src/filename1.ts"
    ]

これで、filename2.tsが先頭、その次にfilename1.tsがアップロードされ、その後指定されていないファイルが一気にアップロードされる。

終わりに

脆弱性だけが気がかりだが、使いこなすと便利そう。

参考サイト：

VisualStudioCode で GoogleAppsScript を補完機能を使いながら開発する方法 - Qiita

JS から TS への移行ツール、ts-migrate を試してみた - Qiita

1. なお、npm audit fix や npm audit fix --force をしても消えないので今のところどうしようもないっぽい。そのため一応グローバルインストールではなく作業ディレクトリのみにインストールをした。
   インストールが終われば、連携できるように google にログインする ↩