い、い、、いっくし!!

各記事はkwskってコメントすると詳しく書き直します

The GAS開発 in 2016 その1

2018年に2016年の記事を書く そのくらい最近のWebまわりは展開が早い

Visual Studio Code, NPM, Node.jsを使って、Google Apps Scriptの開発環境のセットアップについてまとめる。 コードはEMCAScript 6(注)を使い、BabelによってGAS向けにトランスパイル、アップロードを自動化する。 また、テスト用のモックを作成し、Mochaによる自動テストが行えるようにする。

おまけとして、テスト用サーバサイド(Google側)の設定と、 Githubでのバージョン管理、APIキーが格納されたファイルをGithubへアップロードしない設定なども紹介する。

注: EMCAScriptのバージョンはあまり理解してません。アロー記法が使えるやつ

いいからお前の環境さらせって方はこちらをCloneしてどうぞ

github.com

全4回程度にまとめました。

第一回は、必要なソフトウェア・ライブラリのインストール

最初にVisual Studio CodeNode.js, Gitクライアントをインストール

通常インストールで問題なし。各オプションは好みに応じて

f:id:ixsiid:20180119194116p:plain

f:id:ixsiid:20180119194107p:plain

f:id:ixsiid:20180119194134p:plain

次にGithubリポジトリを作成

f:id:ixsiid:20180119194326p:plain

.gitignoreは「Node」にしておくこと (後々の設定が簡便なため)

とりあえずMITライセンスで作成

f:id:ixsiid:20180119194503p:plain

今作った空のリポジトリを clone, そのままNPMの設定と必要になるライブラリをインストール

リポジトリURLやユーザー名は各自で読み替える

C:\Users\ixsiid>git clone https://github.com/ixsiid/TheGAS2016.git
Cloning into 'TheGAS2016'...
remote: Counting objects: 5, done.
remote: Compressing objects: 100% (4/4), done.
remote: Total 5 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (5/5), done.

C:\Users\ixsiid>cd TheGAS2016

NPMの設定。基本は初期設定で問題なし。

C:\Users\ixsiid\TheGAS2016>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (thegas2016) thegas2016
version: (1.0.0) 1.0.0
description:
entry point: (index.js) index.js
test command:
git repository: (https://github.com/ixsiid/TheGAS2016.git)
keywords:
author: IXSIID
license: (ISC) MIT
About to write to C:\Users\ixsiid\TheGAS2016\package.json:

{
  "name": "thegas2016",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ixsiid/TheGAS2016.git"
  },
  "author": "IXSIID",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/ixsiid/TheGAS2016/issues"
  },
  "homepage": "https://github.com/ixsiid/TheGAS2016#readme"
}


Is this ok? (yes) yes

babel関係のインストール これがないと、最新の記法がGASで使えない

C:\Users\ixsiid\TheGAS2016>npm install --save-dev babel-core babel-loader babel-polyfill babel-preset-env babel-preset-es2015 babel-preset-gas babel-register babelify browserify webpack

+ babel-register@6.26.0
+ babel-loader@7.1.2
+ babel-core@6.26.0
+ babel-preset-env@1.6.1
+ babel-polyfill@6.26.0
+ babelify@8.0.0
+ babel-preset-gas@1.0.0
+ browserify@15.2.0
+ webpack@3.10.0
added 9 packages in 10.749s

続いて、GASを使うためのライブラリ

C:\Users\ixsiid\TheGAS2016>npm install --save-dev gas-local gas-webpack-plugin gasify sync-request

+ gasify@0.1.2
+ gas-local@1.3.0
+ sync-request@4.1.0
+ gas-webpack-plugin@0.2.1
added 36 packages in 5.382s

自動テスト環境のためのライブラリ

C:\Users\ixsiid\TheGAS2016>npm install --save-dev intelli-espower-loader mocha power-assert watchify

+ power-assert@1.4.4
+ mocha@5.0.0
+ intelli-espower-loader@1.0.1
+ watchify@3.9.0
added 4 packages in 7.448s

第一回はここまで。 この状態で、ディレクトリには .git, node_modules, .gitignore, LICENSE, package.json, package-lock.json, README.md ファイルができているはず。

f:id:ixsiid:20180119195815p:plain

次回は、Google側のファイルの準備と、アップロード、GASの実行の準備