🕳️

GASプロジェクトを"ローカルの開発環境で管理することができる"claspの使い方

2023/10/31に公開

Git

claspとは

GASのスクリプトをローカルでjsなどで書くことができるため、クラウド上のGASエディタにスクリプトを記述しなくて良い
Gitにコードをpushできるため、コードを管理しやすい

https://github.com/google/clasp

どういうものか理解するために以下の流れに沿って使用してみてください🪄

Google Apps ScriptのAPIの有効化

まず、下記のリンクにアクセスしてください。

オフになっていると思うのでクリックしてオンにしてください。

画面を戻り、オンになっていればGoogle Apps ScriptのAPIの有効化ができています。

有効化しなかった場合、Error: ENOENT: no such file or directory, lstat 'dist/.clasp.json' というエラーが出て実行できません。

claspのインストール

プロジェクトにclaspをインストールしてください。

npm install -g @google/clasp

下記のファイルが作成されます。

./
├ node_modules
├ package.json
└ package-lock.json

次のコマンドの@types/google-apps-scriptはコーディング時に、コード補完されるようになるパッケージです。

npm install @types/google-apps-script

Vscodeでは、こんな感じで補完してくれます。

Googleアカウントでログイン

コマンドを実行すると自動で遷移するかと思います。

clasp login

許可を選択してください。

以下の画面が表示されますので戻ります。

clasp loginを実行すると、ログインしたアカウントの.clasprc.jsonという認証情報と設定を保存するためのファイルがホームディレクトリ以下に生成されます。

プログラムの新規作成

以下のコマンドを実行してプログラムを新規作成します。

clasp create

続いて連携するサービスを選択します。

? Create which script? 
  standalone 
  docs 
❯ sheets # 今回はスプレッドシートと紐づいた状態で作成したいので選択
  slides 
  forms 
  webapp 
  api

スプレッドシートと紐づいた状態で作成され、下記のファイルが作成されます。

./
├ .clasp.json
└ appsscript.json

Apps Scriptダッシュボードを確認すると、claspというファイルが作成されています。
今回のプロジェクト名がclaspなのでclaspというファイル名になっています。

ソースファイルの作成

main.jsという名前のファイルを以下のように作成します。

./
└ main.js

内容はこのような感じです。

main.js


function test() {
    console.log('aaa');
}

デプロイ

デプロイとは、ローカルで作成したGASのコードをクラウド上のGASエディタにアップロードすることを指しています。

clasp push

下記のコマンドを実行すると

clasp open

次のようにApps Scriptのページに自動で遷移すると思います。

TypeScriptは使用できないのか？

test.tsという名前のファイルを以下のように作成します。

./
└ test.ts

内容はこのような感じにしました。

test.ts

function test(): void {
  console.log('aaa');
}

すると、同じ名前の関数が複数回宣言されている
Duplicate function implementation.ts(2393)というエラーが出ました。
先ほどのmain.jsでtest()を使用していることが原因みたいですね。

関数名を修正して

test.ts

function ts_test(): void {
  console.log('aaa');
}

デプロイします。

clasp push

Apps Scriptのリンクを確認します。

clasp open

以下のように問題なく実行できました！

既存のプロジェクトにclaspを追加する場合

まずはプログラムの新規作成まで行います。

clasp用のディレクトリを作成する
ルートディレクトリにclasp用のフォルダを作成し、その中にappsscript.jsonを移動させてください。

このclasp用のディレクトリの中にGASで使用するファイルは作成するようにしてください。
あとは通常通り、プロジェクトのルートディレクトリでデプロイすれば使用できます。

.clasp.jsonについて

{
  "scriptId": "",
  "rootDir": "./dist",
  "parentId": [""]
}

このJSONファイルは、Googleのclasp（Command Line Apps Script Projects）ツールの設定ファイルです。

scriptId: このIDはGoogle Apps Scriptプロジェクトを一意に識別します。このIDを使用して、claspコマンドを介して特定のプロジェクトにアクセスし、操作（例えばプッシュ、プル、デプロイなど）を行います。

rootDir: このプロパティはローカルの開発ディレクトリのパスを指定します。claspコマンドを実行する際、このディレクトリ内のファイルがGoogle Apps Scriptのプロジェクトに同期されます。ここで指定された"./dist"は、現在のプロジェクトディレクトリのdistフォルダを指し、このフォルダ内のファイルが同期の対象となります。

parentId: この配列は、プロジェクトが属するGoogle DriveのフォルダのIDを含みます。これにより、プロジェクトがGoogle Drive内の特定のフォルダに関連付けられます。配列形式であるため、複数の親フォルダIDを持つことが可能ですが、一般的には1つのIDが使用されます。

参考にさせていただきました

終わりに

何かありましたらお気軽にコメント等いただけると助かります。
ここまでお読みいただきありがとうございます🎉