はじめに
エンジニア歴1年はんじーパンジーです！
Google Apps Script (GAS) をブラウザのエディタで開発していると、以下のような悩みが出てきませんか？
- 複数人で同時編集して、片方の変更が反映されない
- 都度変更履歴が残らないため、ソースコードを元に戻すことができない
- エディタの補完機能が弱く、タイプミスに気づかない
- 使い慣れた VS Code で開発したい
これらを解決するために、Google 公式の CLI ツール clasp を導入し、TypeScript で開発できる環境を構築する手順をまとめました。
前提条件
- Node.js がインストールされていること
-
node -vでバージョンが表示されれば OK
-
1. clasp のインストール
まずは clasp 本体をグローバルにインストールします。
npm install -g @google/clasp
2. 【重要】Google Apps Script API の有効化
これを行わないと、ログインや Push 時にエラーになります。忘れがちな手順なので最初に設定しましょう。
- https://script.google.com/home/usersettings にアクセス
- 「Google Apps Script API」を「オン」に設定
3. Google アカウントへログイン
ターミナルで以下のコマンドを実行し、Google アカウントと紐付けます。
clasp login
ブラウザが立ち上がるので、GAS を使用したい Google アカウントを選択し、許可を与えます。ターミナルに Saved the credentials... と表示されれば完了です。
4. プロジェクトの作成と TypeScript の導入
ここからはプロジェクトごとの作業になります。
4-1. プロジェクトフォルダの作成
作業用ディレクトリを作成し、package.json を生成します。
新規プロジェクトフォルダ作成
mkdir my-gas-project
cd my-gas-project
package.json 生成
npm init -y
4-2. 必要なパッケージのインストール
TypeScript 本体と、GAS の型定義ファイル（補完を効かせるため）をインストールします。
npm install -D typescript @types/google-apps-script
4-3. tsconfig.json の作成
プロジェクト直下に tsconfig.json を作成し、GAS 環境に適した設定を記述します。
{
"compilerOptions": {
"target": "ES2019",
"lib": ["esnext"],
"types": ["google-apps-script"],
"moduleResolution": "node",
"strict": true,
"noImplicitAny": true
}
}
5. GAS プロジェクトとの連携
A. 新規プロジェクトを作成する場合
clasp create
実行後、スクリプトの種類を聞かれるので standalone（スプレッドシート等に紐付かない独立したスクリプト）などを選択します。
B. 既存のプロジェクトを使用する場合
既にブラウザで作った GAS をローカルで編集したい場合は、スクリプト ID を使用します。
注: スクリプト ID は GAS エディタの「プロジェクト設定」または URL
projects/以下の文字列です。
clasp clone <スクリプトID>
⚠️ 注意点
clone直後のファイルは.js拡張子です。TypeScript で開発する場合は、手動で.tsにリネームしてください。
おわりに
今回の手順はローカル環境で、GASのコードをTypescriptで編集できるというものです。
これだけだと、GASはブラウザ上でコード編集できるため、メリットは薄い。
本当のメリットは、Gitでソースコードを管理できる点！！
次回、GASのソースコードのGit管理について記事にする予定です！
・複数のスプレッドシートのGASの管理
・ドキュメント管理
・運用する上でのルール