ビルドとかしつつ環境も分けてclaspのデプロイを楽にしたい

2023.06.15Update

宮本

こんにちは、最近はスプレッドシートの値をgetValuesした時の型が自由すぎることが悩みの宮本です。便利といえば便利なんですが、自由奔放すぎてTypeScriptだとちょっと手を焼いています。

はじめに

みなさんclaspはご存知でしょうか？claspは、Google Apps Script（以下GAS）のプロジェクトをコマンドラインでデプロイできるようにできるツールです。GASをローカルで開発し、コード自体もgit管理したりと、これ一つでGASの使い勝手が一気に上がることでしょう。
さて、このclaspを使うとローカルからのデプロイの他に、デフォルトでもTypeScriptに対応しているという便利機能がついてきます。型がないと生きていけなくなってしまった私としては飛び上がって喜びたいのですが、残念なことに対応しているバージョンが3.8.2と若干古いです。他にもexport/importが素直に使えなかったりと、やや痒いところに手が届きません。どちらかというと、こっちの方が辛い……。
そこで私は gas-webpack-plugin を使ってローカル内でwebpackを使いコードをビルドし、ビルドしたコードをclaspでデプロイという方法を使ってます。さらにclaspで管理するプロジェクト設定の入っている.clasp.json を環境ごとに用意すれば、GASでも本番・開発環境を分けてデプロイすることができてしまいます。これで完璧。
と、言いたいところですが、これにもちょっと不便なところがあります。ちょっと多いんですよね……実行しないといけないコマンドが。

古いビルド済みファイルが残っていると嫌なので削除
webpackでビルド
デプロイしたい環境に合わせて.clasp.json を切り替え
claspでデプロイ

いや、改めて見るとそんなに多くない気もしてきました。でも、これをちょっと変更して動作確認して……となってくると毎回打つのが結構面倒です。特にスプレッドシートと連携したGASだと、ちょっとした動作確認でもローカルだと難しくデプロイしないと正常に動くかわかりません。
ということで、環境を分けて一発でデプロイできるようにコマンドを整えましたというご紹介です。本題に入るまでが長かった。

一発で環境を分けてGASをデプロイできるようにする

さて、ごちゃごちゃしたコマンドをまとめるとなると、シェルスクリプトでも用意する必要がありそうですが、ちょっと面倒です。ということで、今回はpackage.jsonのscriptsのpre/post scriptsを使って一発でデプロイできるようにしてみます。

pre/post scripts

よくpackage.jsonのscriptsフィールドに "build": "next build" のようなものは登録すると思います。pre/post scriptは、たとえばscriptsフィールドにpreで始まるコマンド登録されていたらpreに続くコマンドの実行前に、postで始まるコマンドが登録されていたらpostに続くコマンドの実行後に自動で実行されるスクリプトです。
buildを当てはめるとこうなります。

prebuild: buildコマンドの前に自動で実行
postbuild: buildコマンドの後に自動で実行

実はいままで使ったことがなかったのですが、今回はこれで良さそうです。

デプロイコマンド

では、コマンドで環境を分けつつ一発でclaspをデプロイするpackage.jsonのscriptsとdevDependenciesの抜粋です。
前提

環境ごとの .clasp.jsonは用意済み
- 開発環境: .clasp.json.dev
- 本番環境: .clasp.json.prod
webpackのビルド設定は完了済み
- ビルドすると ./dist ディレクトリにビルド済みファイルが入る

"scripts": {

"prebuild": "rimraf ./dist",

"build": "webpack",

"predeploy": "yarn build",

"deploy": "clasp push",

"postdeploy": "rimraf .clasp.json",

"predeploy:dev": "node -e \"require('fs').copyFileSync('./.clasp.json.dev', './.clasp.json')\"",

"predeploy:prod": "node -e \"require('fs').copyFileSync('./.clasp.json.prod', './.clasp.json')\"",

"deploy:dev": "yarn deploy",

"deploy:prod": "yarn deploy"

"devDependencies": {

...

"rimraf": "^4.4.1",

...

1 2	// 利用ライブラリの追加 yarn add -D rimraf

// 開発環境へのデプロイ

yarn deploy:dev

// 本番環境へのデプロイ

yarn deploy:prod

やっていることの説明

まず、buildコマンドでwebpackを呼び出し、ビルドするようになっています。そしてprebuildとして、rimrafライブラリを使い以前のビルド済みファイルを削除しています。これで、buildコマンド実行時に以前のファイルを確実に削除してファイルをビルドすることができるようになっています。
そして、deployコマンドではpredeployとして、buildコマンドを実行するようにしています。これで、デプロイ時に事前にファイルを自動でビルドすることができます。ビルド後にclasp pushでGASのプロジェクトにデプロイします。その後、postdeployで.clasp.jsonを削除しています。
そして環境ごとの出力先変更ですが、それぞれdeploy:devとdeploy:prodの2種類のコマンドを用意しています。どちらもyarn deployを呼び出していますが、事前のpreコマンドで対応する.clasp.json.{dev|prod}をnodeのコマンドライン実行で.clasp.jsonにコピーしています。ここだけnodeのコマンドライン実行をしている理由としては、ファイルを別名コピーする丁度良いライブラリが見当たらなかったためです。

おわりに

claspでコマンドラインからデプロイできるようになったけど、コマンド4つも打つの面倒くさい！という低レベルな悩みから、コマンド一つで環境を分けてGASのプロジェクトをデプロイできるようにしてみました。実際にやってみると、そこまで手間はかからない割にストレスフリーになって結構気に入っています。ただ、scripts内で別名で同じコマンドを呼び出していたり、もう少し綺麗にできないかなとも思ったり……。とはいえ現状はこれで十分かなと感じているので、ほどほどに妥協も入ってます。
claspというよりはpackage.jsonのscriptsでできること意外とある！！という感じの記事になっていますが、お役に立てれば幸いです。

参考

We are hiring!

ニフティでは、さまざまなプロダクトへ挑戦するエンジニアを絶賛募集中です！
ご興味のある方は以下の採用サイトよりお気軽にご連絡ください！

ニフティ株式会社採用情報

Tech TalkやMeetUpも開催しております！
こちらもお気軽にご応募ください！

Event – NIFTY engineering