GASをClaspとTypescriptでローカル開発してみた。(Clasp / Typescript / TSLint / Prettier)

7 min readJul 21, 2019

Clasp / Typescript / TSLint / PrettierでGASのローカル環境開発をやってみましたのでその手順を含め執筆することにしました。

# GASとは

Google Apps Scriptの略でGoogleが提供するサーバーサイド・スクリプト環境です。 GASはGoogleが提供するあらゆるサービス(GmailのみならずGoogle Appsとか、現在はG Suite)を統合処理することができます。

今回はGoogle SpreadSheetとGoogle FormのGoogleサービスをGASを利用して連携し試していきます。

Apps Script | Google Developers

Create add-ons for Google Sheets, Docs, Slides, or Forms, automate your workflow, integrate with external APIs, and…

developers.google.com

# Claspとは

ClaspはGAS開発を提供する専用のエディターではなくローカルの開発環境を提供してくれるモジュールです。

google/clasp

🔗 Command Line Apps Script Projects. Contribute to google/clasp development by creating an account on GitHub.

github.com

# 事前に必要な環境

Github, Clasp, NPM(node)

Claspをnpmで事前にグローバルインストールします。

$ npm i @google/clasp -g＊nodeをインストールしていない場合は事前にインストールしてください

# 作成する仕様

Googleフォームで投票を集計するフォームを新規作成
フォームに共有ユーザを設定し、集計時に投票メールアドレスを集計
事前作成したスプレッドシートをフォームに紐付け回答先に指定
Slackで通知をする

# 作成手順

作成後のプロジェクトの構成は以下の様になります。

clasp-form-spreadsheet-app
|-- src
|   |-- appsscript.json     // プロジェクトのマニフェストファイル
|   |-- createForm.ts       // 新規フォームを作成
|   |-- index.d.ts          // GAS Library用のローカル型定義ファイル
|   `-- slack.ts            // slackにメッセージを送信する
|-- package-lock.json
|-- package.json
|-- tsconfig.json
`-- tslint.json

# Claspによるローカル環境構築

事前にインストールしたClaspコマンドでプロジェクトを作成する。

$ clasp login // googleアカウントでログインする
$ clasp create clasp-form-spreadsheet-app // google formを基盤に作成
? Clone which script? (Use arrow keys)
❯ standalone
  docs
  sheets
  slides
  forms
  webapp
  api

clasp1.7からプロジェクト作成時に選択肢が設けられたので今回はstandaloneを選択する、standaloneではGASスクリプトプロジェクトが作成されるがformsやsheets, docsなどでは新規で各シートが作成されGASプロジェクトが紐づいた状態のコンテナバウンドな開発を開始することができます。

これでappsscript.json と clasp.json が作成されます。

# Typescriptな開発環境を用意する

先ほどの手順で作成したclasp.jsonの設定を変えます。

scriptIdに任意に紐付けるフォームのスクリプトIDを、rootDirには作成後のプロジェクト構造の通りに開発するプロジェクトのjsファイルを配置します。

プロジェクトのルートディレクトリにてTypescriptに必要なパッケージを導入していきます。まずはpackage.jsonを作成します。

$ npm init -y   // package.json作成
$ npm install @google/clasp tslint -D  // claspのパッケージとtypescriptのlintを追加
$ npm install @types/google-apps-script -S  // gasの型定義パッケージ
$ tslint --init // tslint.jsonを作成

ここまででTypescriptの開発環境を構築することができました。
追加でTypescriptなどのjsコードをフォーマットしてくれるprettierもインストールします。

$ npm install prettier tslint-config-prettier tslint-plugin-prettier -D

tslint-config-prettierはTSLintの設定のうちPrettierと衝突するものを無効化するパッケージで、 tslint-plugin-prettier はTSLintの設定のコードチェック時にPrettierのルールもチェックしてフォーマットしてくれます。(Prettierのルールを優先する)

上記のインストールがtslint.jsonに設定を記載していきましょう。

設定が完了したら開発環境の構築が完了しました。
次に実際にコードを書いていきましょう。

# GASコードを書いていく

実際に作成する仕様に基づいたコードを書いていきます。

src配下に createForm.ts ファイルを作成します。
完成したコードは以下の様になります。

createForm.ts

slack.ts

ポイント
１. GASにライブラリ「Moment.js」を導入

$ clasp open

上記で開いたブラウザのエディター画面にて `リソース > ライブラリ`にて「ライブラリを追加」フォームにてMoment.jsを追加する
Moment.jsを追加するために `MHMchiX6c1bwSqGM1PZiW_PxhMjh3Sh48` をフォームに記載して追加する。追加ができたらバージョンを指定して保存する。

ライブラリの追加ではローカル開発に追加したライブラリを落とすことができないため appsscript.jsonのマニフェストの更新と仮の型定義を行う必要があります。

今回はindex.d.tsを作成し、Moment.jsの型づけを行いました。

declare const Moment: {
  moment(arg?: any): any;
};

2 . SpreadSheetIDやSlack WebhooksURLはGASの環境変数に追加
バージョン管理する際に直接sheetIDやwebhookURLを管理することや数カ所に直接ハードコーディングすることに抵抗感があるためにGASでは環境変数を設定できることができます。
ファイル > プロジェクトのプロパティ
を選択し、スクリプトプロパティのタブからキー、バリューを設定することで環境変数を設定することができます。

# まとめ

GASでローカル開発をやってみました。
これまでふわっとブラウザのエディタ上で動かしていましたが今後複数人で開発するためのプロジェクトの設定やライブラリの使い方やプロパティの利用方法などを学ぶことができました。

Githubで管理することでCircleCIなどのCI/CDの連携周りも可能になるためより開発環境を整えることもできそうです。