- Google App Scriptで開発する機会があったので、claspを使ってみることにした。開発環境のベースを用意するまでの手順をメモしておく。
- nodeはインストールされている前提です。
claspをインストール
- Google App Scriptのプロジェクトをローカルで開発するのに便利なツール。
- これがあると
clasp pullとかclasp pushとかでカジュアルな開発ツールのようにGASコードが扱える。 - typescriptのトランスパイル機能もあり、素のjavascriptを書きたくない勢（自分）としては必須ツール。
- これがあると
bash
$ npm i @google/clasp -g
googleにログイン
- claspインストール後にclaspでGoogle App Scriptを動作させるアカウントにログインする。
bash
$ clasp login
- ブラウザが起動してgoogleアカウントのログイン画面になるので普通にログインする。
- login後、以下のページにGoogle App Scriptの機能をONにしておこう。しておかないとGASがサーバ上で使えない。
typscriptをインストール
- typescriptで開発したのでtyepscriptも入れておく。tslintも一緒に。
bash
$ npm i typescript -g
$ npm i tslint -g
プロジェクトを用意
- プロジェクトフォルダを作っていく。typescriptで開発したいので、
@types/google-apps-scriptも入れる。tslintは必ず入れよう！ - srcはrootDirではなく、./src配下に入れる設定で
clasp createする。
bash
$ mkdir sample
$ cd sample
$ npm init -y
$ npm i @types/google-apps-script -S
$ tslint --init
$ mkdir src
$ clasp create helloworld --rootDir ./src
-
clasp crateするとappsscript.jsonが作成される。rootDirが./srcになっていることを確認。
appsscript.json
{
"scriptId":"****************************",
"rootDir":"./src"
}
- とりあえずこの時点でgitでfirst commitしておこう。
bash
$ git init
$ git add .
$ git commit -m "first commit"
claspでコードをpushする。
- 早速コードをpushしてみよう。今回は、ローカルで１から作っているが、すでに既存のコードがサーバ上にある場合は
git cloneのようにclasp cloneで紐づけることもできる。 -
./src/Code.tsを作る。とりあえずhello,world出すだけでいい。
src/Code.ts
function main() {
console.log('Hello World');
}
- ログはLoggerモジュールで出すこともできるし、普通にアプリ書く場合はそっちの方が素性が良いのだが、今回はstackdriverにログを出したいので
console.logを使う。 - 早速pushしてみよう。
bash
$ clasp push
- 簡単だ。これだけでpushは完了する。ts（typescript）で書いたコードがトランスパイルされて、サーバ上に
Code.jsとして配置される。
typescript用のgitignoreを配置
- ソースコードはgithubで管理するので、
.gitignoreとかも入れておく。gitignoreはtypescript公式のテンプレートをとりあえず置いておく。TypeScript/.gitignore at master · Microsoft/TypeScript
vscodeのextensionを入れる
- 開発エディタはVisual Studio Codeを使うので、typescript用のextensionも入れておく。
typescript用のedtorconfigを配置
- editorconfigはtypescript用のものを使う。
終わり
- あとはvscodeでガンガンコードを書いて、
clasp pushするを繰り返すだけ。 - typessriptを簡単に扱えるようになって、ほんと素敵。。。