👏

claspを使ってGASをGitHub管理する

2024/05/08に公開

はじめに

GASのソースコードをGitHubで管理したいとなったとき、スクリプトのエディタでは埋め込みになってしまうため困ると思います。そんなとき、claspがあれば簡単にコードを管理できるようになります。

claspとGASの連携

claspのインストール

https://github.com/google/clasp

npm install -g @google/clasp

Google Apps Script APIをOFF→ONに変更

https://script.google.com/home/usersettings


clasp login

Googleアカウントを選択しログイン

clasp login

プロジェクトをclone

clasp-helloというディレクトリを作りました。

git clone https://github.com/icck/clasp-hello.git

新規作成(clasp設定ファイル+スプレッドシート)

clasp create

実際に開発する際には--rootDir "src/"などとしsrc配下にファイルを作っていくことをおすすめします。モジュールと同じ階層で開発することを避けるためです。
今回はスプレッドシートを使っていくためsheets を選択しています。
スプレッドシートのURLが払い出されました。

appsscript.jsonが自動生成されています。

Googleドライブです。マイドライブの直下にスプレッドシートが生成されました。(ターミナルに記載されているURLになっていました)

簡単なコードを書いてみる

main.jsを作ってみます。

touch main.js
function test() {
    console.log('Hello World!');
}

GASへ反映

clasp push

スクリプトを確認すると反映されていることがわかりました。

修正したコードをGASに反映する

修正を実施して

clasp push

反映されています

作ったスプレッドシートのURLはどこに保存されているか

.clasp.jsonというファイルに保存されています。こちらはチームで開発するときなどに必要になってくるので管理していきましょう。

さいごに

本編は基礎のみですが、以下のことが応用として実行可能ですのでお試しください。

  • TypeScriptで開発しjs変換
  • ローカルでのテスト
  • .clasp.jsonを.clasp.json.dev .clasp.json.prdのように分けることで開発系と本番系の2系統を用意
  • GitHub Actionsで自動デプロイ

Discussion