【GAS】好きなエディタで開発したい！Clasp + GitHub Actions で作る CI/CD 環境構築（前編：Clasp導入編）

はじめに

こんにちは！開発エンジニアのクリスです。

皆さんは Google Apps Script (GAS)、書いてますか？
スプレッドシートの自動化やちょっとしたWebアプリの作成など、非常に便利ですよね。

でも、「ブラウザのエディタだと書きづらい…」「VScodeなどの好きなエディタで書きたい！」「Gitでバージョン管理したい！」 と思ったことはありませんか？

今回はそんな悩みを解決するために、Clasp を導入してローカル環境で開発する方法をご紹介します。

実はこの記事、「GitHub Actions を使って GAS の CI/CD（自動デプロイ）環境を構築する」 という大きなテーマの 【前編】 になります。
まずはその土台となる、Clasp の導入と基本的な使い方をマスターしていきましょう！

この記事の対象読者

• Google Apps Script (GAS) をなんとなく使っている方
• CI/CD という言葉は聞いたことがあるけれど、実際にどう組むのか興味がある方
• ブラウザ上のエディタを卒業し、効率的な開発環境を整えたい方

なぜやるのか？

• 開発効率の向上：使い慣れたIDE（VS Codeなど）の機能補完やプラグインを活用したい。
• 自動化：手動デプロイの手間をなくし、コードをGitにプッシュするだけで反映させたい。

用語解説

Clasp とは？

Google が提供している CLI (Command Line Interface) ツールです。これを使うことで、ローカルにあるコードを GAS のプロジェクトにアップロードしたり、逆にダウンロードしたり、デプロイを行ったりすることができます。

GitHub Actions とは？

GitHub が提供している CI/CD サービスです。（今回は名前だけの登場ですが、次回の後編でガッツリ使います！）

---

フロー

それでは早速、環境構築を進めていきましょう！

1. プロジェクトディレクトリの準備

まずは、ローカル環境で GAS のファイルを管理するためのディレクトリを作成し、移動します。

mkdir application-sample
cd application-sample

2. Clasp のインストール

Clasp を利用するには Node.js が必要です。以下のコマンドでインストールします。

npm install @google/clasp -g

または、ローカルを汚したくない場合はインストールせずに npx を利用することも可能です。

Clasp のバージョンについて
claspは、v2系とv3系（現在の最新）でコマンドの挙動や内部仕様が大きく変わっている箇所があります。基本的には最新のバージョンを利用しましょう。

clasp version コマンドの注意点
clasp version というコマンドを実行すると、ツールのバージョンが表示されると思いきや、これは GASのデプロイメントを作成してバージョン管理するため のコマンドです。
ツールのバージョンを確認したい場合は clasp -v や npm list -g @google/clasp 等で確認しましょう。
（npx で実行する場合は常に最新版が取得されるため、あまり気にしなくて大丈夫です）

3. Google アカウントへのログイン

Clasp があなたの Google アカウントの GAS プロジェクトにアクセスできるよう、ログイン認証を行います。

clasp login

コマンドを実行するとブラウザが立ち上がりますので、利用する Google アカウントを選択して承認してください。

4. GAS API の有効化

Clasp が GAS を操作するためには、Google アカウント側で API へのアクセスを許可する必要があります。

こちらのユーザー設定画面 にアクセスし、「Google Apps Script API」 を 「オン」 に設定してください。これをしておかないと、後の手順でエラーになります。

5. GAS プロジェクトの作成

ブラウザでポチポチ作成するのはもう卒業です。ターミナルからかっこよく作成しましょう！

clasp create --title "application-sample" --type standalone --rootDir ./

• --title: プロジェクト名
• --type: プロジェクトの種類（今回は standalone。スプレッドシートに紐付ける場合は sheets など）
• --rootDir: ローカルのルートディレクトリを指定

6. ディレクトリ構成の確認

作成が完了すると、以下のようなファイル構成になります。

.
├── .clasp.json
├── appsscript.json
└── src                 # このディレクトリーは手動で作成されたもの
    ├── index.html      # このファイルは手動で作成されたもの
    └── main.js         # このファイルは手動で作成されたもの

それぞれのファイルの役割は以下の通りです。

• .clasp.json:
  • GAS の Script ID や、どのディレクトリを見るかなどの設定情報が入っています。
• appsscript.json:
  • GAS プロジェクトのマニフェストファイルです。タイムゾーンやランタイムバージョンなどの設定が入っています。
• src:
  • 実際のコード（.js や .html）を保存する場所です。
  • Point: GAS 上には「ディレクトリ」という概念がありません。そのため、src/main.js というファイルを作成して push すると、GAS 上では src/main.gs というファイル名（/が含まれる名前）として表示されます。
  • Clasp は再帰的にファイルを検索してくれるため、ローカルでは管理しやすいように自由にフォルダ分けしてOKです。

7. マニフェストファイルの修正（Webアプリ用）

Webアプリケーションとして公開するための設定を行います。
src 内にコードを書き終えたら、GAS へ反映する前に appsscript.json を編集して webapp の設定を追加します。

appsscript.json

{
  "timeZone": "Asia/Tokyo",
  "dependencies": {},
  "webapp": {                            # ここから
    "access": "MYSELF",
    "executeAs": "USER_ACCESSING"
  },　　　　　　　　　　　　　　　　　　　　　　# ここまで
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}

ここで追加した設定の意味は以下の通りです。

• access: MYSELF
  • このウェブアプリにアクセスできるユーザーを「自分のみ」に制限します。（全員に公開する場合は ANYONE などになります、その他にDOMAIN、ANYONE_ANONYMOUSがあります）
• executeAs: USER_ACCESSING
  • スクリプトを「アクセスしたユーザーの権限」で実行します。（開発者の権限で動かす場合は USER_DEPLOYING になります）

8. ローカルのコードを GAS へ反映（Push）

コードと設定の準備ができたら、GAS サーバーへアップロードします。

clasp push

シンプルでわかりやすいコマンドですね。

マニフェストの上書き確認
ローカルで appsscript.json を変更している場合、サーバー上の設定を上書きしてよいか確認されます。

Chris1:application-sample Chris$ clasp push
✔ Manifest file has been updated. Do you want to push and overwrite? Yes
Pushed 3 files.
└─ appsscript.json
└─ src/index.html
└─ src/main.js

ここでのポイントは、clasp push はあくまで「エディタ上での保存」と同じ状態 ということです。まだ Web アプリとしてデプロイ（公開）されたわけではありません。

9. デプロイ（Webアプリとして公開）

Web アプリとして利用可能な状態にするには deploy コマンドを使います。

clasp deploy --description "Initial Deploy"

実行結果：

Deployed AKfycbz2fhMwnkwhGqVMTrmacQAMCqiMVnbXYCuBDVcjHxbLNP0pw-lxHbCFcR2TUrP4vaQb @1

これで「バージョン1」としてデプロイが完了し、発行された URL で Web アプリが利用可能になりました！

上記記載されたIDはこの記事のためランダムに生成された文字列です！

10. 継続的なデプロイ（URLを固定して更新する）

開発を進めていくと、修正版を再度デプロイすることになります。
毎回 clasp deploy をそのまま叩くと新しいデプロイID（新しいURL）が発行されてしまい不便です。

「同じ URL のまま、中身だけ最新にしたい」 場合は、既存のデプロイIDに対して上書きデプロイを行います。

まず、現在のデプロイ状況を確認します。

Chris1:application-sample Chris$ clasp deployments
Found 2 deployments.
- AKfycbw4zTuQ4j2YVlmwNGXcArEN-D275gIS2MYRvAz4sJw @HEAD 
- AKfycbz2fhMwnkwhGqVMTrmacQAMCqiMVnbXYCuBDVcjHxbLNP0pw-lxHbCFcR2TUrP4vaQb @1 - Initial deploy

先ほど作成した @1 のデプロイID（長い文字列の方）をコピーして、-i オプションで指定してデプロイします。

clasp deploy -i <先ほど控えたID> --description "Secondary Deploy"

これで URL を変更することなく、新しいバージョンのコードを反映させることができました！

注意
デプロイを実行すると、コードだけでなく appsscript.json の変更なども反映されます。権限周りの設定を変更した際などは必ずデプロイ更新を忘れないようにしましょう。

---

さいごに

今回は Clasp を導入して、ローカル環境から GAS を操作・デプロイする基本的な流れをご紹介しました。
これで好きなエディタでバリバリ開発できますね！

しかし、毎回手動で clasp push や clasp deploy を打つのも、だんだん面倒になってきませんか？

次回は【後編】として、GitHub Actions を組み合わせて、Git にプッシュしたら自動でデプロイされる CI/CD 環境の構築方法 を解説します。お楽しみに！