Vscodeでclaspを使用してGASのTypescript開発環境を構築する

環境

  • windows10
  • node v14.17.4
  • npm 6.14.14
  • VsCode
  • gitbash 2.32.0.1

動作イメージ

tsファイルでローカルにてコーディング(型定義のfileもインストールするので、GASのコード補完が効く)

CLIからサーバーへpush

pushしたソースをスクリプトエディタ上で実行

設定手順

npmでプロジェクト作成(package.jsonが作成される)

npm init

claspのインストール

claspは、Google が提供するGoogle Apps Script(GAS)をローカルで管理出来る様になる CLI ツールのことです。また、ローカル上でTypeScriptで記述したコードはclaspがをJSにコンパイルしてくれます。

プロジェクトの存在するディレクトリに移動

cd ~/Desktop/private/gas/sample

claspをインストール

今回はグローバルではなく、ローカルにインストールします。

npm install @google/clasp

Googleアカウントにログイン

CLIからログインコマンドを実行

今回はローカルにインストールしているので、claspコマンドにはnpxをprefixとして付与する必要があります。

※グローバルにインストールしていれば、clasp login のみでOK

npx clasp login

npxは、GitHubやGistで公開されているスクリプトをインストールすることなく直接実行できる仕組みです。

googleアカウントの認証

上記ログインコマンドを実行すると、ブラウザで認証画面が表示されるので、googleアカウントへのアクセスを許可してください。

GASプロジェクトの新規作成

ルートディレクトリに作成する

npx clasp create --title "test"

以下のように聞かれるので、今回はsheets(スプレッドシート)を選択。ちなみにstandaloneを選択すると、グーグルのどのサービスにも紐づかない単独のスクリプトとして登録されます(共通化してスプレッドシート間で呼び出したりすることができる)

? Create which script?  standalone docs> sheets
slides
forms
webapp
api

※npx clasp create をしたタイミングで “has not enabled the Apps Script API”と言われたら、
設定画面へ移動して、オンにしてください。

以上で、Google Accountのサーバ上でSpreadSheetが新規作成され、これから作成するソースコードと、Google Accountのソースコードを同期できるようになります。

また、ローカルには以下の2つのファイルが作成されます

  • .clasp.json
  • appsscript.json

サンプルプログラムをサーバーへアップロードする

ソースファイルを作成

touch sample.ts

サンプルコードを記述

sample.ts

function greet() {
  Logger.log('Hello World')
}

サーバーへアップロード

  • pushの対象は.gs,.html,.jsonのみ
  • clasp statusというコマンドでpush対象のファイルを確認することが可能
  • pushしたスクリプトは clone [scriptId] でローカルにクローンすることが可能
  • gitの.gitignoreと同じように、push対象外にしたいファイルを.claspignoreに定義可能
npx clasp push

ブラウザ上でGoogleのスクリプトエディタを起動

clasp open

実行ボタンを押す

“表示”タブからログが出力されていることが確認できる

コードの補完を効かせる

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

npm install @types/google-apps-script -S

これで、VSCodeがGASの文法を理解できるようになり、補完ができるようになりました。
あとは、開発したら npx clasp push でサーバー上にソースコードを反映させればOKです。

コメント

タイトルとURLをコピーしました