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

はじめに

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

前編では、Clasp を導入してローカルで GAS を開発・デプロイする方法をご紹介しました。
しかし、毎回ターミナルで clasp push や clasp deploy を打つのも、だんだん面倒になってきませんか？

今回は GitHub Actions を組み合わせて、「Git にプッシュするだけで、勝手にデプロイしてくれる」 最高の環境（CI/CD）を構築していきましょう！

今回の戦略（Git Flow と環境分離）

いきなりコードを書く前に、どうやって環境を管理するか整理しておきます。
今回はシンプルに Git Flow の考え方を取り入れ、以下のように運用します。

• develop ブランチ: Dev 環境（開発用 GAS プロジェクト）へデプロイ
• main ブランチ: Prd 環境（本番用 GAS プロジェクト）へデプロイ

こうすることで、「開発中にうっかり本番環境を壊してしまった！」という事故を防ぐことができます。

1. プロジェクト設定ファイルの準備

Clasp は .clasp.json というファイルを見て、「どの GAS プロジェクトにアップロードするか」を判断しています。
今回は環境を切り替えるため、このファイルの名前を変更しておきます。

Dev環境用の設定ファイル

前編で作成した .clasp.json を、Dev環境用としてリネームします。

mv .clasp.json clasp-dev.json

Prd環境も作りたい場合
本番環境も同時に構築したい場合は、前編の手順でもう一つ新規に GAS プロジェクトを作成し、そこで生成された .clasp.json を clasp-prd.json という名前にリネームしてルートディレクトリに置いてください。
今回は Dev 環境メインで進めますが、仕組みは同じです。

これで、ルートディレクトリには .clasp.json がない状態になりました。
「え、それじゃ Clasp 動かないじゃん？」と思いましたか？
その通りです！ なので、GitHub Actions の中で「ブランチに合わせて適切な json ファイルをコピーして使う」という処理を記述します。

2. GitHub Actions ワークフローの作成

GitHub Actions を動かすための定義ファイルを作成します。

mkdir -p .github/workflows
touch .github/workflows/deploy.yml

作成した deploy.yml に以下の内容を記述します。

deploy.yml

name: Deploy to GAS

on:
  push:
    branches:
      - main
      - develop

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      # 1. Checkout the code from GitHub
      - name: Checkout Code
        uses: actions/checkout@v4

      # 2. Setup Node.js environment
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: "20"

      # 3. Create the ~/.clasprc.json file from the Secret
      - name: Write .clasprc.json
        run: echo "$CLASPRC_JSON" > ~/.clasprc.json
        env:
          CLASPRC_JSON: ${{ secrets.CLASPRC_JSON }}

      # 4. Select Environment Config
      - name: Select Clasp Config
        run: |
          if [[ "${{ github.ref }}" == "refs/heads/main" ]]; then
            cp clasp-prd.json .clasp.json
            echo "DEPLOYMENT_ID=${{ secrets.DEPLOYMENT_ID_PRD }}" >> $GITHUB_ENV
            echo "Selected Production Config"
          elif [[ "${{ github.ref }}" == "refs/heads/develop" ]]; then
            cp clasp-dev.json .clasp.json
            echo "DEPLOYMENT_ID=${{ secrets.DEPLOYMENT_ID_DEV }}" >> $GITHUB_ENV
            echo "Selected Development Config"
          else
            echo "Unknown branch, skipping deployment setup"
            exit 1
          fi

      # 5. Push the code to Google Apps Script
      - name: Deploy with Clasp
        run: |
          npx -y @google/clasp push --force
          npx -y @google/clasp deploy --deploymentId ${{ env.DEPLOYMENT_ID }} --description "Deployed from GitHub SHA: $GITHUB_SHA"

ワークフローの解説

特に重要なのは Step 4: Select Clasp Config です。
ここで、「今どのブランチに push されたか」を判定し、以下の処理を行っています。

1. 対応する json ファイル（clasp-dev.json など）を、正式な設定ファイル名である .clasp.json にコピーしてリネーム。
2. 対応する デプロイメントID（URLを固定するためのID）を環境変数にセット。

これにより、一つのリポジトリで複数の GAS 環境を安全に使い分けることができます。

3. GitHub リポジトリの準備

ローカルの準備ができたので、Git の設定をして GitHub にリポジトリを作成しましょう。
ブラウザを開くのは面倒なので、ターミナルですべて完結させます！（gh コマンドが必要です）

# Gitの初期化
git init
git add .
git commit -m "chore: initial commit"

# GitHub認証（これだけはブラウザが開くかも…許してね！）
gh auth login

# リポジトリの作成とプッシュ設定
gh repo create mermaid-downloader-sample --private --source=. --remote=origin

これで GitHub 上に空のリポジトリが作成され、連携されました。

4. Secrets（機密情報）の設定

ここが最重要ポイントです。
GitHub Actions があなたの代わりに GAS を操作できるように、認証情報 と デプロイ先情報 を GitHub の Secrets（環境変数）に登録する必要があります。

設定する項目は以下の通りです。

1. CLASPRC_JSON: Clasp のログイン認証情報
2. DEPLOYMENT_ID_DEV: Dev環境の固定デプロイID
3. DEPLOYMENT_ID_PRD: Prd環境の固定デプロイID（ある場合）

4-1. 認証情報（CLASPRC_JSON）の登録

ローカルで clasp login した際に生成された認証情報を利用します。

# 認証情報を表示してコピーする
cat ~/.clasprc.json

表示された JSON 文字列（{"token":...}）を丸ごとコピーしてください。

次に、GitHub に登録します。

gh secret set CLASPRC_JSON

コマンドを実行すると入力待ちになるので、先ほどコピーした JSON を貼り付けて Enter を押します。

? Paste your secret: **************************************************************************************************
✓ Set Actions secret CLASPRC_JSON for CHRiSTeeNA0717/mermaid-downloader-sample

JSON は改行が入ってるので、うまくいかない場合は改行なしの1行に整形してから貼り付けると確実です。

4-2. デプロイメントID（DEPLOYMENT_ID_DEV）の登録

前編で解説した通り、URL を変えずに更新するにはデプロイIDが必要です。

# デプロイIDを確認
clasp deployments

出力されたリストから、更新対象としたい Active なデプロイID（@1 などがついている行の長い文字列）をコピーします。

# GitHub Secretsに登録
gh secret set DEPLOYMENT_ID_DEV
# コピーしたIDを貼り付ける

（Prd環境がある場合は、同様に DEPLOYMENT_ID_PRD も登録してください）

5. いざ、デプロイ！（Push）

すべての準備が整いました。クライマックスです！
develop ブランチを作成して、GitHub にプッシュしてみましょう。

git checkout -b develop
git push --set-upstream origin develop

プッシュしたら、GitHub のリポジトリページにある 「Actions」 タブを開いてみてください。
ワークフローが緑色になり、成功していれば完了です！

実行ログの確認

Actions のログを見てみましょう。以下のような表示になっていれば大成功です。

▶︎ Run npx -y @google/clasp push --force
...
Pushed 3 files.

▶︎ Run npx -y @google/clasp deploy ...
- AKfycb... @2

• Pushed ... files: コードが GAS 上にアップロードされました。
• @2: バージョン番号が上がり、新しいバージョンとしてデプロイされました（URLは変わりません）。

認証情報の有効期限に関する注意（Disclaimer）
Clasp のログイン情報（認証トークン）は、セキュリティ上の理由で有効期限が切れることがあります。
もし久しぶりのデプロイなどで GitHub Actions が認証エラーにより失敗した場合は、トークン切れの可能性が高いです。
その際は、ローカルで再度 clasp login を行い、新しい内容で GitHub Secrets (CLASPRC_JSON) を更新してください。

さいごに

お疲れ様でした！
これで、好きなエディタでコードを書き、Git に git push するだけで GAS が自動的に更新される、モダンで快適な開発環境が手に入りました。

チーム開発でも「誰かのPCからじゃないとデプロイできない」という属人化を防ぐことができ、非常に強力です。
ぜひ活用してみてください！

サンプルコード
今回の記事で使用したコードの完成形は GitHub にアップロードしています。ぜひ clone して遊んでみてください！