GASをVSCodeで開発する

Posted at 2024-11-21

はじめに

通常 Google Apps Script (GAS) の開発は Apps Script エディタ上で行いますが、Googleが配布している clasp というツールを使うと VSCode などのローカル開発環境でもGAS開発を進めることができます。

以下はローカル開発環境でGASを開発する主なメリットです。

また、GASでUIにこだわりたい場合、Reactなどで生成したUIを webpack や vite でコンパイルして利用する方法があるのですが、そのような運用ではNode.jsを使えるローカル環境での開発が必要になる場面もあります。

そこで、この記事ではVSCodeでGASの開発を進める場合を例に環境設定の方法を紹介します。

claspはGASのスクリプトプロジェクトとローカルファイルを相互に連携できるようにGoogleが提供しているCLIツールです。

claspは Node.js のパッケージとして配布されています。なので、claspを使うにはまずローカル環境に Node.js をインストールする必要があります。

Node.jsをインストールするには公式サイトからインストーラを入手して実行しましょう。

Node.jsがインストールできたらclaspのインストールは次のコマンドで実行できます。

npm i @google/clasp -g

コマンドの実行が完了したら次のコマンドで正常にインストールされていることを確認しましょう。

clasp -v

claspをGASのスクリプトプロジェクトと連携できるようにするには何よりまずアカウントの認証が必要です。

アカウント認証は次のコマンドで実行できます。

clasp login

認証中にエラーが発生した場合

組織のGoogle Workspaceアカウントを使っている場合、認証の途中で「admin_policy_enforced」というエラーが発生する場合があります。これは組織のポリシーでclaspが利用可能になっていないことが原因です。

もし Google Admin Console にアクセス可能なら「セキュリティ」→「アクセスとデータ管理」→「APIの制御」と進んで「新しいアプリを設定」から「clasp - The Apps Script CLI」の利用を許可してください。

claspで新しいスクリプトプロジェクトを作成する手順は下記のとおりです。

ディレクトリを作成する
スクリプトプロジェクトにプッシュするファイルを格納するディレクトリを作成して移動します。
```
mkdir create_new_project
cd create_new_project
```
プロジェクトを作成する
プロジェクトを作成するには次のコマンドを実行して後はターミナルの指示に従って操作すればOKです。
```
clasp create --title "sample_project"
```

プロジェクトの種類

スクリプトプロジェクトを作成するときに表示されるプロジェクトの種類には次のものがあります。

claspでは既存のスクリプトプロジェクトをクローンしてローカル環境に置くことができます。

ディレクトリを作成する
スクリプトプロジェクトにファイルをクローンするディレクトリを作成して移動します。
```
mkdir clone_project
cd clone_project
```
スクリプトIDを確認する
スクリプトプロジェクトには一意のスクリプトIDが設定されています。
このスクリプトIDはスクリプトエディタで「プロジェクトの設定」→「ID」→「スクリプトID」に探すと見つかります。
プロジェクトをクローンする
プロジェクトをクローンするには次のコマンドに前の手順で確認したスクリプトIDを与えればOKです。
```
clasp clone スクリプトID
```

せっかくファイルをローカル環境で編集できるようにしたので、自動補完が使えるようGASの型定義をインストールしてみましょう。

次のコマンドでnpmの設定を初期化してGASの型定義をインストールします。

npm init --y
npm i @types/google-apps-script --save-dev

ローカル環境とスクリプトプロジェクトのソースコードを同期させるには定期的にGitHubで言うプル・プッシュに当たる操作をする必要があります。

GitHubのプルに当たる操作、つまりスクリプトプロジェクトの内容をローカル環境に反映させるには次のコマンドを実行します。

clasp pull

そして、反対にローカル環境の内容をスクリプトプロジェクトに反映させるには次のコマンドを実行します。

clasp push

GitHubのプル・プッシュとの違い

GitHubのプル・プッシュは同じファイルが更新されていた場合にファイル内の差分を反映させてくれますが、claspのプル・プッシュは同じファイルを更新した場合に一方のファイルを上書きしてしまうので注意してください。

個人的な意見としては、claspのプルは廃止し、GitHubで管理されたソースをプルしてclaspからプッシュするという運用を徹底することをお勧めします。