この記事は最終更新日から4年以上経過しているため正確ではないかもしれません

Google Apps Script(GAS)をローカルエディタで編集する

投稿日：2019年09月04日

Google Apps Script(GAS)はエクセルのマクロと同じく便利です。
JavaScriptで書けるのでウェブエンジニアにとっては敷居も低く、エディタでは補完もしてくれます。

でも、ブラウザエディタだと使い慣れたエディタとは違って、インデントを揃えたりするのでもタブではなくスペースを必要回数打ったりするストレスがありました。
できれば自分がいつも使っているエディタで書きたい。
もっと言えばリポジトリで管理したい。

こんな願いを叶えるためGoogle自ら対応してくれました。

Google謹製 “clasp”

Googleが2018年にclaspというCLIツールをリリースしました。
これによってローカルでGASファイルを作成し、コマンドでアップロードしたりファイルを開いたりすることができるようになりました。

ローカルでファイルを作れるということはリポジトリで管理することもできます。

インストールとセットアップ

claspはグローバルにインストールします。

$ sudo npm i @google/clasp -g

Google Apps Script APIが有効になっていないと利用できないので下記リンクよりチェックしておいてください。
https://script.google.com/home/usersettings

プロジェクトの作成

プロジェクトを作成するためにファイルを格納するディレクトリを作成し、ターミナルで該当ディレクトリまで移動します。

$ mkdir gas-sample
$ cd gas-sample

新規作成

次にコマンドでclaspプロジェクトを作成します。

$ clasp create [project title]

[project title]は任意の名前をつけてください。
例はディレクトリ名と同一にしていますが一緒である必要はありません。

実行すると、下記図のように何でGASを利用するか聞かれるので展開する選択肢を選んでください。

standalone … 純粋なGoogle Apps Scriptのみを新規作成
docs … Google DocsとGAS
sheets … Google SpreadsheetとGAS
slides … Google SlidesとGAS
forms … Google FormsとGAS
webapp … GASが新規作成される
api … 現在サポートされていない？

例ではスプレッドシートを選択します。

Google Drive上の作成場所

選択するとGoogle Driveの直下ファイルが作成されます。
この時のファイル名はプロジェクトタイトルではなくてclasp createを実行したディレクトリ名で作られます。

[project title]でつけた名前はGoogle Apps Scriptの方のファイルタイトルになります。

ローカルに作られるファイル

実行後は下記のファイルがローカルに作成されます。

project/
  ├ .clasp.json
  └ appsscript.json

Google Drive上にもGoogle Apps Scriptファイルが作成されているので下記コマンドで開くことができます。

$ clasp open

必ず最初にGASの初期データを引っ張ってくる

ローカルにはJSONファイルしか作られませんが、Google Apps Script上にはデフォルトでCode.gsというものが作られています。
なので、まずは下記コマンドでデータを取得します。

$ clasp pull

タイムゾーンを変更

作成されたappsscript.jsonをまず開きます。
タイムゾーンが書いてある場合があります。

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

これを変更します。
もし、なければ追記してください。

変更前

変更したら下記コマンドでGoogle Apps Scriptを上書きします。

$ clasp push

この時、下記の選択肢が出ます。

$ ? Manifest file has been updated. Do you want to push and overwrite? (y/N)

すでにマニフェストファイル(appsscript.json)はGoogle Drive上にあるけど上書きするかどうかを聞かれていますのでyで上書きします。

変更後

pullとpushとopen

ここまでで$ clasp pull、$ clasp push、$ clasp openというコマンドが出てきました。
このうちpushとopenは何度も使うので覚えておきましょう。

pullに関しては、他人が触ったとか他のパソコンに移動したなどあればpullで最新を取得する以外ではほとんど使いません。

リポジトリ管理をしていれば基本的にpullはあまり必要ないけど、コミットする前など連携が必要な場合に行うと便利です。

ライブラリの追加方法

Google Apps Scriptでは処理を楽にするため外部ライブラリがいくつかあります。
有名所ではMoment.jsやUnderscoreGASというのがあります。
今まではGoogle Apps Scriptファイルのライブラリを開いて追加していましたが、appsscript.jsonに記述することで有効化もできます。

Moment.jsを追加

{
  "timeZone": "Asia/Tokyo",
  "dependencies": {
    "libraries": [
      {
        "userSymbol": "Moment",
        "libraryId": "MHMchiX6c1bwSqGM1PZiW_PxhMjh3Sh48",
        "version": "9"
      }
    ]
  },
  "exceptionLogging": "STACKDRIVER"
}

ライブラリ追加時の問題は、ライブラリ一覧みたいなものがないのでライブラリIDやバージョンを検索するのが大変だというところです。
どこかにまとめがないものだろうか…

実行権限

ここまででがしがしコードを書いてプッシュしていけばいいですが、内容によっては変更に権限が必要だったりします。
そこでスコープ権限を設定します。

追記するファイルはappsscript.jsonになります。

{
  "timeZone": "Asia/Tokyo",
  "dependencies": {
    "libraries": [
      {
        "userSymbol": "Moment",
        "libraryId": "MHMchiX6c1bwSqGM1PZiW_PxhMjh3Sh48",
        "version": "9"
      }
    ]
  },
  "exceptionLogging": "STACKDRIVER",
  "oauthScopes": [
    "https://www.googleapis.com/auth/drive",
    "https://www.googleapis.com/auth/spreadsheets",
    "https://www.googleapis.com/auth/script.external_request"
  ]
}

例では最後に追記しています。
スプレッドシートを選択したので真ん中がそうなっていますが、必要な権限はそれぞれ追記してください。
※必要最小限にとどめておくことを推奨します

参考：スコープ認証範囲

必要な権限がわからない場合

もし、権限が必要な場合は$ clasp openでGoogle Apps Scriptファイルを開いてファイル > プロジェクトのプロパティ > スコープに漏れている権限が記載されるのでそれをappsscript.jsonに記載してください。

appsscript.jsonとは

ここまで設定ファイルとしてappsscript.jsonというファイル名が出てきましたが、このファイルはマニフェストファイルといって約束みたいなものです。

ここまでであげた以外にもWebAppとして使うための設定などもあります。
詳しくは公式のマニフェストページを参考にしてください。

TypeScriptを使う

claspでは通常のGoogle Apps Scriptの書き方の他にTypeScriptでも書くことができます。

そのためにはpackage.jsonファイルを作成します。

# npm
$ npm init -y

# yarn
$ yarn init -y

そのあとに下記コマンドを実行します

# npm
$ npm i -S @types/google-apps-script

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

あとはCode.gsのような.gsではなく.tsでファイルを作成すればOKです。
webpackのようなモジュールバンドラーは不要で@google/claspが自動コンパイルしてくれます。

参考：公式サイトのTypeScriptガイド

注意事項

claspやGoogle Apps Scriptでは下記に要注意です。

ファイル名の昇順で読み込みを行う

Google Apps Scriptはファイル名の昇順で読み込んでいくのでa.gsの中にb.gsの関数や変数を登場させることはできません。
なので、ファイル名を工夫する必要があります。

TypeScriptではimport文が使えません

webpack等でコンパイルするわけではないので依存関係を解消するためのimport文を使うことができません。

今まで、Google Apps Scriptは便利だったもののリポジトリで管理できなかったり、ブラウザエディタで若干使いづらかったのもclaspを使うことで、手元に資産として残すことができます。
Google Apps Scriptを使っている人でまだclaspを知らなかったという人は是非利用してください。

clasp：公式 | GitHub

TECH BOX