GASをVSCodeで開発する

# はじめに

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

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

- 好きなエディタを使えるので開発体験が向上する
- ファイルをディレクトリで管理できる（スクリプトエディタではできない）
- TypeScriptで開発したスクリプトは自動的に.gsファイルに変換される

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

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


# claspのインストール

## claspの概要

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

## claspのインストール

### Node.jsのインストール（必要な場合）

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

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

- Node.js 公式サイト：[https://nodejs.org/en/](https://nodejs.org/en/)

### claspのインストール

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

```sh
npm i @google/clasp -g
```

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

```sh
clasp -v
```



# claspの基本操作

## 認証

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

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

```sh
clasp login
```

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

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


## プロジェクトの作成

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

1. ディレクトリを作成する
    スクリプトプロジェクトにプッシュするファイルを格納するディレクトリを作成して移動します。

    ```sh
    mkdir create_new_project
    cd create_new_project
    ```
    <br>

1. プロジェクトを作成する
    プロジェクトを作成するには次のコマンドを実行して後はターミナルの指示に従って操作すればOKです。
    
    ```sh
    clasp create --title "sample_project"
    ```
    
:::note info
プロジェクトの種類
<details>
スクリプトプロジェクトを作成するときに表示されるプロジェクトの種類には次のものがあります。

- スタンドアロンプロジェクト：
    スクリプトプロジェクト単体のプロジェクト。
        
- コンテナバインドプロジェクト：
    GoogleWorkspaceアプリのコンテナ(ファイル)と紐づけられたスクリプトプロジェクト。
        
    具体的には次の種類がある。
        
    - docs: Googleドキュメントと紐づけられたスクリプトプロジェクト
    - sheets: Googleスプレッドシートと紐づけられたスクリプトプロジェクト
    - forms: Googleフォームと関連付けられたGASのプロジェクト
    - webapp: Webアプリを作成するためのスクリプトプロジェクト
    - api: APIを作成するためのスクリプトプロジェクト
</details>
:::


## プロジェクトのクローン

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

1. ディレクトリを作成する
    スクリプトプロジェクトにファイルをクローンするディレクトリを作成して移動します。

    ```sh
    mkdir clone_project
    cd clone_project
    ```
    <br>

1. スクリプトIDを確認する
    スクリプトプロジェクトには一意のスクリプトIDが設定されています。
    このスクリプトIDはスクリプトエディタで「プロジェクトの設定」→「ID」→「スクリプトID」に探すと見つかります。

1. プロジェクトをクローンする
    プロジェクトをクローンするには次のコマンドに前の手順で確認したスクリプトIDを与えればOKです。
    
    ```sh
    clasp clone スクリプトID
    ```


## 自動補完を有効にする

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

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

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


## プル・プッシュ

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

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

```sh
clasp pull
```

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

```sh
clasp push
```

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

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