Google Apps Script を clasp + TypeScript を用いて実装した話

アプリケーション開発

JCB デジタルソリューション開発部 の四方です。 本記事では、Google によって開発されたスクリプト言語である Google Apps Script と、 Google Apps Script をローカルで管理するための clasp というツールについてまとめさせていただきます。

Google Apps Script について

Google Apps Script は主に GAS もしくは AppsScript の略称で呼ばれるスクリプト言語です(本記事では以下、GAS で表記)。 特徴としては、JavaScript をベースとした言語設計と Google Workspace との親和性の高さがあげられます。

また Web 上の 統合開発環境(IDE)が用意されており、開発に際し事前の環境構築が不要というメリットがあります。

弊社 では、プロジェクトメンバーのコミュニケーションに Google Chat を利用しております。 そのため、ChatOps による運用効率化のツールは Google Chat との親和性から GAS が採用されています。

GAS の公式サイトはこちらになります。

clasp について

先程、GAS では Web 上の IDE が用意されているため事前の環境構築が不要であると記述しましたが、 開発者としては使い慣れたエディタや git 等のツールを用いて開発を進めたいと考えることがあります。

そのような場合には、clasp というローカルで GAS を開発するためのツールを利用できます。

clasp のリポジトリはこちらになります。 clasp を利用する場合には、Google Apps Script APIを有効化することを忘れずに。

clasp + TypeScript を用いた実装

弊社では、GAS を TypeScript で実装しています。 その理由としては、TypeScript の提供する静的型システムがあげられます。

静的型システムはコードの保守性と可読性を大幅に向上させることができるため、開発効率を高めることができます。

GAS で TypeScript を利用する場合は、TypeScript で書かれたコード -> GAS のコード へのトランスパイルが必要となりますが、 clasp が 裏でトランスパイルを行っているため開発者が意識する必要はありません。

clasp を用いた GAS プロジェクトの作成

clasp を用いた GAS プロジェクトの作成方法は 2 種類あります。

  1. Web 上で作成したプロジェクトをローカルにクローン clasp clone ${projectId} を実行
  2. CUI 上でプロジェクトを作成 clasp create ${projectName} を実行

実際に 2 の手順でプロジェクトを作成してみます。

~/repos/gitlab.tools.dev.jcblab.jp/kazuki.shikata/blog main
❯ mkdir src; clasp create --title blog --rootDir ./src
? Create which script? standalone
Created new standalone script: https://script.google.com/d/***/edit
Cloned 1 file.
└─ ./src/appsscript.json

~/repos/gitlab.tools.dev.jcblab.jp/kazuki.shikata/blog main* 19s
❯ tree
.
├── README.md
└── src
    └── appsscript.json

    1 directory, 2 files

作成したプロジェクトをブラウザで開いて確認してみます。

clasp open

実際にコードを記述して動かしてみます。

~/repos/gitlab.tools.dev.jcblab.jp/kazuki.shikata/blog main*
❯ vim src/blog.ts

~/repos/gitlab.tools.dev.jcblab.jp/kazuki.shikata/blog main* 38s
❯ cat src/blog.ts
const main = () => {
  console.log("for JCB Tech blog");
};

~/repos/gitlab.tools.dev.jcblab.jp/kazuki.shikata/blog main*
❯ clasp push
└─ src/appsscript.json
└─ src/blog.ts
Pushed 2 files.

ブラウザ上でプッシュされたコードを確認すると、Typescript で記述したコードが GAS にトランスパイルされていることが確認できます。 実行ボタンを押すと、console.log() の中身が出力されていることも確認できます。

まとめ

ここまで、GAS (clasp + TypeScript)についてご説明してきました。 他にも linter の設定や、もう少し細かい実装などお話したいことはあるのですが、本記事では以上とさせていただきます。

最後になりますが、JCBでは我々と一緒に働きたいという人材を募集しています。 詳しい募集要項等については採用ページをご覧下さい。

本文および図表中では、「™」、「®」を明記しておりません。

Google Cloud, GCP ならびにすべての Google の商標およびロゴは Google LLC の商標または登録商標です。

記載されている会社名、製品名は、各社の登録商標または商標です。

©JCB Co., Ltd. 20︎21