claspを使い、Google Apps Scriptプロジェクトをgitでバージョン管理する

# はじめに

Google Apps Script、活用していますか？
筆者は業務でそこそこ活用しており、その経験も踏まえて先月はアドベントカレンダーを書いたりしていました。
[Google Apps Scriptを実例交えて基礎からざっくり学ぶ Advent Calendar 2017](https://qiita.com/advent-calendar/2017/gas_beginner)

ただ、業務で使っていると困ることがあります。

- **ソースコードが全てGoogleドライブ上で管理されている（誤削除怖い。gitでバージョン管理したい）**
- **クラウド上のScriptEditorより、お気に入りエディタで開発したい**

その長年の悩みが、Google公式のCLIツール「[clasp](https://github.com/google/clasp)」が登場したことにより少し改善しそうです。
まぁ今までもプラグイン等を使えば解決できたのですが、徐々にGASプロジェクトが肥大化するにつれてバージョン管理しないとなーと思っていた矢先、Google先生がリリースしてくれたのでこれを期に重い腰を動かした、というのが実情に近いです。

# claspとはなんぞや

Googleドライブ上のGASプロジェクトを操作できるCLIツール。
claspとは「留め金」を意味するみたいです。

詳しくは以下記事を参照していただくと良いかと思います。
https://qiita.com/soundTricker/items/354a993e354016945e44

# 必要なもの

- gitクライアント
- gitリポジトリ（GitHubでもbitbucketでもGitLabでもお好きなものを）
- Node.js（npm使うので）
- npm（claspはnpmで配信されている）
- clasp

# ステップ

1. gitクライアントを入れる
2. Node.jsとnpmを入れる
3. claspを入れる
4. GAS APIをONに、claspでログインする
5. Googleドライブでテストプロジェクトを作る
6. claspでローカルにファイルをclone
7. gitリポジトリを準備する
8. pushする

筆者は自宅マシンがWindowsなのでWindowsでやっていますが、そんなに凝ったことはしていないのでMacでもLinuxでもイケるはずです。

# 1. gitクライアントを入れる

だいぶ前に入れて手順覚えていないのですが、恐らくこの辺の記事を参考にすればイケるはずです。

Windows
https://qiita.com/shinsumicco/items/a1c799640131ae33c792
Mac
https://qiita.com/furusin_oriver/items/974a7b7fb8c56ad88d6e

```bash
$ git --version
```
でバージョンが表示されたらOK

# 2. Node.jsとnpmを入れる

同じくだいぶ前に入れて手順覚えていないですが、入っていなければこの辺の記事を参考に。

Windows
https://qiita.com/taiponrock/items/9001ae194571feb63a5e
Mac
https://qiita.com/akakuro43/items/600e7e4695588ab2958d

```bash
$ npm -v
```
でバージョンが表示されたらOK

# 3. claspを入れる

[clasp](https://github.com/google/clasp)の公式に書いてある通り、

```bash
$ npm i @google/clasp -g
```

だけで完了するはずです。
npm入っているのに正常に動かなかったら、npmのバージョンを上げてみるといいかもしれないです。

# 4. GAS APIをONに、claspでログインする

https://script.google.com/home/usersettings
にアクセスし、Google Apps Script APIをオンに。
これで該当アカウントのGASプロジェクトをclaspから操作が可能になります。

![on.png](https://qiita-image-store.s3.amazonaws.com/0/199678/714bc0ba-cc1a-3032-b6dd-cd6eea4ef3b2.png)

オンに変更したらclaspでログイン。

```bash
$ clasp login
```

Webブラウザが立ち上がるのでアカウント選択。

![login.png](https://qiita-image-store.s3.amazonaws.com/0/199678/dcb9b467-c83c-c7f4-b2e1-103f23960e21.png)

これでclaspを使い、Googleドライブ上のGASプロジェクトが操作できます。

# 5. Googleドライブでテストプロジェクトを作る

Googleドライブの*新規→その他→Google Apps Script*から新規PJを作成。
もしその他の選択肢にGASが無い場合は*新規→その他→アプリを追加*からGASを選択。

プロジェクト名は適当でOKです。

claspは公式のREADMEにある通り、スラッシュ区切りのファイル名はローカルに持ってきた際、自動的にディレクトリに変換されます。
それを確かめてみましょう。

- script.google.com:
    - tests/slides.gs
    - tests/sheets.gs
- ローカル:
    - tests/
        - slides.js
        - sheets.js


コード.gsを*test/dayo.gs*にリネーム。
更に同一プロジェクトにスクリプトファイルを追加。
*ファイル→新規作成→スクリプトファイル*を選択。
追加したファイルは*test/nano.gs*にリネーム。

![directory.png](https://qiita-image-store.s3.amazonaws.com/0/199678/cbb81163-98d0-9b26-e5f3-dea64d09e943.png)

せっかくローカルに落としてもファイルが空だと成功か分かりづらいので、適当にソースコードを変更して保存しておきましょう。

```javascript:test/dayo.gs
function myFunction() {
  Logger.log("hoge");
}
```

```javascript:test/nano.gs
function myFunction() {
  Logger.log("fuga");
}
```

# 6. claspでローカルにファイルをclone

さて、いよいよclaspの本領発揮。このプロジェクトをcloneしてみましょう。
まずは保存したいディレクトリを作成し、cdで移動しておきましょう。

```bash
$ clasp clone [プロジェクトID]
```

プロジェクトIDは*ファイル→プロジェクトのプロパティ*で表示されます。
以下画像の赤で囲んだ部分をコピペします。

![scriptId.png](https://qiita-image-store.s3.amazonaws.com/0/199678/cbc3efdb-f146-f6d2-4ec8-36f512d6e456.png)

成功すると、以下のようにちゃんとディレクトリ形式でcloneされます。

![files1.png](https://qiita-image-store.s3.amazonaws.com/0/199678/a860d0ad-8612-8b21-2b31-f66338cb3293.png)
![files2.png](https://qiita-image-store.s3.amazonaws.com/0/199678/e5860d63-0270-4db6-36f0-7632777f8495.png)

ファイルを開くとソースコードが正常にDLできているはずです。
あとはお好きなエディタで編集してみてください。

# 7. gitリポジトリを準備する

GitHubはPrivate（非公開）が有料の為、今回はbitbucketを利用します。
もちろん公開範囲に注意すれば別のサービスでもOKです。

bitbucketにログインしたらサイドメニューの＋マークからリポジトリの新規作成を選択。

![newRepo.png](https://qiita-image-store.s3.amazonaws.com/0/199678/5dddb26e-980b-f011-ed50-9148e815c308.png)

非公開リポジトリとして新規作成します。
言語は…GASがないのでJavaScriptにしておきましょうか（未設定でも問題ないです）。

![repoCreate.png](https://qiita-image-store.s3.amazonaws.com/0/199678/a76e0229-162a-c6fc-1da9-423f4a2d983c.png)

gitでpushやpullをするにはSSH鍵の登録が必要。無ければ作りましょう。

```bash
$ ssh-keygen -t rsa
```

テストであればパスフレーズも不要なので、Enter3回で作成完了。
デフォルトでは~/.ssh/にid_rsa（秘密鍵）とid_rsa.pub（公開鍵）が生成されます。

id_rsa.pub（公開鍵）をbitbucketに登録します。
サイドメニュー左下のユーザーアイコンから*bitbucket設定→SSH鍵設定→鍵を追加*でid_rsa.pubの中身を貼り付けます。

これでリポジトリにpushができるようになるはずです。

# 8. pushする

Tanaka Taro部分はご自身のお名前、tanaka_taro@example.comはご自身のメールアドレスを。
`git@bitbucket.org:[アカウント名]/[リポジトリ名].git`部分も変更必須です。

```bash
$ git config --global user.name "Tanaka Taro"
$ git config --global user.email tanaka_taro@example.com
$ git init
$ git status
$ git add -A
$ git commit -m 'first commit'
$ git remote add origin git@bitbucket.org:[アカウント名]/[リポジトリ名].git
$ git push -u origin master
```

正常にpushされたら成功！

![source.png](https://qiita-image-store.s3.amazonaws.com/0/199678/2b92578c-4f6b-67b8-4dae-c6a428cd58c3.png)

# おわりに

今回はgit管理下に置くところまで紹介しました。
実際はclaspでpullやpushをすることになりますが、やはり以下記事が参考になります。

https://qiita.com/soundTricker/items/354a993e354016945e44

最後まで読んでいただきありがとうございました。