【clasp入門】GASをVS Codeでローカル開発する最小構成

投稿更新日: 2026/8/27

Google Apps Script（GAS）は、ブラウザだけですぐにコードを書ける手軽さが魅力ですが、一方でコードが増えてくるとこんな悩みも出てきます。

VS Codeの検索、整形、補完機能を使いたい
複数のファイルを見比べながら編集したい
ブラウザを開かず、手元のエディタでコードを書きたい
GASエディタだけでは難しい横断検索や一括置換をしたい
将来的にテストや自動デプロイを取り入れたい

そこで役立つのが、Google公式のオープンソースツール「clasp（Command Line Apps Script Projects）」です。claspを使うと、GASのコードをパソコンへダウンロードし、VS Codeで編集して、再びApps Scriptへアップロードできます。

この記事では、既存のGASプロジェクトをパソコンへ取り込み、VS Codeで編集してApps Scriptへ反映するところまでを、できるだけ小さな構成で試します。

この記事でできるようになること

この記事を最後まで進めると、次の流れを実践できるようになります。

Apps Script上のコード
↓
↓ clasp pull
↓
パソコン上のコード ←→ VS Codeで編集
↓
↓ clasp push
↓
Apps Script上のコード

claspとは？

claspは、ターミナルからApps Scriptプロジェクトを操作するためのCLI（コマンドラインツール）です。CLIとは、画面上のボタンではなく、文字のコマンドでアプリを操作する仕組みのことです。

代表的な操作は次のとおりです。

コマンド	役割
`clasp login`	Googleアカウントで認証する
`clasp clone-script`	既存のGASプロジェクトをローカルへ取り込む
`clasp pull`	Apps Script側の最新コードを取得する
`clasp push`	ローカルのコードをApps Script側へ反映する
`clasp open-script`	対象プロジェクトをブラウザで開く

当記事はclasp 3.xを前提にしています。古い解説では clasp clone や clasp open などの表記を見かけますが、3.xの正式なコマンド名は clone-script や open-script です。一部には互換用の別名が残っているものの、これから新しく覚えるなら3.xのコマンドの方が良いでしょう。

事前準備

以下を用意します。

Googleアカウント
取り込み対象のApps Scriptプロジェクト
Node.js 20以上
VS Code

Node.jsは、JavaScriptをパソコン上で動かすための実行環境です。clasp 3.xではNode.js 20以上が必要です。まず、ターミナルでバージョンを確認します。

node --version
npm --version

node --version の結果が v20 以上であれば、次へ進みましょう。

手順1：Apps Script APIを有効にする

claspからプロジェクトを操作するには、Googleアカウントの「Apps Script API」を有効にする必要があります。

Apps Scriptのユーザー設定を開く
「Google Apps Script API」をオンにする

ここがオフのままだと、後の操作で「Script API not enabled」といったエラーが表示されます。

手順2：作業フォルダを作り、claspをインストールする

今回は、案件管理を想定したサンプルプロジェクトを作業フォルダへ取り込みます。実際の業務名やIDではなく、記事用の名前へ置き換えてください。

mkdir gas-clasp-sample
cd gas-clasp-sample
npm init -y
npm install --save-dev @google/clasp

この記事では、claspをパソコン全体へインストールせず、プロジェクト内の開発用パッケージとして追加しています。これなら package.json と package-lock.json にバージョン情報が残り、チーム内で利用するバージョンをそろえやすくなります。

インストールできたか確認しましょう。

npx clasp --version

以降は、プロジェクト内のclaspを npx clasp という形で実行します。公式ドキュメントのようにグローバルインストールした場合は、npx を付けずに clasp と実行しても構いません。

手順3：Googleアカウントでログインする

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

npx clasp login

ブラウザが開いたら、対象のGASプロジェクトへアクセスできるGoogleアカウントを選び、権限を許可します。

ログイン中のアカウントは、次のコマンドで確認できます。

npx clasp show-authorized-user

手順4：スクリプトIDを確認する

既存プロジェクトを取り込むには「スクリプトID」が必要です。

対象のApps Scriptプロジェクトを開く
左側の「プロジェクトの設定」を開く
「ID」セクションにあるスクリプトIDをコピーする

スクリプトIDは、スプレッドシートのURLに含まれるファイルIDとは別物です。また、記事や公開リポジトリには実際のIDを掲載せず、YOUR_SCRIPT_ID のようなダミー値へ置き換えましょう。

手順5：既存プロジェクトを取り込む

作成した作業フォルダ内で、次のコマンドを実行します。

npx clasp clone-script "YOUR_SCRIPT_ID"

成功すると、GASのファイルがプロジェクト直下へ保存されます。

例

gas-clasp-sample/
├── .clasp.json
├── appsscript.json
├── Code.js
├── package.json
├── package-lock.json
└── node_modules/

プロジェクトによって、ファイル名やファイル数は異なります。

`.clasp.json` は何をしている？

.clasp.json は、ローカルのフォルダとApps Scriptプロジェクトをひも付ける設定ファイルです。主に次の情報を持ちます。

{
  "scriptId": "YOUR_SCRIPT_ID"
}

scriptId：反映先となるApps Scriptプロジェクト

今回は保存先の追加設定を行わないため、claspは .clasp.json と同じフォルダにあるGASファイルを対象にします。まず動かしてみる段階では、この構成が最もシンプルです。

手順6：VS Codeで編集してpushする

VS Codeで Code.js を開き、例として次の関数を追加します。

/**
 * claspから反映したコードの動作確認用関数です。
 */
function helloClasp() {
  console.log('Hello from clasp!');
}

GASへ送信されるファイルを事前に確認します。

npx clasp show-file-status

問題がなければ、ローカルの内容をApps Scriptへ反映します。

npx clasp push

続けて、Apps Scriptエディタを開きます。

npx clasp open-script

helloClasp が追加されていれば成功です。初回実行時は、スクリプトが利用するサービスに応じて追加の権限確認が表示される場合があります。

pullとpushを安全に使う基本ルール

claspを使い始めると、最初につまずきやすいのが「ローカルとブラウザのどちらが最新なのか」という問題です。

作業開始時はpullする

Apps Script側で変更された可能性がある場合は、編集前に取得します。

npx clasp pull

ただし、ローカルで編集中のファイルがある状態でpullすると、手元の変更とApps Script側の変更が混ざり、どちらが最新か分かりにくくなります。編集途中の内容がないことを確認してからpullしましょう。

反映前は送信対象を確認する

npx clasp show-file-status

確認後にpushします。

npx clasp push

pushは「1ファイルだけの更新」ではない

claspの push は、Apps Script APIの仕様上、オンライン側のプロジェクト内容をファイル単位ではなく全体として置き換えます。複数人がブラウザとローカルの両方で同時に編集すると、相手の変更を上書きする可能性があります。

チーム開発では、次のようなルールを決めておくと安全です。

原則としてVS Code側を正とし、ブラウザ上で直接編集しない
作業を始める前に clasp pull する
clasp push の前に送信対象と反映先を確認する
複数人で編集するときは、pushする担当やタイミングを共有する
本番用と検証用のApps Scriptプロジェクトを分ける

claspは、ローカルとApps Scriptの変更を自動でマージするツールではありません。「pullで取得し、ローカルで編集して、pushで反映する」という順番をチームでそろえることが大切です。

まとめ

claspを使うと、GASの「ブラウザだけで手軽に書ける」という良さを残しつつ、VS Codeを使ったローカル開発へ一歩進めます。

今回のポイントは次の4つです。

clone-script で既存のGASプロジェクトを取り込む
pull で取得し、push で反映する
.clasp.json でローカルとApps Scriptの反映先をひも付ける
show-file-status で送信対象を確認する

まずは小さな検証用プロジェクトで、関数を1つ追加してpushするところから試してみてください。ブラウザ外でコードを編集し、コマンド一つでApps Scriptへ反映できるだけでも、GAS開発の進め方は大きく変わります。

次のステップとしては、.claspignore による送信対象の制御、ESLintやPrettierの導入、Jestによる業務ロジックのテスト、本番・検証環境の分離へ進むと、より安全な開発環境を作れます。

おまけ： Gitでソースコードを管理することもできる

claspで取得したGASのファイルは、通常のローカルファイルです。そのため、必要になった段階でGitを導入し、変更履歴の保存やコードレビューへ発展させることもできます。

Gitで管理する場合は、node_modules や認証情報を含む .clasprc.json を登録しないようにします。反映先のスクリプトIDを持つ .clasp.json についても、開発・検証・本番の取り違えを避けるため、管理方針をチームで決めてください。まずはclaspのpull・pushに慣れてから取り入れれば十分です。

【clasp入門】GASをVS Codeでローカル開発する最小構成

この記事でできるようになること

claspとは？

事前準備

手順1：Apps Script APIを有効にする

手順2：作業フォルダを作り、claspをインストールする

手順3：Googleアカウントでログインする

手順4：スクリプトIDを確認する

手順5：既存プロジェクトを取り込む

`.clasp.json` は何をしている？

手順6：VS Codeで編集してpushする

pullとpushを安全に使う基本ルール

作業開始時はpullする

反映前は送信対象を確認する

pushは「1ファイルだけの更新」ではない

まとめ

おまけ： Gitでソースコードを管理することもできる

参考

この記事をシェアする

最新記事

タグ

【clasp入門】GASをVS Codeでローカル開発する最小構成

この記事でできるようになること

claspとは？

事前準備

手順1：Apps Script APIを有効にする

手順2：作業フォルダを作り、claspをインストールする

手順3：Googleアカウントでログインする

手順4：スクリプトIDを確認する

手順5：既存プロジェクトを取り込む

.clasp.json は何をしている？

手順6：VS Codeで編集してpushする

pullとpushを安全に使う基本ルール

作業開始時はpullする

反映前は送信対象を確認する

pushは「1ファイルだけの更新」ではない

まとめ

おまけ： Gitでソースコードを管理することもできる

参考

この記事をシェアする

最新記事

タグ

`.clasp.json` は何をしている？