mottox2 blog

claspとTypeScriptの型定義で楽をする2018年のGoogle Apps Script開発

blog

Google App Script使っていますか?僕も最近ちゃんとやってみました。
ちゃんとやってみた結果ある程度、自分の中で開発手法にケリがついたのでブログにまとめていこうと思います。
WebpackやBabelを使わず、GitHubで管理しつつローカルのエディタで開発する方法です。

普通に使った時の様子

Google Apps ScriptはGoogle Drive上で他のGoogleサービスと連携したり、cronライクな定期実行タスクを実行できるプログラミング環境です。JavaScriptライクな記法で書けます。

例えば、一日ごとに外部APIを叩いてSlackに通知。スプレッドシートに記録をとるような目的で使われることが多いです。
ただ、手頃に触れる環境ではある分、普段の開発になれたWebエンジニア的には、「もう少しコード管理をしたい」・「コードレビューをしたい」・「普段のエディタ」で開発したいという欲求が生まれると思います。

何を達成したいか

ここで快適に開発するために達成したいことを整理していきます。

  • Google Apps Scriptのエディタが辛い。補完が中途半端。
  • GitHubでソースコードの管理をしたい。
  • webpack, babelを使いたくない。

[補足] なぜwebpack, babelを使いたくないのか

Google Driveのスクリプトエディタで実行可能な形式を保つためです。確かに今どきの開発手法を採用すれば開発効率も上がるとは思いますが、GASに関してはGAS特有の挙動が多く実行するには、スクリプトエディタを経由し実行することになります。
ここで何らかの前処理を行っている場合、スクリプトエディタ上で編集したものをローカルで書き直す作業が発生します。実行可能な形式で書いておけば後述のclasp pullというコマンドを入力することで変更をそのままローカルのファイルに反映することができます。

やること

Clasp CLIでGitHubでの管理を実現

google/claspはGoogle製のApps Scriptをローカルで開発するためのCLIツールです。これを使うことでローカルで開発で、GitHubなどでリポジトリ管理を行うことができます。

claspを使い、Google Apps Scriptプロジェクトをgitでバージョン管理する - Qiitaの記事がわかりやすかったです。

bash
npm i @google/clasp -g

で@google/claspをインストールするとclaspコマンドが使えるようになります。
最初にclasp loginを行うとブラウザでGoogleログインの画面が立ち上がり、ログインすると~/.clasprc.jsonが生成されます。

プロジェクトの作成

clasp create [scriptTitle]でGASプロジェクトが作成されます。
その際に、.clasp.jsonappsscript.jsonが生成されます。.clasp.jsonにはscriptIdが記録され、'appscript.json'にはタイムゾーンや権限などのメタ情報が記録されます。

pullとpush

clasp push でGoogle DriveにあるApps Scriptに反映、clasp pullでローカルに持ってくることができます。ローカルである程度変更してclasp push; clasp openを行いスクリプトエディタで試し、スクリプトエディタ側で変更した場合はclasp pullをする流れになります。

TypeScriptの補完の恩恵を受ける

webpackやbabelを使わないといいましたが、GASをそのままで書くのはMっ気のある行為だと感じました。実はVSCodeではtsconfig.jsonをおいておけばjsファイルでもTSの恩恵を受けることができます。
(もちろんjsファイル内で型を書くことはできません。)

ただ、標準ではGASの型に対応していないので、npm install --save-dev @types/google-apps-scriptで型定義ファイルをダウンロードしておきます。tsconfigは適当に用意しておけば補完が有効になるはずです。

tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "./build",
    "rootDir": ".",

    "alwaysStrict": true,
    "inlineSourceMap": true,
    "noEmitOnError": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "pretty": true,
    "strictNullChecks": true
  }
}

スクリーンショット 2018-07-21 19.05.29.png (90.6 kB)

素のJavaScriptプロジェクトにtsconfig.jsonを置いといてVSCodeの便利さを享受するの記事を見てできることに気がつきました。

まとめ

claspとTypeScriptの型定義ファイルを利用することでそれなりに楽をしつつGoogle Apps Scriptの開発を行うことができました。
今回は小規模なGASを前提にしましたが、もう少し大きなプロジェクトの場合は全面的にTypeScriptを採用する・Babelを利用するなどの選択肢が見えてくると思います。要は適材適所なので各位最強の開発手法を頑張って探してください。

ちなみによくある感じのSlackと連携する勤怠Bot作ってました
https://github.com/mottox2/gas-kintai

dev

ウェブ技術で縦書きを含む画像を生成したい

ここ最近、Web技術を利用した画像生成に興味があります。本記事では、日本語における表現の一種である縦書きに焦点を当て、Web技術を使った縦書きを含む画像生成方法についての調査をまとめました。 > 現

blog

Netlify Formsで問い合わせフォームを作ったら簡単だった

追記(2022/12/29): 問い合わせに対応する窓口をTwitterに統一したいので、フォームページは削除しました。 当ブログは静的サイトホスティングサービスのNetlifyでホスティングされ

netlify
dev

翻訳でHacktoberfestに参加しました

毎年10月に開催されるHacktoberfestに参加しました。このイベントはOSSへの貢献を行い、期間中に規定数(4つ)の貢献を行った人に特典がプレゼントされるものになっています。 自分はドキュメ

Copyright © 2023 @mottox2 All Rights Reserved.