おかしんワークス

こんにちは。ビジネステクノロジーユニットのおかしんです。

通常、専用のエディタで書くGoogle Apps Script（GAS）ですが、それをGoogle謹製のCLIツール clasp を使ってローカルで書き、Git管理する手法を検討してみました。Dockerによってチームメンバーが誰でも簡単に環境構築できるようにしています。

GitHub - Studist/docker-clasp-starter: チームでGASを管理するための環境を簡単に整えるためのリポジトリです

チームでGASを管理するための環境を簡単に整えるためのリポジトリです. Contribute to Studist/docker-clasp-starter development by creating an account on GitHub.

https://github.com

「Use this template」することで、自組織のプライベートリポジトリやパブリックリポジトリとして利用できます。秘匿性が必要な処理もあると思うので、ForkじゃなくてTemplateとして使ってください。

docker-clasp-starter/.devcontainer/Dockerfile at main · Studist/docker-clasp-starter

チームでGASを管理するための環境を簡単に整えるためのリポジトリです. Contribute to Studist/docker-clasp-starter development by creating an account on GitHub.

https://github.com

Typescriptやclaspをすぐに使えるようにしています

docker-clasp-starter/.devcontainer/devcontainer.json at main · Studist/docker-clasp-starter

チームでGASを管理するための環境を簡単に整えるためのリポジトリです. Contribute to Studist/docker-clasp-starter development by creating an account on GitHub.

https://github.com

自動でコンテナに npm install されるようにしています。

docker-clasp-starter/package.json at main · Studist/docker-clasp-starter

チームでGASを管理するための環境を簡単に整えるためのリポジトリです. Contribute to Studist/docker-clasp-starter development by creating an account on GitHub.

https://github.com

• npm-script でいい感じにGASプロジェクトをCreateしたりPushできる
  • 生でclaspを叩くとディレクトリ構造を整えたり、タイムゾーンがアメリカになったりするので、 npm-script で制御している
    • clasp-script.shを実行している
  • npm run create {project_name}
    • リポジトリ直下にproject_name/.clasp.jsonとproject_name/src/appsscript.jsonを作成し、タイムゾーンを日本に変更する
  • npm run push {project_name}
    • プロジェクトをclasp pushする
• GASの型定義ファイルやeslintやprettierがインストールされる
  • 定義ファイルによって、ローカルでもGASの補完が効く
  • 未実装だが、eslintやprettierによる整形ができる（ようになる予定）

docker-clasp-starter/.github/workflows/clasp_push.yml at main · Studist/docker-clasp-starter

チームでGASを管理するための環境を簡単に整えるためのリポジトリです. Contribute to Studist/docker-clasp-starter development by creating an account on GitHub.

https://github.com

全プロジェクトフォルダをclasp pushしてくれる

project_name
├── src
│	  ├── code.js
│   └── appsscript.json
├── .clasp.json
project_name2
├── src
│	  ├── code.ts
│   └── appsscript.json
├── .clasp.json

基本的にはプロジェクト名のフォルダをリポジトリ直下に作ってやり、その中にclasp.jsonを置いてからclasp pull するか、もしくは—rootDirオプションをつけてclasp cloneすれば良いです。

現状では、実際のGASプロジェクトはClaspを実行しているユーザーのマイドライブに入ってしまう。それをDriveのAPIを叩いて特定の共有ドライブ内のフォルダに移動する機能をもたせたい。

eslintやprettierやの設定ファイルを追加し、ちゃんと整形されるようにする。GitHub Actions側でやるかファイル保存時にやるかは迷っている。

gts というものもあるようなので、調べたい。

GitHub - google/gts: ☂️ TypeScript style guide, formatter, and linter.

☂️ TypeScript style guide, formatter, and linter. - GitHub - google/gts: ☂️ TypeScript style guide, formatter, and linter.

https://github.com

jest でテスト出来るようにする

現状の機能でも、すぐにチームでGitを使ったGAS開発が出来るように作ってるので、よかったら使ってみてください。

1リポジトリで複数のGASを管理するようになっていますが、GitHub Actionsのymlを少し修正すれば、1リポジトリ・1プロジェクトにも出来ます。

あまり自分がTypescriptなどに詳しくないので、おかしなことをしていたらISSUE投げてください。修正します。