GAS 用の CLI ツール clasp をインストールして TypeScript で GAS をローカルの開発するための環境を構築する手順

TypeScript環境構築
GAS 用の CLI ツール clasp をインストールして TypeScript で GAS をローカルの開発するための環境を構築する手順
Memo

GAS 用の CLI ツール clasp をインストールして GAS をローカルで開発して実行できる環境の構築手順をメモしました。

GAS 用のローカル環境を構築するに至った経緯

仕事でちょっとしたスクリプトを書くことが増えてきて毎回ブラウザで書くのがしんどく感じるようになったのと
コードはローカルで書いて Github 上で管理をしたかったことがきっかけて環境を構築してみました。

clasp

clasp とは?

Google 公式の GAS 用 CLI(コマンドライン)ツールで、スクリプトの作成(Standalone Script のみ)や複製、アップロード機能などを提供します。

clasp の特徴

  • ローカルで開発ができる
  • デプロイバージョンを管理できる
  • TypeScript で開発ができる

環境

  • Node.js 14.15.3
  • Yarn 1.22.10

ファイル操作で利用するUnixコマンドについて

基本的なディレクトリ作成やファイル操作はUnixコマンドを利用します。
Unixコマンドについて詳しくはこちらの記事を参考にしてください。

clasp の環境構築

プロジェクトの初期化

プロジェクトディレクトリの作成

~/clasp-sample というプロジェクトディレクトリを作成して移動します。

terminal
$ mkdir ~/clasp-sample && cd ~/clasp-sample

プロジェクトの初期化

yarn でプロジェクトの初期化を行います。 npm で実施する方は必要に応じて変更してください。

terminal
$ yarn init -y yarn init v1.22.10 warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications. success Saved package.json ✨ Done in 0.06s.

パッケージのインストール

clasp をインストール

yarn installコマンドで clasp をインストールします。
グローバルにインストールするのが一般的なようですがプロジェクトの中へ閉じたいためローカルヘインストールしています。

terminal
$ yarn add -D @google/clasp yarn add v1.22.10 // 中略 success Saved 1 new dependency. info Direct dependencies └─ @google/clasp@2.3.2 info All dependencies └─ @google/clasp@2.3.2 ✨ Done in 4.40s.

型定義ファイルのインストール

TypeScript で書くため型定義ファイルをインストールします。

$ yarn add -D @types/google-apps-script

インストールしたパッケージの確認

package.json を開きインストールしたパッケージを確認します。

package.json
"devDependencies": { "@google/clasp": "^2.3.2", "@types/google-apps-script": "^1.0.34" }

GAS API の設定変更

G Suite ユーザー設定画面から Google Apps Script API をオンにして下さい。
G Suite ユーザー設定画面

G Suite ユーザー設定画面からGoogle Apps Script APIをオン

clasp プロジェクトの作成

clasp create

clasp createコマンドでclasp-sampleという clasp プロジェクトを作成します。
コマンドを実行するとスクリプトの種別を問われますので用途に応じて選択してください。

terminal
yarn run clasp create clasp-sample yarn run v1.22.10 $ /Users/XXXX/clasp-sample/node_modules/.bin/clasp create clasp-sample ? Create which script? (Use arrow keys) ❯ standalone docs sheets slides forms webapp api

.clasp.json

コマンドを実行すると.clasp.jsonというファイルが作成されているので
中身を確認します。

terminal
$ cat .clasp.json {"scriptId":"XXXXXXXXXXXXXXXXXXXXXXXXXXX"}

今回は TypeScript で開発するのとソースの管理はsrc配下で管理したいため
下記設定を追記します。

terminal
$ vi .clasp.json

変更後の.clasp.json

rootDirfileExtensionを追記します。

clasp.json
{ "scriptId": "XXXXXXXXXXXXXXXXXXXXXXXXXXX", "rootDir": "./src", "fileExtension": "ts" }

src ディレクトリの作成

mkdirコマンドで src ディレクトリを作成します。

terminal
$ mkdir src

GAS プロジェクトページの確認

clasp openコマンドで GAS プロジェクトページを開いてプロジェクト確認します。

terminal
$ yarn run clasp open
コマンドを叩くとブラウザが起動しプロジェクトページが開きます。
GASプロジェクトページ プロジェクトの確認

GAS プロジェクトのpull

clasp pullコマンドで GAS プロジェクトをローカルへ取得します。

terminal
$ yarn run clasp open // 中略 └─ ./src/appsscript.json ✨ Done in 3.90s.

src/appsscript.jsonというファイルが作成されました。

コードを作成する

とりあえずコードを書いてみます。

sample.tsの作成

sample.tsの作成します。

terminal
$ vi src/sample.ts

適当なコードをかきます。

sample.ts
function sample() { const message = 'Hello world!' Logger.log(message); console.log(message); }

作成したコードをプロジェクトへpushする

clasp pushコマンドで GAS プロジェクトコードを送信します。

terminal
$ yarn run clasp push

GASプロジェクトを開いて作成したコードを確認

clasp openコマンドで GAS プロジェクトページを開いてプロジェクト確認します。

terminal
$ yarn run clasp open
GASプロジェクトページ コードの確認

作成したコードが登録されていました。
また利用したconstがトランスパイルされていことも確認できます。

スクリプトの実行

スクリプトを実行してみます。
上部メニューの真ん中あたりにある実行をクリックします。

GASプロジェクトページ スクリプトを実行

スクリプトの実行結果

実行ログのところに実行結果が表示されていることが確認できます。

GASプロジェクトページ スクリプトの実行結果

ローカルに環境を構築しローカルで書いたコードを実行できるようになりました。

コマンドを実行をブラウザのエディタからではなくローカルで実行できるようにする手順については下記の記事を参照ください。

GASのコマンドを実行をブラウザのエディタからではなくローカルで実行できるようにする手順

終わりに

最後までご覧いただきありがとうございます。
この記事ではGAS 用の CLI ツール clasp をインストールして TypeScript で GAS をローカルの開発するための環境を構築する手順について紹介させていただきました。

これからも皆様の開発に役立つ情報を提供していきたいと考えています。
今後ともよろしくお願いいたします。