はじめに

こんにちは！
この記事では、Google Apps Script（GAS）の開発環境をclaspを使用して構築する方法についてご紹介します。
最近、私は業務でGASを活用したツールの作成に取り組んでいました。
最初はGASのオンラインエディタを利用して開発を進めていたのですが、コードの変更履歴を見たり、将来的に他の開発者がプロジェクトに参加したりすることを考えると、オンラインエディタだけでは不十分だと感じ始めました。
特に、コードのバージョン管理やチームでの共同開発の観点から、より効果的な方法を模索する必要がありました。そこでclaspを使用して開発環境を整える経験をしたため、claspを使用して環境を構築する手順を、サンプルアプリを通じて解説していけたらと思います。

なぜclaspを選択したか

GASの開発環境を整備する際、選択肢として主に2つの方法が浮上しました。一つはGoogle Apps Script Githubアシスタントを使用する方法、もう一つはclaspを利用する方法です。それぞれについて調査した内容を簡単に記載してみます。

Google Apps Script Githubアシスタント

・GUI操作: Google Chromeの拡張機能として提供されており、GUIを通じて操作が可能
・導入の容易さ: 比較的簡単に導入が可能で、直感的に使い始められる
・GASエディタ依存: 開発はGASのオンラインエディタを使用して行う必要がある
・メンテナンスの停止: 2021年以降、新たな更新やメンテナンスが行われていない状態
https://chromewebstore.google.com/detail/google-apps-script-github/lfjcgcmkmjjlieihflfhjopckgpelofo?hl=ja

clasp

・導入の難しさ: Google Apps Script Githubアシスタントに比べると導入が少々難しいですが、より柔軟な開発が可能
・アプリケーション開発ライクな環境: ローカルでの開発を通じて、アプリケーション開発に近い環境を構築できる
・継続的なメンテナンス: Googleが提供しているツールということもあり、アクティブにメンテナンスが行われており、安心して使用できる
https://github.com/google/clasp

これらの情報をもとに、非エンジニアの方や、個人での開発、シンプルなプロジェクトにはGoogle Apps Script Githubアシスタントも適しているかもしれません。
しかし、チームでの共同開発や、より高度なソースコード管理を求める場合、またはアプリケーション開発の経験が豊富な方には、claspの使用が適していると思いました。
そのため、今回はチーム開発の効率化とソースコード管理の向上を目指し、claspを使用して開発環境を構築することに決定しました。

サンプルアプリの作成

前提として今回は、既に作成済みのアプリをclaspで管理する用に構築という内容のため、GASで以下のような簡単なサンプルアプリを作成しておきます。

1. スプレッドシートの拡張機能タブのApps Scriptを選択

2. Apps Script エディタが開くため、以下のコードを貼り付け

1function helloWorld() {
2  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
3  sheet.getRange('A1').setValue('Hello World');
4}

3. 実行するとA1に Hello World と表示されます

claspの環境の構築

簡単なサンプルアプリができたため、次にclasp公式のGithubを参考に環境構築を行います。

1. claspのインストール
下記コマンドを実行してclaspのインストールを行います。

1npm install -g @google/clasp

2. Google Apps Script API を有効にする
https://script.google.com/home/usersettings にアクセスし、Google Apps Script API を有効にします。

3. ログイン
Googleの環境とやり取りをするためにログインを行います。

1clasp login

4. GASプロジェクトのクローン
下記コマンドを実行してクローンを行います。

1clasp clone {スクリプトのプロジェクトID}

※スクリプトのプロジェクトIDは画像のハイライトの箇所です

5. Githubリポジトリの作成

作成できたら以下のコマンドを実行しましょう

1git init
2echo ".clasp.json" >> .gitignore
3git add .
4git commit -m 'first commit'
5git remote add origin {リポジトリのURL}
6git push -u origin master

6. ソースコードの変更
試しにローカルでコードを変更してみてみましょう

claspのコマンドを使用して変更をGASにプッシュ

1clasp push

GASのエディタに戻って更新するとコードの変更が反映されています

スクリプトを実行して変更の確認

7. 変更をGithubにプッシュ

1git add main.js
2git commit -m 'second commit'
3git push origin master

まとめ

この記事を通じて、claspを使用したGoogle Apps Script（GAS）の開発環境の構築方法についてご紹介しました。
もし既に環境構築やアプリケーション開発の経験がある場合は、claspの導入は思いの外スムーズに感じられたかもしれません。

今回は、サンプルアプリの作成からGitでのバージョン管理までを解説しましたが、これはclaspの活用方法のほんの一部に過ぎません。
例えば、GitHub Actionsと組み合わせれば、CI/CDパイプラインを構築し、開発プロセスの自動化を図ることが可能です。また、TypeScriptを利用してGASのプロジェクトを実装することもできます。
これらの技術を活用することで、GASプロジェクトの開発効率と品質を大幅に向上させることができます。GASを使用している方は、ぜひclaspの導入を検討してみてはいかがでしょうか。