ゆるおたノート

Tomorrow is another day.

【Clasp】ローカルでGASを書いてみる ~スクリプトをGitで管理する~

スクリプトをGitでも管理できるように準備していきます。

なお、以下Git自体は既に端末にインストール済み
かつGitHubのアカウントも作成済みであると想定して、説明します。

Git管理を始める

フォルダ構成

現在

ここまで順番通りに設定されている方は、現在下記の状態だと思います。

ローカル開発のフォルダ構成

目標

ルートフォルダリポジトリを作成して、作業フォルダと同じ階層にGit関係のファイルを作成します。

作業フォルダと同階層にGit関係を置く構成にする

リポジトリの作成

  1. プロジェクトのルート・ディレクトリに移動

    cd <プロジェクトのルート・ディレクトリ>
    

    画像の例では、ルートフォルダに移動します。

    cd ルート
    

  2. リポジトリを初期化

    Git管理を始めます。

    git init
    

除外ファイルを作成・記入

除外ファイルを作成

.claspignoreと同じ手順で、.gitignoreというファイルを作成します。

なお、.gitignore自体は、基本的にプロジェクトのルートフォルダ以下にあればOKです。

`.git`フォルダ直下に`.gitignore`を作成する

除外ファイルを記入

.claspignoreと同じように、ファイルの更新をGitで追跡しないものを記入しておきます。

JSONファイルを除外

リモートリポジトリをPublicで作成する場合は、JSONファイルもアップロードしてしまうと、スクリプトIDやら色んな情報が全世界に公開されてしまいます。

ちょっと怖いので、基本的には各種設定に使用するJSONファイルを拡張子ごと除外して、appsscript.json等の実行に必要で個人情報を含まないファイルだけを残すことをオススメします。

# 個人情報を含む可能性があるため。
*.json

# スクリプトの実行に必要なため。
!appsscript.json
Google関係のファイルを除外

ドライブファイルストリームを使用していてプロジェクト内にGoogle関係のファイルがある場合、Gitではエラーになります。
こちらもあらかじめ拡張子ごと除外しておきます。

# 拡張子ごと除外
*.gs
*.gscript
*.gsheet
︙
詳しい使い方

その他、書き方は基本的に.claspignoreと同じですが、.gitignoreの詳しい使い方は下記の記事が参考になるかと思います。

.gitignore の書き方 - Qiita

README.mdを追加

とりあえずタイトルだけ…

「何をするプロジェクトか」が分かるように、とりあえずタイトルだけつけておけばOKです。
初期設定ではルートフォルダの名前が反映されるはずです。

冒頭にバッジを追加

冒頭に下記も書いておくと、「このプロジェクトではClaspを使っています」のしるしになって、他の方がこのプロジェクトを使用する際に準備しやすくなる*1と思います。
あと、「わたしGitHub使ってます!」感が出ます。笑

[![clasp](https://img.shields.io/badge/built%20with-clasp-4285f4.svg)](https://github.com/google/clasp)
  • サンプル

    「Clasp使用中」を表すバッジ

一旦、記録する

初期設定が完了したら、一旦ここまでの情報を記録しておきます。

# リポジトリ内のファイルを(除外ファイル以外)すべてステージに上げる
git add .

# ステージに上げた編集内容を記録する
git commit -m 'init.'

# リモートリポジトリに接続
git remote add origin <リモートリポジトリの接続用アドレス>

# リモートリポジトリにプッシュする
git push origin main

ローカルで編集・記録の繰り返し

あとは、いつも通りスクリプトを編集して、ステージ、コミット、プッシュしていきます。

Gitの使い方

Git自体の使い方については、下記が参考になるかと思います。

サル先生のGit入門〜バージョン管理を使いこなそう〜【プロジェクト管理ツールBacklog】

Gitに関連する記事 | WWWクリエイターズ

また、手前味噌ですが上記を参考に勉強した記録も載せておきます…

【Git勉強中】操作に慣れてきたので、流れを整理してみました。 - ゆるおたノート

ブラウザのエディタでもGit管理する

以降、基本的にはローカルのエディタでスクリプトを書いていきますが、どうしてもブラウザ側で編集が必要になった時にブラウザからもGitHubにプッシュできるよう準備しておきます。

拡張機能をインストール

Google Apps Script Github アシスタントという拡張機能を使用します。

Git管理しやすいように設定する

少し設定を変更して、ローカルのリポジトリとスムーズに連携できるようにします。

GitHubのアカウントでログイン
  1. ログイン画面を開く

    関数を選ぶボタンの隣あたりにLogin SCMというボタンが表示されるので、それをクリックします。

  2. GASの管理で使用するGitHubアカウントでログイン

フォルダをローカルの作業フォルダと同じ構成にする

作業フォルダ(ここではsrcフォルダ)も含めて、同じ構成でファイルを作成します。

ローカルの作業フォルダと同じ構成にする

前述のように既にローカルからGitHubにプッシュしてある場合は、拡張機能Repository(もしくはRepo: ~)→使用するリポジトリの順にクリックして、プルすればOKです。

作成したリポジトリからプルしておく

プッシュする拡張子を変更

初期設定だと.gsのファイルがプッシュされます。
しかし、ローカルからは.jsファイルをプッシュするので、このままでは同じリポジトリ内で別々のファイルをGit管理している状態になってしまいます。

こうなると、ブラウザ側からGitHubにプッシュした.gsファイルをローカル側ではClaspでクローン→.jsに変換してから編集、という二度手間が都度発生したり、コンフリクトの原因になったりするので、始めから拡張子を統一しておきます。

  1. 設定画面を開く

    歯車マークをクリックします。

    歯車マークをクリック

  2. 拡張子を変更して保存

    File type to sync.jsを選択して、Saveをクリックします。

    拡張子を変更し、Saveをクリック

ブランチは検討中…

私自身Gitにあまり慣れてないのもあり、ブランチの使い方は検討中です…

今はmasterブランチ*3に直上げしています。
基本的にはローカルからGitHubに上げて、緊急事態の時だけブラウザで編集する、という流れになると思うので、とりあえずは充分かなと…*4

このシリーズについて

Google Apps Scriptをローカルで編集する方法について、まとめています。

誤り、分かりづらい等ありましたら、ぜひコメント欄やTwitterお問い合わせフォーム等でご教示ください。

連載目次

  1. 【Clasp】ローカルでGASを編集するメリットとデメリット - ゆるおたノート
  2. 【Clasp】ローカルでGASを書く準備 ~Claspをインストールする~ - ゆるおたノート
  3. 【Clasp】ローカルでGASを書く準備 ~プロジェクトを作成する~ - ゆるおたノート
  4. 【Clasp】ローカルでGASを書く準備 ~コーディングを楽にする~ - ゆるおたノート
  5. 【Clasp】ローカルでGASを書いてみる ~スクリプトを書いてアップロードする~ - ゆるおたノート
  6. 当記事【Clasp】ローカルでGASを書いてみる ~スクリプトをGitで管理する~ - ゆるおたノート

参考

注釈

*1:このバッジには無いですが、GitHubではプロジェクトで使用している言語やライブラリのバージョン等が掲示されることが多いようです。
他の言語だと、プロジェクトを初期化した時点で依存ライブラリ等のバージョンを自動でREADMEに記入しておいてくれるものもあります。

*2:約1年前の記事で、既に情報が古いものもありますが…

*3:今後はmainブランチですね!

*4:Gitに慣れている方であれば、browserとか分かりやすい名前で作成して後でマージする、という運用もアリかもしれません。