Google App Script(GAS)をローカルで快適に編集して同期しよう！

Google App Script(以下GAS)、使ってますか？
Spreadsheetなんかにちょっとしたマクロ作るのとかに使うと思います。

ところでこのGASのオンラインエディタ、お世辞にも出来がいいとは言い難いですよね……
そんなに頻繁に使うわけではないから…と我慢していたのですが、いい加減に我慢の限界です！

そんな私や、あなたのために「[google/clasp](https://github.com/google/clasp)」というツールがあるので紹介です。

# clasp をインストールする
nodeの実行環境が必要です。
インストールがまだならインストールを済ませておいてください。
それではclaspをグローバルインストールしましょう（ローカルインストールでもいいですけど）

```ターミナル
 npm i @google/clasp -g  
```

# clasp にログインする
メインのブラウザが連携したいGoogleのアカウントにログインしていることを確認してください。
G Suiteのユーザー設定画面からGAS APIを有効にしておく必要があるみたいです。

そして、以下のようにコマンドを打ちましょう。
（claspインストール直後はパスが通っていないことがあるので、その場合はShellを再起動してくださいね！）

```ターミナル
clasp login
```

すると、ブラウザが開いて必要に応じてアカウントの選択と権限の許可が求められるので、許可します。
ブラウザでは「このページ閉じていいよ」的なメッセージが表示され、
ログインコマンドを実行したShell側に「Credential保存したよ」的なメッセージが表示されます。

# claspでGASをcloneする
![スクリーンショット_2020-06-06_17_16_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122390/e54562e9-b65a-793f-e84d-43b59ec6f5d2.png)


スクリプトエディタを開いてURLのスクリプトIDをコピーします。

それでは、ローカルでディレクトリを切り、cloneしてみましょう。

``` ターミナル
mkdir MyGas
cd MyGas
clasp clone [scriptID]

```

```メッセージ
(node:11914) ExperimentalWarning: The fs.promises API is experimental
Warning: files in subfolder are not accounted for unless you set a '.claspignore' file.
Cloned 2 files.
└─ appsscript.json
└─ コード.js
Not ignored files:
└─ appsscript.json
└─ コード.js

Ignored files:
└─ .clasp.json
```

clone完了です！

# 編集してpushする

ローカルにあるので .git管理も思うままですね！
試しにコードをちょっと編集してpushしてみましょう。

```
vi コード.js # なんか好きにいじる。コメントとか足してみる？
clasp push
```
ここでPushできなかったら、（メッセージがやたら長くて403エラーとか出てたら）Google App Script APIがオフになってるので再チェック！

![スクリーンショット 2020-06-06 17.34.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122390/6231424e-2e46-6ddc-737a-d46ed9ea8185.png)
こんな感じで、ローカルで入れたコメントがGASにも反映されました！
めでたしめでたし。


ちなみに、オンラインでエディタ上に反映されてなくてもコードは反映されているようで、
ターゲットの関数名さえ変わっていなければrunすれば動きます。

あとは本当なら clasp run でローカルから起動開始できそうなんですが、
手元では上手くいかなかったです。要調査。

## npmモジュールとか使いたい
nodeモジュールの資産とか使いたいですよね？
試しにコード.jsをPrettierとかで整形してみましょう。

```
npm init # 質問には適当に答える
npm prettier
prettier --write コード.js
```

こんな感じでPrettierが使えるようになり、コード整形もできましたね。
しかしpushするのはちょっとまってください！

`clasp push`は明示的にignoreされているファイル以外すべてをpushしてしまいます。
`.claspignore` を作っておきましょう
以下のように書いておくとカレントディレクトリの *.jsファイルと、appsscript.json がpushの対象となります。

```.claspignore
**/**
!*.js
!appsscript.json
```

これで、npmパッケージも使い放題です！
BabelもwebpackもTypeScriptもなんでもありですよ！
2020/6/10 追記
node_modulesをアップロードするわけには行かないので、バンドルしてあげる必要があるような気がします。
でもTypeScriptはいけるみたいなのでわりといけるみたいなのでは
[GASをClaspとTypescriptでローカル開発してみた。\(Clasp / Typescript / TSLint / Prettier\)](https://medium.com/@kosa3/gas%E3%82%92clasp%E3%81%A8typescript%E3%81%A7%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E9%96%8B%E7%99%BA%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F-e7835d1763ed)
Webpackでバンドルする必要があるのかな？

快適なGASライフをお楽しみください！
もっと早くやっておけばよかった…


## 参考にした記事
- [GAS のGoogle謹製CLIツール clasp \- Qiita](https://qiita.com/HeRo/items/4e65dcc82783b2766c03)
- [GAS用のCLIツール clasp を使ってGASをローカルで開発して実行するの巻。 \- Qiita](https://qiita.com/jiroshin/items/dcc398285c652554e66a)


## こんな記事も書いてます
- [\[個人サイト/ブログ/Qiitaなど\]ゆるふわにGoogle Analytics からSlackに通知したいと思ったら簡単だった \- Qiita](https://qiita.com/fruitriin/items/96b2d828bfb7bda1d6e7)
- [IFTTTで（特にTwitterを）エゴサする工夫 \- Qiita](https://qiita.com/fruitriin/items/9206bb1849b9051e0ec2)
- [Qiitaやはてブロに投稿するようなユーザーはみんなtextlintを使うと捗るぞ！ \- Qiita](https://qiita.com/fruitriin/items/de0e3d4c2205b734bdc5)