VS CodeでGASの開発環境を構築する

概要

Visual Studio Code（VS Code）上で、GASの開発環境を構築する方法。

■目次

• インストール
  • VS Code
  • Node.js（npmを含む）
  • package.json（の作成）
  • TypeScript、TSLint
  • GASの型定義ファイル
  • clasp
• claspの使い方
• VS Codeの実行エラーへの対処

インストール

Visual Studio Code

Node.js

npmを使う上で必要。モジュールを管理するツール。

package.jsonの作成

一連の作業で必要になるpackage.jsonを作成しておく。
terminalでローカル上の作業フォルダに移動します。（PS:c:\Dir_XXX\DirXXX\のようになっている場所が作業フォルダになっているかを確認。）
terminalで以下を実行。package.jsonが作業フォルダに作成される。

npm init --y

TypeScriot、TSLinstのインストール

まず、.tsファイルを読み込むために、typescriptとtslintをインストール。

npm install -g typescript
npm install -g tslint

GASの型定義ファイル

次に、GASの型定義ファイルを読み込むために、VS Code上のTerminalから以下を実行。

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

clasp

claspは、GASのCLI。VS Code上のterminalから作成したコードをGoogle Drive上にPushできる。プロジェクトの新規作成も可能。
VS Codeのterminalで以下を実行。

npm install -g @google/clasp

claspの操作

基本操作

// ログイン
clasp login

// ログアウト
clasp logout

// プロジェクトの新規作成
clasp create "TITLE"

// push
clasp push

// pull
clasp pull

// ブラウザでプロジェクトを開く
clasp open

ログイン後、ブラウザが起動し、アクセス許可を確認される。この際、複数のGoogleアカウントを持っているとその一覧が表示される。しかし、デフォルトのアカウント以外で認証しようとするとエラーが出る。
※デフォルトアカウント以外で認証する方法をご存知の方がいたら教えてください…

初めてclaspでGoogle Driveを操作する場合、以下のようなエラーが出る事がある。この場合、示されているURLにアクセスしてAPIを有効化する。

Error: Permission denied. Enable the Apps Script API:
https://script.google.com/home/usersettings

VS Codeの実行エラーへの対処

claspの実行にあたって、下記のようなエラーが出る事がある。

clasp : このシステムではスクリプトの実行が無効になっているため、ファイル 
 C:\Users\USERNAME\AppData\Roaming\npm\clasp.ps1 を読み込むことができません 
。詳細については、「about_Execution_Policies」(https://go.microsoft.com/ 
fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ clasp push
+ ~~~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

これは、PowerShellがスクリプトの実行をデフォルトで禁止しているために起こるエラー。
実行ポリシーを変更し、スクリプトの実行を許可する事で回避できる。デフォルトの設定を「許可」にすることもできるが、セキュリティ面で危険性があるため、現在のプロセスでのみ許可するようにスコープを設定する。
以下を実行。

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process

.clasp.jsonの設定

公式説明はこちら：
https://github.com/google/clasp#project-settings-file-claspjson

clasp.json

{
  "scriptId": "",
  "rootDir": "build/",
  "projectId": "project-id-xxxxxxxxxxxxxxxxxxx",
  "fileExtension": "ts",
  "filePushOrder": ["file1.ts", "file2.ts"]
}

設定をしておいたほうがいい項目は以下：
roorDir
どこのディレクトリに居てもとりあえず「clasp push」してしまう癖がつくため、意図しないファイルまでpushしてしまう事故が起きます。
それを未然に防ぐため、push対象とするディレクトリを指定しておきます。

filePushOrder
ファイルをpushする順番を指定します。GASのエディタ上でファイル一覧に表示される順番を指定する事と同義です。
エディタを開いた際に、デフォルトで開かれるファイルは一覧の一番上のファイルです。実行したいファイルが一番上に無いと、毎回ファイル一覧から実行したいファイルを開く手間が発生します。この手間を省くための設定です。
GASを実行する上では設定しなくても問題ない。

リファレンス

★超重要

参考