VSCodeでGoogle Apps Script ã‚’æ“ä½œã™ã‚‹ç´ åœ°ã‚’ä½œã‚‹

概要

みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。

今回は、VSCodeからGoogle Apps Script を操作する素地を作ったので、記事にしようと思います。

スプレッドシートの作成

今回編集したいのはスプレッドシートのGASなので、まず先にスプレッドシートを作成します。

空白から

拡張機能 > Apps Script

無題のプロジェクトができます

プロジェクトの設定から

スクリプトIDをコピーしておきます

VSCode側の調整

まず、npm initします。Enterを連打

package.jsonができます

npm i @google/clasp を実行

package.jsonのスクリプトも調整

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "clasp": "clasp",
    "login": "clasp login",
    "pull": "clasp pull",
    "push": "clasp push",
    "deploy": "clasp deploy"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@google/clasp": "^2.4.2"
  }
}

.clasp.jsonというファイルを作成します。

{
  "scriptId": "1Hc_wC6IJ_1K7pj2_G9ySdT7fYqDXstAKabj5BZKfC1WKq3v_qfPjIoR2"
}

VSCodeから操作

npm run loginを実行します。

googleアカウントでログイン

https://script.google.com/home/usersettings

にアクセスし、APIアクセスを有効にします

リモートのソースコードを持ってくる時は、npm run pull

appsscript.json というファイルが増えてます。

{
  "timeZone": "Asia/Tokyo",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}

コード.js というファイルも増えてます。

function myFunction() {
  
}

コード.js に変更を加えます。

function myFunction() {
  console.log("hello");
}

リモートにソースコードを渡すには、npm run push

画面を更新すると、変更を加えたソースコードが反映されています

デプロイするには、npm run deploy

デプロイされました。

まとめ

これでgit管理できるようになったので、GASを編集したりレビューしたりするのが楽になりました。