More than 3 years have passed since last update.

Visual Studio Code + clasp で Google Apps Script 開発（Windows編)

Last updated at 2020-02-07Posted at 2020-02-07

はじめに

Google Apps Script の開発するうえで、clasp を導入することでWebエディタでの開発に比べて開発効率が大きく向上します。

ここでは clasp の導入方法について説明していきます。

ソースコードがローカルに存在するので、バージョン管理が簡単！
好きなエディタで開発できる！
コードハイライト
より向上した Intellisense (自作のメソッドも Intellisense の対象に)
JS5以降で導入された新しい機能が一部利用可能(clasp push した時に自動的に変換される)
- アロー式
- const/let による変数宣言
- などなど
TypeScript でプログラムを記述することも可能

Visual Studio Code をインストールします。
- Visual Studio Code については省略。
Node.js をインストールします。
- https://nodejs.org/en/download/ から環境にあったものをダウンロードし、インストールします。
- npm コマンドにパスが通っていることを確認します。
```
> npm --version
6.12.1
```
  - 上記のようにバージョンが表示されればOKです。
  - コマンドが見つからない場合は、Node.js をインストールしたディレクトリに npm.cmd が存在するはずなので、環境変数 PATH に追加して再度上記コマンドを実行し確認します。
以降のコマンド作業はすべて Visual Studio Code のターミナルから行います。
- ショートカット(Ctrl+Shift+@)、またはメニューから ターミナル - 新しいターミナル を実行することで新しいターミナルが起動します。

> npm install @google/clasp -g
...
+ @google/clasp@2.3.0

> clasp --version
2.3.0

上記のようにバージョンが表示されればOKです。
コマンドが見つからない場合は、clasp へのパスを環境変数 PATH に追加して(コマンドプロンプトを一旦終了後に)再度上記コマンドを実行し確認します。

ここまでは最初に１回だけ行います。

Google アカウントにログインします。接続するGoogleアカウントが変わるごとに作業が必要です。

> clasp login

> clasp logout

もしくは、%USERPROFILE%\.clasprc.json を削除します。

ここからは Google Apps Script プロジェクトごとに作業が必要です。

開発プロジェクトで使用するディレクトリを作成し、以降はこのディレクトリで作業します。
ここでは C:\workspace を作業ディレクトリとし、ソースは ./src に保存するものとして話を進めます。

> mkdir C:\workspace\src
> cd /d C:\workspace

> npm init -y

これで、作業ディレクトリに package.json が作成されます。

> npm install @types/google-apps-script -S
...
+ @types/google-apps-script@1.0.10

作業ディレクトリの node_modules\@types\google-apps-script 以下に定義ファイルがインストールされます。

> clasp create --type standalone --title testApp --rootDir ./src

実行すると作業ディレクトリに以下の２ファイルが作成されている。

{
    "timeZone": "Asia/Tokyo",
    "dependencies": {
    },
    "exceptionLogging": "STACKDRIVER"
}

> clasp open

> clasp push