GAS書くならclasp - スタイル・エッジ技術ブログ

こんにちは、スタイル・エッジLABOのONです。

LABOに入社してGAS(Google Apps Script)に初めて触れる機会を得られました。
触ってみると、「ブラウザ上のスクリプトエディターで書くのをどうにかしたい...」
「ただ、ローカルで書いてブラウザにペーストは違う...」という悩みがでてきました。

GAS自体有名だし、なんか解決策あるでしょ!と調べてみたら
ご本家Googleさんが出されているではありませんか。

今回はそんな便利なclaspというライブラリのお話です。

clasp - The Apps Script CLI
https://codelabs.developers.google.com/codelabs/clasp/#0

GitHub - google/clasp: Command Line Apps Script Projects
https://github.com/google/clasp

claspはnpmモジュールとして提供されており、
インストールすることで「clasp」というコマンドが使えるようになります。

このclaspコマンドを用いることで、
ローカルのコードをGASにアップロード(push)したり、GASからコードをダウンロード(pull)したりできます。

push/pullを使って、ローカルのエディターでの補完全開コーディングができる
- ソースのgit管理ができる
TypeScript対応しており、push時に自動でtsファイルをGAS向けにコンパイルしてくれる
- タイプセーフのおかげで、エディター内でのリファクタがしやすい
- 同じく、GASのデバッグしにくさ対策として意図しない動作防止につながる

では、ざっくり触ってみましょう!

ブラウザでGoogleにログインしたら下記URLにアクセスします

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

Google Apps Script APIをクリックして「オン」にしてあげてください。

# claspをグローバルインストール
npm install -g @google/clasp

claspがインストールできたので、claspとGoogleドライブを連携しましょう

clasp login

実行すると、こんなログが流れて...

Logging in globally...
Authorize clasp by visiting this url:
https://accounts.google.com/o/oauth2/v2/auth?access_type=******

ブラウザが立ち上がり、Googleのログイン画面が表示されます。
ログインして、ドライブへのアクセスを許可してあげると...

このような画面が表示されるので、表示されたブラウザタブは閉じてしまってOKです!
これで導入は完了!

(ログイン情報は、OSのユーザーのホームディレクトリに.clasprc.jsonとして保持されます)

それでは、プロジェクトを作成しましょう。

# ディレクトリを作って移動
mkdir clasp_ss
cd clasp_ss

# プロジェクト作成
# 実行すると対話式で連携アプリなどを聞かれます
# (GASだけ作りたいならstandaloneを選択)
clasp create

実行後にGoogleドライブを参照するとGASもしくは連携アプリのオブジェクトが作成されているはずです。
clasp create は、オプションの指定も可能。

簡単なソースコードを書いてGASはpushしてみましょう。

# 実行するソースコードを作成
vi Code.js

    # 下記内容を記述して保存
    function myFunction() {
          Logger.log('hello worlod');
    }

GASへpush!

clasp push

GoogleドライブのGASでスクリプトエディターを見るとソースコードが反映されているはずです。

clasp create実行時に作成される.clasp.jsonに下記を追記します。

{
    "scriptId": "*******************",
    "rootDir": "./src",
    "fileExtension": "ts"  <= 追記
}

Google Apps Script用の型定義追加

npm install  --save-dev @types/google-apps-script

あとは、作成するソースコードをxxx.jsではなく、xxx.tsにしてあげてください。

他にもclasp pullでGASのコードをローカルに持ってきたり(上書き注意)、
clasp cloneで複製したりもできます。
GCPプロジェクトを作っておけばclasp runで実行できたりもするようです。

Google本家がこういったライブラリを用意してくれているのはなによりも有難いお話です。
ちょっと試したいならブラウザのスクリプトエディターで、
ガッツリいきたいならclaspでgit管理しながら、なんて使い分けもありですね!
個人的にはTypeScriptで書ける安心感がかなり魅力でした。

スタイル・エッジLABOでは、一緒に働く仲間を募集しています。
もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください！