📔

Google App Script 開発 のための Templateリポジトリを作った

2 min read

GAS を書くたびに開発環境構築を調べている気がするので、GAS 開発用の Template リポジトリを作ってみました。

Templateリポジトリ

https://github.com/kawamataryo/google-app-script-starter-template

機能はこちらです。

  • claspによる App Script へのデプロイ
  • TypeScript 対応
  • Webpack5 でのビルド※
  • ESLint / prettier でのコード整形
  • husky / lint-stage でのプレコミットフック

Clasp を使えば TypeScrip でのビルドは実現出来るのですが、スクリプト中で dayjs など npm モジュールを利用したい場合はバンドルが必要です。なので、モジュールバンドラーとして webpack5 を使っています。

使い方

GitHub Template として公開しているので、リポジトリのUse this templateボタンをクリックすれば、コミット履歴が削除された自分のリポジトリとして作成できます。

https://github.com/kawamataryo/google-app-script-starter-template/generate

作成したリポジトリをローカルに clone したら、.clasp.jsonscriptIdを自身の AppScript の ID で書き換えてください。

※ AppScript の ID は AppScript 管理画面のプロジェクト設定から確認できます

.clasp.json
{
  "scriptId": "<YOUR_SCRIPT_ID>",
  "rootDir": "./dist"
}

スクリプトのエントリーポイントはsrc/main.tsです。

src/main.ts
const greeting = () => {
  Logger.log("Hello World");
};

(global as any).greeting = greeting;

main.ts(global as any).関数名 = 関数;とすれば、その関数が公開されます。

global に関数を登録するのは GAS がトップレベルで関数宣言をする必要があるからです。webpack のバンドル後も、トップレベルでの関数宣言を保持するために gas-webpack-pluginを利用しています。

ビルド等 npm スクリプトは以下のとおりです。

package.json
  "scripts": {
    "build": "webpack",
    "deploy": "yarn build && clasp push",
    "lint": "prettier 'src/**/*.ts' && eslint 'src/**/*.ts'",
    "lint:fix": "prettier --write 'src/**/*.ts' && eslint --fix 'src/**/*.ts'",
    "prepare": "husky install"
  },

※ deployは clasp を使うので、事前にclaspをglobalにインストールしてclasp loginを完了させている必要があります。

終わりに

快適な GAS ライフを。
より良い方法やなどありましたら気軽に Issue、PR 投げて頂けると嬉しいです🙏

Discussion

ログインするとコメントできます