Google Apps Script 開発環境構築

## 前提条件

javascript によるコードを実行できる環境として Google Apps Script は低コストな環境と言え、 手軽にWebアプリケーションやボットなどを作ることができます。ただし、現時点でサポートされている Google Apps Script の実行環境はjavascript1.6に1.7，1.8の機能を追加したもののようです。

[Built-in Google Services  |  Apps Script  |  Google Developers](https://developers.google.com/apps-script/guides/services/#basic_javascript_features)

さらに、Weｂブラウザ上の編集画面を利用してしまうとプロジェクトのバージョン管理やテストもやりにくく、チーム開発を行ったり一人開発でも長期間の場合に効率の低下は免れません。

こういった問題を解決するべく、モダンに npm によって管理されたプロジェクトを使って Google Apps Script の開発を行います。

## サンプルプロジェクト

[numa08/familly-calendar-notifier](https://github.com/numa08/familly-calendar-notifier)

## やり方

### 依存関係

環境を構築する上で欠かせない依存ツールは以下となります。

- babel-cli
- babel-preset-es2015
- babel-preset-latest

[Babel](https://babeljs.io/) を使って es6 で書かれたコードを google apps script でも動作するようにコンパイルします。

- babelify
- browserify
- gasify

[Browserify](http://browserify.org/) を使って Google Apps Script で `import/export` や `require` を利用できるようにします。[gasify](https://www.npmjs.com/package/gasify)は Google Apps Script でも `global` を利用できるようにするためのパッケージです。

- node-google-apps-script

cli から node のプロジェクトを Google Apps Script にアップロードするためのツール。

### ディレクトリ構成

環境を作るにあたりディレクトリの構成を考えます。開発のためのソースコードは`src`ディレクトリに配置していきます。BabelやBrowserifyを利用して生成されたコードは`build`ディレクトリ以下に展開しバージョン管理対象外とます。イメージとしてはこんな感じ。

```bash
├── README.md
├── build # 自動生成されたコード
├── gapps.config.json # node-google-apps-script の設定ファイル
├── node_modules
├── package-lock.json
├── package.json
└── src # ソースコードはここに書く
```

こういう構成になるようにセットアップをしていきます。

### セットアップ

`npm init`をして作業ディレクトリを作ります。

[danthareja/node-google-apps-script: The easiest way to develop Google Apps Script projects](https://github.com/danthareja/node-google-apps-script)のREADMEを読んで認証とかを終わらせて、作業ディレクトリに`gapps.config.json`を作ります。

```json:gapps.config.json
{
  "path": "build/generated/src",
  "fileId": "<google apps script のファイルID>"
}
```

また、Babelの設定を`.babelrc`に書きます。

```json:.babelrc
{
  "presets": ["es2015"]
}
```

### スクリプト

`package.json`にスクリプトを追加します。

```json:package.json
{
  "scripts": {
    "build": "mkdir -p build/intermediates/babel; mkdir -p build/generated/src; babel src -d build/intermediates/babel; browserify -t babelify -p gasify build/intermediates/babel/index.js -o build/generated/src/index.js",
    "test": "mocha --compilers js:babel-core/register src/*_test.js",
    "deply": "npm run build; gapps push"
  }
}
```

- build

ビルドスクリプトではBabelで`build/intermediates/babel`以下にコードを生成し、Browserifyで`build/generated/src`以下にコードを生成します。node-google-apps-scriptは`build/generated/src`以下のソースをアップロードしてくれます。

- test

今回は`src/*_test.js`がテスト対象としています。VSCodeでこういうファイル名にしておくとファイル名指定ジャンプのときに楽なんですよね。`mocha`の中で`import/export`を利用したいので`mocha --compilers js:babel-core/register`を指定しています。

- deploy

ビルドしてデプロイ

### .gitignore

バージョン管理をするときに対象外にしておきたいファイル達。とりあえず、[https://www.gitignore.io/api/node](https://www.gitignore.io/api/node)は含めておくものとしてそれ以外に次の内容を書き足す。

```\n:.gitignore
build
gapps.config.json
```

- build

自動生成されたコードが展開されるディレクトリはバージョン対象外にする。

- gapps.config.json

Google Apps Script のファイルIDなんかが書かれているので、オープンなリポジトリで開発をするときは対象画にしておいた方がforkとかできそう。クローズドなリポジトリの場合はその限りでもない。

### まとめ

Google Apps Script を es6 で開発できる環境を作りました。これでテストやバージョン管理ができるようになります。また、CLIを利用する公正なのでCIサービスとの連携なんかもお手軽に行うことができそうです。あとは、お好きなエディターで開発をするとより作業効率も上がるでしょう。ｼｭｯとWebアプリを作るときに Google Apps Script は便利そうですね。