スタイル・エッジLABO技術ブログ

士業集客支援/コンサルティングのスタイル・エッジグループ スタイル・エッジLABOのエンジニアによるブログです。

GAS書くならclasp

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

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

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

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

f:id:styleedge_tech:20210221203952j:plain

公式情報


公式ドキュメント

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

Github

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

claspとは?


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

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

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

導入方法


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

Google Apps Script APIをオンにする

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

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

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

claspのインストール
# claspをグローバルインストール
npm install -g @google/clasp
Googleドライブと連携

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のログイン画面が表示されます。
ログインして、ドライブへのアクセスを許可してあげると...

f:id:styleedge_tech:20210221191046p:plain

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

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

プロジェクトの作成 ~ GASへpush

プロジェクト作成

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

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

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

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

GASへpush

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

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

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

GASへpush!

clasp push

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

TypeScript対応


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では、一緒に働く仲間を募集しています。
もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!

recruit.styleedge-labo.co.jp