【爆速で開発できます】ローカル環境でGASの開発

（2024.10.10更新）

こんにちは！副業プログラマーのYouパパです！

GAS開発のときに、ブラウザ上じゃなく、ローカル上で好きなエディターを使ってコーディングしたいときありますよね？？？

今回は、Google Apps Script (GAS)をローカルで開発し、特にVSCode（≒Cursor）を使用して行う方法について説明します。

Cursorと組み合わせるとChatGPTにそのまま質問できるので最強です
2万案件が1時間で終わりました笑

１．Google Apps Scriptのローカル開発の手順

1. （最初のみ）Node.jsのインストール: 最初に、Node.jsをローカルマシンにインストールする必要があります。Node.jsは公式サイトからダウンロードできます。

2. （最初のみ）claspのインストール: Googleの公式コマンドラインツール**clasp**を使用して、ローカルでGASを編集・管理します。これはnpm（Node.jsのパッケージマネージャ）を使用してインストールできます
   
   npm install -g @google/clasp
   

3. Googleアカウントでログイン: インストール後、claspを使用してGoogleアカウントでログインします。
   
   clasp login
   

4. GASプロジェクトの作成またはクローン（コピー）: 新しいGASプロジェクトを作成するか既存のGASプロジェクトをクローンします。
   
   ※ブラウザ上で作成した既存のGASプロジェクトのクローン（コピー）をお勧めします
   ブラウザ上では、スプレッドシートの上部メニューの「拡張機能」 → 「Apps Script」から、プロジェクトを作成できます
   
   ①まず、ローカル側で作業したいフォルダにcdで移動
   
   cd 作業したいフォルダパス
   Ex. cd C:\Users\mitam\Desktop\test
   
   ✅ 既存のGASプロジェクトのクローン（コピー）する場合のみ実行
   
   ②既存のプロジェクトをクローンする場合は、プロジェクトのスクリプトIDが必要です。これは、プロジェクトのオンラインエディタのURLから取得できます。
   
   clasp clone <script-id>
   
   Ex. clasp clone 1tRywdtP79XwxWv1j8rYez9bSQJf***************Nabvr
   
   
   ※ 2回目以降で、.clasp.jsonがある階層で実行する場合は以下のみでOK）
   clasp pull
   
   ✅ 新しいプロジェクトを作成する場合のみ実行
   ② プロジェクトの作成
   
   clasp create --type standalone --title "Your Project Title"
   
   cdで移動しておいたフォルダに「appsscript.json」と「.clasp.json」が作成される
   

5. VSCodeでの編集:
   クローンまたは作成したプロジェクトフォルダ（cdで移動したローカルにあるフォルダ）内にある.gsファイル（またはjsファイル）をVSCodeで開き、通常のコードのようにスクリプトを編集します。

6. 変更のプッシュ: ローカルでの変更をGASプロジェクトにプッシュするには、以下のコマンドを使用します。
   
   clasp push
   

7. 実際にプロジェクトにアップロードされているか確認したい場合は、以下のコマンドを使用します。実行するとブラウザが立ち上がりプロジェクトを確認することができます。
   
   clasp open
   

8. （オプショナル）TypeScriptのサポート: GASはJavaScriptとTypeScriptの両方をサポートしています。TypeScriptを使用する場合は、適切な設定が必要です。

２．Tips

◎VScodeのTerminal（PowerShell）で、claspコマンドを使う場合

一度、PowerShellで、以下を実行して、ポリシーを変更する ※この変更はセキュリティリスクを伴う可能性があるため、実行ポリシーの変更は慎重に行ってください。

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

◎指定ファイルのみ更新（同期）する方法

-watch オプションの使用
clasp push --watch コマンドは、ローカルファイルシステムの変更を監視し、変更があった際に自動的にプッシュします。この方法を使用する場合、以下の手順を踏むことができます：

1. ローカルで編集したいファイル（例：A.gs）のみを変更します。

2. clasp push --watch を実行し、変更を監視します。

3. A.gs に変更が加えられると、そのファイルのみがGoogle Apps Scriptプロジェクトにプッシュされます。

この方法では、ローカルで編集していないファイル（例：B.gs, C.gs）はGoogle Apps Scriptプロジェクトに影響を与えません。

💡 ただし、この方法には以下の注意点があります：

• -watch コマンドは、ファイルシステムの変更を常に監視するため、プロセスを終了するまで実行し続ける必要があります。

• すべてのローカルファイル変更が即時にプロジェクトに反映されるため、意図しない変更がプッシュされる可能性があります。

◎指定ファイルのみpush（同期）する方法

「.claspignore」ファイルを同ディレクトリ内に作成することで、claspのpush範囲を指定することができます。

💡 ※ pushはで完全同期 　pushしたファイルが1つだと、ブラウザ上の既存のファイルは全てなくなり、ブラウザ上のファイルも1つになります）


以下の場合、clasp pushのコマンドを実行した際は、!で指定されているファイルのみがpushされるようになります。

**/**
!src/**/*
!appsscript.json

• 解説

  • /　：　全てのファイルを意味する。.claspignoreに書かれているので、全てのファイルを無視する

  • ! ：否定。つまり、上と合わせて、全てのファイルを無視するが、!のファイルは無視しない＝pushする

  • appsscript.jsonは都度pushしないといけないので、「!appsscript.json」の表記は必要

以下の場合、clasp pushのコマンドを実行した際は、以下の正規表現に該当するファイルのみ無視されます

src/**/*.{test,spec}.ts

• 解説

  • src/**/* は src/ ディレクトリ内のすべてのサブディレクトリ（*）とそこに含まれるすべてのファイル（``）を指します。

  • .{test,spec}.ts は、ファイル名が .test.ts または .spec.ts で終わるファイルを意味します。これは通常、テスト用のTypeScriptファイルを指し示します。

  • したがって、src/**/*.{test,spec}.ts は src/ ディレクトリ内のすべてのサブディレクトリにある、.test.ts または .spec.ts で終わるファイルを指します。

３．注意事項

• スクリプトの実行やデバッグをローカルで直接行うことはできません。これらは依然としてGoogleのエディタまたはダッシュボードを通じて行う必要があります。 → Google Cloudを経由すれば、ローカルから直接実行可能

４．何か作ってみたい人へ

特段作るものが決まってない！って人は、以下で、X自動投稿ツールの作り方を公開してるので、ぜひ、作ってみてください！

完成したら
・自分で使うもヨシ
・売って稼ぐのもヨシ
です！

５．最後に

GAS開発で、こういったTipsは、大量に持ってるので、
「ここ詰まってます！」という人は、以下から相談してください！！

お役に立てると思います！

LINE Add Friend