GAS＋サイドバー開発（Windows 11＋Antigravity）環境構築ガイド

目的

Google Apps Script（GAS）＋サイドバー（Google Sheets業務のコントローラー）を、工数少なく・インシデントを起こしにくく開発できるローカル環境を、初心者でも再現できる形で整える。

このガイドの方針（重要）

• 環境差分を減らす：開発場所・手順・同期対象を固定する

• 同期事故を減らす：clasp の push 対象を最小化する

• 権限事故を減らす：Antigravity の Rules は Allowlist（許可リスト）中心で運用する

前提

• OS：Windows 11 Pro

• メモリ：16GB

• 開発対象：Google Apps Script（V8）＋ HTML Service サイドバー

• ローカル同期：clasp（公式CLI）

• IDE：Google Antigravity（必要に応じてVS Codeでも可）

全体像（最短で事故が少ない構成）

1. **WSL2（Ubuntu）**のLinuxファイルシステム上にプロジェクトを置く（速度・安定）

2. claspでApps Scriptをローカル管理し、push対象を最小化（同期事故を減らす）

3. サイドバーUIはローカルで開発し、GASには成果物（少数ファイル）だけ入れる

4. Antigravityは**Chrome拡張＋Rules（許可範囲）**で安全運用する

手順（初心者向け・チェックリスト）

0. 必要なもの

• Googleアカウント（Apps Scriptを作れる）

• Google Chrome

• インターネット接続

1. WSL2 を用意する（Windowsで速く安定させる土台）

狙い：Node/ビルド/watch の体感速度と安定性を上げる。

1. Windowsの「Windowsの機能の有効化/無効化」で以下をON

• Linux用Windowsサブシステム

• 仮想マシン プラットフォーム

1. Microsoft Store から Ubuntu をインストール

2. Ubuntuを起動し、ユーザー名・パスワードを作成

3. 以降、プロジェクトは **Ubuntu（WSL側）**に置く

• OK：/home/<user>/repos/...

• 非推奨：/mnt/c/...（遅くなりやすい）

1.1 メモリ16GB向け：WSLのメモリ上限を決める（任意・おすすめ）

狙い：WSLがメモリを使いすぎて、Windows側（Chrome/Antigravityなど）が重くなるのを防ぐ。

• 最初は未設定でもOK（重いと感じたら設定する）

1. Windowsのユーザーフォルダに .wslconfig を作る

• 例：%UserProfile%\.wslconfig

1. 例（迷ったらこの値から）

• 軽め：memory=6GB, processors=4, swap=2GB

• 余裕：memory=8GB, processors=4, swap=4GB

.wslconfig の例：

[wsl2]
memory=8GB
processors=4
swap=4GB

1. 反映

• Windows Terminal（PowerShell）で wsl --shutdown

• もう一度Ubuntuを起動

2. プロジェクト用フォルダを作る（WSL内）

Ubuntuのターミナルで：

• mkdir -p ~/repos/gas-sidebar-project && cd ~/repos/gas-sidebar-project

3. Node.js と clasp を入れる（GAS同期の心臓部）

狙い：Apps Scriptをローカルから安全に同期する。

1. Node.js（推奨：LTS）をインストール（WSL内）

• すでにあるか確認：node -v / npm -v

1. clasp をグローバルに入れる

• npm i -g @google/clasp

1. claspでログイン

• clasp login

4. Apps Script プロジェクトを作る/取得する

どちらかを選ぶ：

• 新規作成：clasp create --type sheets --title "My Controller"

• 既存を取得：clasp clone <SCRIPT_ID>

（SCRIPT_IDは Apps Script のURLなどから取得）

5. push対象を最小化する（.claspignore必須）

狙い：同期事故（生成物の誤push、watch暴発）を防ぐ。

1. .claspignore を作り、最低限これを入れる

• **/node_modules/**

• **/dist/**

• **/.git/**

• **/*.log

補足：.claspignore は .gitignore と挙動が違うため、ディレクトリは **/ 形式で明示する。

1. 原則：GASにpushするのは これだけ

• src/*.gs（サーバ）

• src/sidebar.html（UI成果物）

6. 最小のファイル構成（テンプレ）

目的：プロジェクトごとにコマンドは変えてOK。ただし枠は共通。

推奨ディレクトリ：

• src/（claspがpushする）

  • Code.gs（エントリ：メニュー/サイドバー表示）

  • dispatcher.gs（dispatch：検証/ログ/排他）

  • catalog.gs（コマンド一覧を返す：プロジェクトごとに中身差替え）

  • sidebar.html（UI成果物：最小ファイル）

• ui/（ローカルUI開発用：任意）

  • package.json（必要なら）

  • src/...（React/Svelte/素HTMLなど）

  • dist/...（ビルド結果）

運用ルール：

• ui/dist/sidebar.html を src/sidebar.html にコピーして push

7. clasp watch で反復を速くする

狙い：修正→push→動作確認を最短に。

• clasp push --watch

注意：watchが重いと感じたら

• .claspignore を見直す（対象が多すぎないか）

• UI成果物を「少数ファイル」化する

8. Antigravity を環境に入れる（Extension込み）

8.1 Antigravity アプリを入れる

• 公式のGet Startedに従ってインストール

8.2 Chrome拡張（Browser Extension）を入れる

狙い：ブラウザ操作を使う場合の前提。

• Antigravity Browser Extension をChromeに追加

8.3 Rules（許可範囲）を設定する（事故防止）

方針：既定は「拒否」。必要な操作だけ許可（Allowlist中心）。

初心者向け最小ルール：

• 破壊的コマンド（削除・一括置換・依存更新）の前に「差分要約」を必ず出す

• clasp push 実行前に「push対象ファイル一覧」を表示

• ブラウザ操作は Allowlist に入れたドメインだけ許可

• 個人情報・トークン・認証情報をファイル/チャットに出さない

初心者向け：動作確認（最短）

1. src/Code.gs に「サイドバー表示」の最小コードを書く

2. src/sidebar.html にボタン1個＋ google.script.run の呼び出しを書く

3. clasp push

4. Sheetsを開き、メニューからサイドバーを表示して動くことを確認

事故を減らす必須ガード（最小）

• staging/prod を分ける（Script IDを分ける）

• dispatch() の入口で 排他（Lock） と 入力検証 と ログ

• Sheets操作は まとめ読み→配列処理→まとめ書き（サービス呼び出し回数を減らす）

よくある詰まりポイント（短く）

• 遅い：プロジェクトが /mnt/c にある → WSLの ~/repos に移す

• watchが暴れる：.claspignore が弱い／成果物が多すぎる → 対象を絞る

• UIが本番で動かない：HTTP/IFRAME制約 → HTTPS・最小構成で検証

• 二重実行：排他・UIロックがない → dispatch にロックを入れる

これだけ覚える（超要約）

• WSL2のLinux側に置く

• clasp + .claspignore

• UI成果物は少数ファイル

• Antigravityは拡張＋Rulesで安全運用