なんでGoogle App Script開発においてClasp + Typescriptが最高なのか説明する

# はじめに
私はこの記事をゴリゴリのエンジニアではなく、 **仕事上仕方なくGASを触っているエンジニア業務がメインでない方** に是非読んでいただきたいと思っています
GASについてググると公式リファレンスを見た方が早いのでは？と思う記事や、同じような事柄の記事が散見されたため、GASについて困っている人は多いが、エンジニア層の知見が埋もれている/少ない印象をもったためです
ClaspやTypescriptを使うことによって、どう楽になるかを知ってほしいです


# Claspってなに？
[Clasp](https://github.com/google/clasp)とは、端的にいうとGAS開発をローカル環境で出来るように支援してくれるコマンドラインツールです

通常のGAS開発は、以下のようなWEBページ上で開発します
<img width="434" alt="スクリーンショット 2020-08-09 14.07.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439627/15640ccb-f1d9-0aae-ddd3-f85f97aebb32.png">

この開発方法にはいくつかの不都合があります

1. ネットワークがオフラインでは開発ができない
1. コード履歴管理（e.g. git, svn）を行いたい時、コードをコピペするなどでしか出来ない
1. 作成されたコードの配布、環境のコピーに手間がかかる

これらはローカル環境（自分のPCマシン）で開発することで解決できます
`1`に関しては言わずもがな（ただしローカル環境で動作の確認が出来るわけではありません）、手元にコードがあればGit管理することも容易なので`2`も解決できます。そうすると複数人開発やトラブルシュートに大変役立ちます

Claspにはいくつかのコマンドがあり、配布、コピーが容易です

- `clasp clone`: プロジェクトのコピーをローカルにコピーします
- `clasp push`: リモートのコードをローカルのコードで更新します
- `clasp pull`: リモートからプロジェクト情報を取得し、ローカルファイルを更新します

またClaspは`Typescript`を正式にサポートしており、特に注意点なくTSで開発しきることが可能です
TSのファイルを`clasp push`することで、リモートにはJSコンパイルされたコードが配置されます

またClaspはRunコマンドもあり、スクリプトの実行のためにページを開く必要もなくなったりします

# Typescriptってなに？
Typescriptとは、Google App Scriptに互換性があるJavascript、それをより開発しやすくすることを目的とした言語です。TSのコードに対して`コンパイル`ということをするとJSのコードが生成されます。よってGAS上でも動くコードが生成できるんですね

Typescriptは**型**という情報を管理・参照・利用できます。つまリTSを書きながらファレンスを確認できるし、違反している（バグがある）コードが分かりやすくなります

#### どんな関数が存在するかコードを書きながら把握できるし
<img width="459" alt="スクリーンショット 2020-08-09 15.00.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439627/0f27d0a6-e4dc-cb96-a21a-05792fb7b6e7.png">

#### そのメソッドが何の引数を必要としていて、何を返してくれるかもわかるし
<img width="888" alt="スクリーンショット 2020-08-09 15.08.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439627/d2e4bdc7-a06c-df1d-2a73-501beb87b846.png">

#### 引数の型が正しくないときに警告を出してくれるし
<img width="848" alt="スクリーンショット 2020-08-09 15.02.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439627/0f4ae2b5-f676-9050-c33b-06712c9a02b8.png">

#### 自分で書いたメソッドにも型を付けられる
<img width="537" alt="スクリーンショット 2020-08-09 15.06.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439627/3daaee3d-4f18-a829-6244-650d355ad650.png">

このように型の情報があるだけで、開発効率が増しバグを事前に検知することが可能になります
WEB上でもサジェスト機能はありますが、自分で開発したメソッドではサジェストされないです。動作検証済のメソッドを他のプロジェクトでも使いまわすことが容易になりますね

# 別に特別すごいって訳じゃない。ただ最高だってだけだ

GASを使えばGoogleのそうそうたるアプリケーションを組み合わせて様々なことが出来ます。故に大規模になりがちなこともあるます
特にSpreadsheetなんかでは作成者一人だけがその仕組を把握するブラックボックスになることもありがちですね

Typescriptを使って入出力がはっきりしたバグが少ないコードを書き、Claspを使って誰でも複製・共同編集可能な状態に保つことで業務フローを一般化させましょう


# 導入

さてここから実際の導入を説明します

## Typescriptをローカル開発
IDE、つまり開発Editorとしては[VSCode](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)をおすすめします
理由は、特に設定などは必要なくTypescriptを書き始めることができるからです

ただし後述するライブラリのインストールのためにNode.js(とNpm)をインストールしましょう
[Node.jsをインストール](https://nodejs.org/ja/)すると勝手にnpmがついてきます

## 必要なライブラリの準備

Node.jsがインストールできると、npmというコマンドも使えるようになります
ターミナルを開き、好きなフォルダー上に移動し以下のコマンドを実行します

```shell
npm init -y
npm install --save-dev @types/google-apps-script typescript
```

vscode上で`index.ts`を作成し開いて以下のコードを貼り付けて、`SpreadsheetApp`などにマウスオーバするといろいろな情報が得られます

```index.ts
const main = () => {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
};
```

Macであれば`commnad`ボタン押＆クリックもいいですね

## GASに必要なファイルを作る

`clasp create`コマンドを実行します。今回は`sheets`の選択肢を選んで下さい
<img width="224" alt="スクリーンショット 2020-08-09 17.53.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439627/fcecfc09-6246-34ae-0768-8123d78c04a0.png">

必要なファイル２つ`.clasp.json`, `appsscript.json`が生成されています
`clasp open`で紐づくGASページが開きます

## Typescriptで書く!

`.clasp.json`に`"fileExtension": "ts"`を追記してください

```json
{
  "scriptId":"xxxxxxxxx",
+  "fileExtension": "ts"
}

```

`index.ts`もいい感じに書き換えましょう

```index.ts
const main = () => {
  Browser.msgBox('hello');
};
```

## 実行

`clasp push`を実行し、終了したら`clasp open`を実行します。GASページが開きます

<img width="572" alt="スクリーンショット 2020-08-09 18.07.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439627/5d70cc53-87ec-a830-7320-57be7e2f89b1.png">

実行ボタンを押しますと、最初のみ認証が求められます
`許可を確認`→`アカウントを選択`→`詳細`→`〇〇（安全ではないページ）に移動`→`許可`
もう一度Spreadsheetを開き直したり、関数を実行したりするとメッセージボックスが開くはずです

<img width="371" alt="スクリーンショット 2020-08-10 3.53.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439627/da185999-e45f-1fa9-f745-2a72266d5bd4.png">


## 次からは
というような感じで、TSを書く→clasp pushする→実行し動作確認する、を繰り返して開発していきます


# 終わりに
私はある程度の規模のGASを書くときは、この２つをベースに開発し始めるとおもいます
あなたに良きGAS開発ライフを！

## References
- https://github.com/google/clasp
- https://developers.google.com/apps-script
- https://typescript-jp.gitbook.io/deep-dive/getting-started