GASをローカル環境で開発する

Claude Codeを使ってGAS（Google Apps Script）のプロジェクトを作成したいときに、ローカル環境で構築し、手作業でGASに反映する作業に手間を感じていました。

そこで、clasp⁠（新しいタブで開く）を使ってローカル環境で構築し、GitHubを通してGASにデプロイできる仕組みを導入します。

claspはApps Script エディタではなく、ターミナルからGASのプロジェクトを開発できるようにするためのツールです。

• Node.js v20以上（v22以降を推奨）
• GitHub CLI（なくても良いです）

1. Apps Scriptの設定⁠（新しいタブで開く）を開きます。
2. 「Google Apps Script API」を選択し、設定をオンにします。

   

   Apps Scriptの設定画面。Google Apps Script APIがオンになっている

1. 作業用のディレクトリを作成し、npmプロジェクトとして初期化します。

   ターミナルbash · 1行折り返すコピー（ターミナル）

   $npm init -y

2. 続いてclaspをグローバルインストールします。

   ターミナルbash · 1行折り返すコピー（ターミナル）

   $npm i @google/clasp -g

3. インストールできたことを確認します。バージョン番号が出力されればOKです。

   ターミナルbash · 2行折り返すコピー（ターミナル）

   $clasp --version出力3.4.1

1. 次のコマンドを実行します。

   ターミナルbash · 1行折り返すコピー（ターミナル）

   $clasp login

2. ブラウザでGoogleアカウントの認可画面が開くので、GASプロジェクトを管理するアカウントで許可してください。

   

   claspのログインで、Googleアカウントを選ぶ画面

3. アクセスされる情報を確認して、「次へ」を押してください。

   

   claspに名前とメールアドレスへのアクセスを許可する画面

4. claspがアクセスできる情報を選択して、「次へ」を押してください。最低限以下の画像のとおりにチェックが入っていれば大丈夫です。

   あとから許可が必要になった場合はclasp loginをやり直してください。

   

   claspがアクセスできる情報を選ぶ画面。ドライブ上の特定のファイル、ウェブアプリとしての公開、デプロイの作成と更新、プロジェクトの作成と更新にチェックが入っている

5. 白い画面に「Logged in! You may close this page.」とだけ表示されたページが表示されたら、ブラウザを閉じターミナルに戻ります。
6. 認可が完了すると、ホームディレクトリに~/.clasprc.jsonが作成されます。
7. ログイン状態は以下のコマンドで確認します。

   ターミナルbash · 3行折り返すコピー（ターミナル）

   $clasp show-authorized-user出力You are logged in as <ログインしたアカウントのメールアドレス>.OAuth client ID: 1072944905499-vm2v2i5dvn0a0d2o4ca36i1vge8cvbn0.apps.googleusercontent.com (google-provided).

GASプロジェクトの作成はclaspでもできますが、今回はWebページ上で作成します。

1. script.google.com⁠（新しいタブで開く）を開き、「新しいプロジェクト」を選択します。
   補足

   Google ドライブで任意のフォルダ内で右クリックをして、GASプロジェクトを作成することもできます。

   

   また、スプレッドシートなどに紐づいたコンテナバインドスクリプトを使う場合は、対象ファイルを開き、「拡張機能」から「Apps Script」を選んで作成します。

   

2. エディタ上部の「無題のプロジェクト」をクリックし、プロジェクト名（例としてtest-gas-app）を入力し、「名前の変更」をクリックします。

   

3. プロジェクトの左側のメニューにある「プロジェクトの設定」を開き、IDセクションの「スクリプト ID」をコピーします。
4. 作業用のディレクトリで作成したプロジェクトのスクリプト IDを指定して、次のコマンドを実行します。

   ターミナルbash · 1行折り返すコピー（ターミナル）

   $clasp clone-script "<スクリプト ID>" --rootDir src

5. 作業用のディレクトリが以下のようになっていることを確認してください。
   .clasp.jsonのrootDirがsrcを相対パスで指していることを確認してください。
   • /（フォルダ）
     • src（フォルダ）
       • appsscript.json（ファイル）
       • コード.js（ファイル）
     • .clasp.json（ファイル）
     • package.json（ファイル）

1. 以下のコマンドを実行して、GASに送信されるファイルを確認します。

   ターミナルbash · 1行折り返すコピー（ターミナル）

   $clasp show-file-status

2. 以下のコマンドを実行して、GASに反映します。

   ターミナルbash · 1行折り返すコピー（ターミナル）

   $clasp push

   補足

   GASのエディタにappsscript.jsonが表示されていない場合は、エディタの「プロジェクトの設定 > 全般設定」で「「appsscript.json」マニフェスト ファイルをエディタで表示する」にチェックを入れることで表示することができます。

   

   プロジェクトの設定の全般設定。「appsscript.json」マニフェスト ファイルをエディタで表示する、にチェックが入っている

最初のデプロイはGASのエディタで作成します。ここで作成したデプロイのIDを、以降の自動デプロイとWebアプリの更新で使い続けます。

1. clasp open-scriptを実行するか、script.google.com⁠（新しいタブで開く）からプロジェクトを開きます。
2. 画面右上の「デプロイ」から「新しいデプロイ」を選択します。

   

3. 「種類の選択」の横の歯車アイコンをクリックし、「ウェブアプリ」を選択します。

   

4. 「新しい説明文」に「v0.1.0 初回デプロイ」などと入力し、「次のユーザーとして実行」は「自分」、「アクセスできるユーザー」は「自分のみ」を設定します。

   

   新しいデプロイの設定。説明にv0.1.0 初回デプロイ、次のユーザーとして実行に自分、アクセスできるユーザーに自分のみを設定している

   補足

   「次のユーザーとして実行」と「アクセスできるユーザー」はどのようなGASプロジェクトを作るかによって設定すべき項目が異なる場合もあるためご自身で判断してください。

5. 「デプロイ」をクリックします。
6. 表示されたデプロイIDとウェブアプリのURLをコピーします。

   

   デプロイの完了画面。デプロイIDとウェブアプリのURLをコピーできる

デプロイIDは、エディタの「デプロイ」から「デプロイを管理」を開き、対象のデプロイを選択すると確認ができます。

ターミナルでは次のコマンドで一覧を表示できます。

$clasp list-deployments出力Found 2 deployments.- <デプロイ ID> @HEAD - <デプロイ ID> @1 - v0.1.0 初回デプロイ

@HEADと表示されているデプロイは常に最新のコードを指すテスト用のデプロイのため、URLを変えずに更新する用途には使用できません。
そのため、今回は初回デプロイ（@1）に記載されているデプロイIDを使用します。

1. GitHubで空のリポジトリを作成⁠（新しいタブで開く）してください。
2. .gitignoreを作成し、以下を追加します。

   .gitignoreテキスト · 2行折り返すコピー（.gitignore）

   1# clasp の認証情報2.clasprc.json

   補足

   環境変数のファイル（.env）やnode_modules/を使う場合は、必要に応じて.gitignoreに追加してください。

3. 以下のコマンドを実行し、ローカルのフォルダをGitリポジトリとして初期化し、pushしてください。

   ターミナルbash · 6行折り返すコピー（ターミナル）

   $git init$git add .$git commit -m "Initial commit"$git branch -M main$git remote add origin https://github.com/<ユーザー名>/<リポジトリ名>.git$git push -u origin main

GitHub Actionsで使う認証情報とデプロイIDを、リポジトリに登録します。

以下のコマンドを実行してGitHubのシークレットと変数に設定します。

$gh secret set CLASPRC_JSON < ~/.clasprc.json$gh variable set DEPLOYMENT_ID --body "<デプロイID>"

mainブランチにpushしたときに、GASへの反映とWebアプリのデプロイ更新を自動で行うワークフローを作成します。

ワークフローを追加した後のフォルダ構成は次のとおりです。

.github/workflows/deploy.ymlを次の内容で作成します。

1name: Deploy to Apps Script23on:4  push:5    branches: [main]6  workflow_dispatch:78permissions:9  contents: read1011# 同時に複数のデプロイが実行されないようにする12concurrency:13  group: gas-deploy14  cancel-in-progress: false1516jobs:17  deploy:18    runs-on: ubuntu-latest19    steps:20      - uses: actions/checkout@v62122      - uses: actions/setup-node@v623        with:24          node-version: 222526      # ローカルの clasp --version と同じバージョンを指定する27      - name: Install clasp28        run: npm install -g @google/clasp@3.4.12930      - name: Write clasp credentials31        env:32          CLASPRC_JSON: ${{ secrets.CLASPRC_JSON }}33        run: |34          umask 07735          printf '%s' "$CLASPRC_JSON" > "$HOME/.clasprc.json"3637      - name: Push to Apps Script38        run: clasp push --force3940      - name: Update deployment41        env:42          DEPLOYMENT_ID: ${{ vars.DEPLOYMENT_ID }}43        run: clasp update-deployment "$DEPLOYMENT_ID" --description "deploy ${GITHUB_SHA::7}"

1. ワークフローのファイルをコミットし、mainブランチにpushします。

   ターミナルbash · 3行折り返すコピー（ターミナル）

   $git add .github$git commit -m "Add deploy workflow"$git push

2. GitHubのリポジトリの「Actions」タブで、「Deploy to Apps Script」が画像のように成功していることを確認します。

   

   GitHub Actionsで「Deploy to Apps Script」のワークフローの実行が成功している

3. GASのエディタで「デプロイ」から「デプロイを管理」を開き、初回デプロイからバージョンが上がり、説明にコミットの短縮SHAが入っていることを確認します。

   

   「デプロイを管理」の画面。説明がdeploy dd5200eに変わり、バージョン2になっている

このワークフローによりローカルでバージョン管理をしつつ、作成したGASのプロジェクトを自動デプロイすることができるようになります。

pushする前にローカルでアプリを確認することはできないため、デザインはローカルで動くHTMLの状態でサンドボックスを作成し、それをGASに作り変える進め方がスムーズだと思います。

Claude CodeやCodexを使うことでさらに効率的に開発ができるようになるので、ぜひ試してみてください。

• clasp でコマンドライン インターフェースを使用する  |  Apps Script  |  Google for Developers⁠（新しいタブで開く）
• clasp Codelab⁠（新しいタブで開く）