【GAS】GoogleAppsScriptをいい感じに開発したい人向け #GAS

GASを開発するとき　AppsScriptの編集画面を使います。
エディターで開発している開発者にとって編集画面は使いにくいと感じると思います。

【こんな方にオススメ！】
・GASを効率良く開発したい方
・GASのコードをgit管理したい方

GASとは？

GoogleAppsScriptの略称です。
Googleが提供するアプリケーション開発プラットフォームでGoogleサービスを自動化できます。

スプレットシートで記述する時の難点

エディターでの開発に慣れているとAppsScriptの編集画面は使いづらさを感じると思います。
また、編集は上書き保存のため以前のコードに戻せません。
できればGitのようにバージョン管理したいものです…。

GASをいい感じに開発するための「clasp」

最近まで知らなかったのですが、claspを導入するとローカル開発できます。

導入

// インストール
npm i -g @google/clasp

// ログイン
clasp login

ログインコマンドを打ち込むとブラウザが立ち上がり、Googleのログインの画面が表示されます。
最後に承認を押すとターミナルにAuthorization successful.と表示されます。

次に下記を実行します。

clasp create

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

選択した後に下記のようなエラーが出た時はAPIを有効にする設定してください。

User has not enabled the Apps Script API. Enable it by visiting https://script.google.com/home/usersettings then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry

もう一度コマンドを実行すると無事生成されたようです。
選択肢でsheetsを選択するとスプレットシートのURLとAppsScriptのURLが生成、表示されます。
実行した階層に.clasp.jsonとappsscript.jsonがされます。

Created new Google Sheet: https://drive.google.com/open?id=1aPsKZJ7FX3J3hYfEwBvGWdiay9PBBJVT-6DZI_iWfdw
Created new Google Sheets Add-on script: https://script.google.com/d/1CsO-vQHCh0TyZrzDN64KUKbSqt4RmqnIR_zUJVM-pATak5zYGqGc7EjI/edit

// AppsScriptを開く
clasp open

clasp openを実行すると生成されたAppsScriptのURLをブラウザで開いてくれます。

`.clasp.json`と`appsscript.json`

それぞれにファイルは下記の内容で生成されます。

見やすいようにインデントをつけましたが、生成された.clasp.jsonファイルのインデントはありません。
rootDirの初期設定はフォルダ全体です。
指定を変えることで特定のディレクトリにのみpullやpushを限定することもできます。

.clasp.json

{
  "scriptId":"***",
  "rootDir":"/Users/*****/***/gas-clasp",
  "parentId":["*******"]
}

appsscript.json

{
  "timeZone": "America/New_York",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}

実際にコードを書いてみる

AppsScript側のエディターで新しいファイルを生成して、コードを追記してみます。

function myFunction() {
  console.log('test');
}

myFunction();

記述したScriptを`clasp pull`で取得する

clasp pull

実行すると生成したファイルとコードがvscode側で確認できます。

vscodeで追記した記述を`clasp push`でウェブエディタ側に反映させる

function myFunction() {
  console.log('test');
+ console.log('test vscode');
}

myFunction();

clasp push

AppsScript側を画面更新するとpushした内容が確認でidやclassでのきました。

pushするとウェブエディタ側のみにあるファイルは削除してしまうので注意が必要です。

まとめ

claspはv1.5.0以降でTypescriptをサポートされたようなので現在ではTypeScriptで記述することもできます！

Gitで管理できるとコードを資産として残せるので次の同じようなScriptを記述する時も非常に便利です。

ウェブエディタも改善され使いやすくなっている印象ですがvscodeには叶わないと思うので小規模な開発でも利用することをオススメします！

設定も簡単なのでAppsScriptを使って業務効率化にチャレンジしてみてください！

【GAS】GoogleAppsScriptをいい感じに開発したい人向け