BETA

Google Apps Scriptをローカルでコーディングするためにclaspを導入した

投稿日:2018-10-16
最終更新:2018-10-24

Google Apps Script(以下GAS)は便利なので、業務効率化のために利用することが多いが、標準のオンライン開発環境だとコーディング補助や静的解析が弱いので、ローカルでコーディングできないものか?と思っていた。

調べてみると少し前から「clasp」というCLIツールがgoogleより提供されており、これを利用するとローカル環境での開発が可能となることから入れてみた。

環境

  • windows8.1

参考資料

https://qiita.com/rf_p/items/7492375ddd684ba734f8

https://qiita.com/soundTricker/items/354a993e354016945e44#%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E4%B8%80%E8%A6%A7%E3%81%AE%E5%8F%96%E5%BE%97%E4%BD%9C%E6%88%90

https://qiita.com/HeRo/items/4e65dcc82783b2766c03#%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E7%AE%A1%E7%90%86

claspとは?

googleから提供されているCLIツール。これを使うとGASのプロジェクトを作成したり、G Suiteからソースをpullしたり、pushしたり、バージョン作成やバージョン確認が可能となる。

claspを使って何が嬉しいのか?

  • GASは便利だが、web上の開発ツールだとちょっとしたところが足りない。それがローカル環境だと自分の慣れた環境で開発できる。

  • GASはほぼJavaScriptなので、JavaScript的補完が効き、開発効率UP。

  • gitなどでソースのバージョン管理できる。

  • GASはWindows officeでいうところのVisual Basicなので、なんとなく開発と言い切れない部分がローカル環境の開発ツール使って(黒い画面で)操作しているとかっこよく、開発しているっぽさが増す。

claspを入れてみよう

  1. node.jsとnpmのインストール

  2. npmを使ってclaspを導入

$ npm i @google/clasp -g
  1. GAS APIをONにする

このあたりは参考リンクを参照。

  1. clasp loginする

ログインするとwebでいつものグーグルの認証画面が出るので認証を通す。するとwindowsの場合、ユーザーのhomeディレクトリ直下に

.clasprc.json

というjsonファイルが作成される。

$ clasp logout

とするとログアウトするのだが、この時login時に作成された

.clasprc.json

が削除されている。

つまりこのファイルが認証情報になっている様子。

ちなみに自分の環境では上記のlogoutコマンドを叩かない限り、PCそのもののシャットダウンなどをしてもjsonファイルは残り続けており、かつclasp loginせずにいきなりclaspコマンドが利用できた。

claspを使った自分流のローカル開発環境の実現

  • ざっくりした開発の流れ

    1. cloneまたはcreateでプロジェクトを作る

    2. gitリポジトリ作成

    3. VSCodeで開発

    4. Gitステージング→コミット

    5. clasp push

    6. G Suite上でデバッグ

      • この時エラーが出るなど修正があれば、3-5を繰り返す
    7. 正常に動けばclasp version 'hogehoge'でバージョン作成

claspで疑問に思ったこととその確認した結果

  • GASプロジェクトを切り替えるにはどうしたらいいのだろうか?

    参考にした資料でもgoogleのclasp説明資料でもイマイチよくわからなかったので、いろいろ試してみた。

    その結果、最初にcreateまたはcloneをすると

    .clasp.json

    というファイルがカレントディレクトリに作成されるのだが、この中にスクリプトIDが記載されていて、その設定ファイルを処理時に参照してGASと紐づけて処理していることが判明した。

    つまり、プロジェクトの切り替えは特別なコマンドで操作する、などではなく、単純にカレントディレクトリを移動するだけでよかった。

    具体的には以下のようなディレクトリ構成があったとする。

    gas

    ├ gasprojectA

    │ └ .clasp.json

    │ └ hoge.js

    └ gasprojectB

      └ .clasp.json

      └ hogeB.js

    作業時にgasprojectAとgasprojectBを交互に操作したい場合があったとしたら、コマンドプロンプトでカレントディレクトリを都度移動して、claspコマンドを打てば、そのカレントディレクトリにあるjsonファイルに記載されたスクリプトIDに紐づくGASプロジェクトに対して、カレントディレクトリ内のファイルをやり取りしてくれる、ということ。

  • ローカル環境でどのようなディレクトリ管理がよいか?

    参考にしたリンクにはGASのjsファイルに「/」を入れるとclasp pullした時にディレクトリ階層にしてくれるとあるのだが、この「/」があることがもやもやしてしまい、結果自分はローカル環境でそれぞれプロジェクトごとにディレクトリを作成して、そのディレクトリ内にcloneすることにした。

例としては上記のプロジェクト切り替えの通り。

これでwebのGAS上でも「/」がなく、かつGASプロジェクトごとにディレクトリが分割しているので、gitリポジトリもそれぞれ個別で作成可能となった。

claspでもやはりまだイマイチな点

  • pushしないとイマイチデバッグができない

    GASにもよると思うが、スプレッドシートとセットなどG Suiteのサービスとセットになっている場合が多いため、ローカルでの動作確認には限界がある。

  • ネットワーク環境にもよると思われるが、処理に時間がかかる

    もしかしたら都度json見に行っているから?自分のネットワーク環境もあるので、これはイマイチ原因はわからないが、webでコーディングしてそのまま動かす、というclasp利用なしと比べるとこの点はどうしても劣る。

なんだかんだでclaspいいよ

イマイチな部分はあるが、やはりローカル環境での開発とgitでのバージョン管理ができるのはよい。

最近はGASのコンソール画面もあり、webでできることも一覧で確認する方法も充実してきているので、web上でのサービスとclaspと組み合わせると結構幸せなGASライフを送れる。

G Suiteを利用して、GASでなにかしている人にはclaspオススメ。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@gohh56の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう