Google App Script使っていますか?僕も最近ちゃんとやってみました。
ちゃんとやってみた結果ある程度、自分の中で開発手法にケリがついたのでブログにまとめていこうと思います。
WebpackやBabelを使わず、GitHubで管理しつつローカルのエディタで開発する方法です。
Google Apps ScriptはGoogle Drive上で他のGoogleサービスと連携したり、cronライクな定期実行タスクを実行できるプログラミング環境です。JavaScriptライクな記法で書けます。
例えば、一日ごとに外部APIを叩いてSlackに通知。スプレッドシートに記録をとるような目的で使われることが多いです。
ただ、手頃に触れる環境ではある分、普段の開発になれたWebエンジニア的には、「もう少しコード管理をしたい」・「コードレビューをしたい」・「普段のエディタ」で開発したいという欲求が生まれると思います。
ここで快適に開発するために達成したいことを整理していきます。
Google Driveのスクリプトエディタで実行可能な形式を保つためです。確かに今どきの開発手法を採用すれば開発効率も上がるとは思いますが、GASに関してはGAS特有の挙動が多く実行するには、スクリプトエディタを経由し実行することになります。
ここで何らかの前処理を行っている場合、スクリプトエディタ上で編集したものをローカルで書き直す作業が発生します。実行可能な形式で書いておけば後述のclasp pull
というコマンドを入力することで変更をそのままローカルのファイルに反映することができます。
google/claspはGoogle製のApps Scriptをローカルで開発するためのCLIツールです。これを使うことでローカルで開発で、GitHubなどでリポジトリ管理を行うことができます。
claspを使い、Google Apps Scriptプロジェクトをgitでバージョン管理する - Qiitaの記事がわかりやすかったです。
npm i @google/clasp -g
で@google/claspをインストールするとclaspコマンドが使えるようになります。
最初にclasp login
を行うとブラウザでGoogleログインの画面が立ち上がり、ログインすると~/.clasprc.json
が生成されます。
clasp create [scriptTitle]
でGASプロジェクトが作成されます。
その際に、.clasp.json
とappsscript.json
が生成されます。.clasp.json
にはscriptIdが記録され、'appscript.json'にはタイムゾーンや権限などのメタ情報が記録されます。
clasp push
でGoogle DriveにあるApps Scriptに反映、clasp pull
でローカルに持ってくることができます。ローカルである程度変更してclasp push; clasp open
を行いスクリプトエディタで試し、スクリプトエディタ側で変更した場合はclasp pull
をする流れになります。
webpackやbabelを使わないといいましたが、GASをそのままで書くのはMっ気のある行為だと感じました。実はVSCodeではtsconfig.jsonをおいておけばjsファイルでもTSの恩恵を受けることができます。
(もちろんjsファイル内で型を書くことはできません。)
ただ、標準ではGASの型に対応していないので、npm install --save-dev @types/google-apps-script
で型定義ファイルをダウンロードしておきます。tsconfigは適当に用意しておけば補完が有効になるはずです。
{
"compilerOptions": {
"module": "commonjs",
"outDir": "./build",
"rootDir": ".",
"alwaysStrict": true,
"inlineSourceMap": true,
"noEmitOnError": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"pretty": true,
"strictNullChecks": true
}
}
素のJavaScriptプロジェクトにtsconfig.jsonを置いといてVSCodeの便利さを享受するの記事を見てできることに気がつきました。
claspとTypeScriptの型定義ファイルを利用することでそれなりに楽をしつつGoogle Apps Scriptの開発を行うことができました。
今回は小規模なGASを前提にしましたが、もう少し大きなプロジェクトの場合は全面的にTypeScriptを採用する・Babelを利用するなどの選択肢が見えてくると思います。要は適材適所なので各位最強の開発手法を頑張って探してください。
ちなみによくある感じのSlackと連携する勤怠Bot作ってました
https://github.com/mottox2/gas-kintai
ここ最近、Web技術を利用した画像生成に興味があります。本記事では、日本語における表現の一種である縦書きに焦点を当て、Web技術を使った縦書きを含む画像生成方法についての調査をまとめました。 > 現
追記(2022/12/29): 問い合わせに対応する窓口をTwitterに統一したいので、フォームページは削除しました。 当ブログは静的サイトホスティングサービスのNetlifyでホスティングされ
毎年10月に開催されるHacktoberfestに参加しました。このイベントはOSSへの貢献を行い、期間中に規定数(4つ)の貢献を行った人に特典がプレゼントされるものになっています。 自分はドキュメ