Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Google App Script(GAS)をローカルで快適に編集して同期しよう!

Google App Script(以下GAS)、使ってますか?
Spreadsheetなんかにちょっとしたマクロ作るのとかに使うと思います。

ところでこのGASのオンラインエディタ、お世辞にも出来がいいとは言い難いですよね……
そんなに頻繁に使うわけではないから…と我慢していたのですが、いい加減に我慢の限界です!

そんな私や、あなたのために「google/clasp」というツールがあるので紹介です。

clasp をインストールする

nodeの実行環境が必要です。
インストールがまだならインストールを済ませておいてください。
それではclaspをグローバルインストールしましょう(ローカルインストールでもいいですけど)

 npm i @google/clasp -g  

clasp にログインする

メインのブラウザが連携したいGoogleのアカウントにログインしていることを確認してください。
G Suiteのユーザー設定画面からGAS APIを有効にしておく必要があるみたいです。

そして、以下のようにコマンドを打ちましょう。
(claspインストール直後はパスが通っていないことがあるので、その場合はShellを再起動してくださいね!)

clasp login

すると、ブラウザが開いて必要に応じてアカウントの選択と権限の許可が求められるので、許可します。
ブラウザでは「このページ閉じていいよ」的なメッセージが表示され、
ログインコマンドを実行したShell側に「Credential保存したよ」的なメッセージが表示されます。

claspでGASをcloneする

スクリーンショット_2020-06-06_17_16_33.png

スクリプトエディタを開いてURLのスクリプトIDをコピーします。

それでは、ローカルでディレクトリを切り、cloneしてみましょう。

mkdir MyGas
cd MyGas
clasp clone [scriptID]

(node:11914) ExperimentalWarning: The fs.promises API is experimental
Warning: files in subfolder are not accounted for unless you set a '.claspignore' file.
Cloned 2 files.
└─ appsscript.json
└─ コード.js
Not ignored files:
└─ appsscript.json
└─ コード.js

Ignored files:
└─ .clasp.json

clone完了です!

編集してpushする

ローカルにあるので .git管理も思うままですね!
試しにコードをちょっと編集してpushしてみましょう。

vi コード.js # なんか好きにいじる。コメントとか足してみる?
clasp push

ここでPushできなかったら、(メッセージがやたら長くて403エラーとか出てたら)Google App Script APIがオフになってるので再チェック!

スクリーンショット 2020-06-06 17.34.26.png
こんな感じで、ローカルで入れたコメントがGASにも反映されました!
めでたしめでたし。

ちなみに、オンラインでエディタ上に反映されてなくてもコードは反映されているようで、
ターゲットの関数名さえ変わっていなければrunすれば動きます。

あとは本当なら clasp run でローカルから起動開始できそうなんですが、
手元では上手くいかなかったです。要調査。

npmモジュールとか使いたい

nodeモジュールの資産とか使いたいですよね?
試しにコード.jsをPrettierとかで整形してみましょう。

npm init # 質問には適当に答える
npm prettier
prettier --write コード.js

こんな感じでPrettierが使えるようになり、コード整形もできましたね。
しかしpushするのはちょっとまってください!

clasp pushは明示的にignoreされているファイル以外すべてをpushしてしまいます。
.claspignore を作っておきましょう
以下のように書いておくとカレントディレクトリの *.jsファイルと、appsscript.json がpushの対象となります。

**/**
!*.js
!appsscript.json

これで、npmパッケージも使い放題です!
BabelもwebpackもTypeScriptもなんでもありですよ!
2020/6/10 追記
node_modulesをアップロードするわけには行かないので、バンドルしてあげる必要があるような気がします。
でもTypeScriptはいけるみたいなのでわりといけるみたいなのでは
GASをClaspとTypescriptでローカル開発してみた。(Clasp / Typescript / TSLint / Prettier)
Webpackでバンドルする必要があるのかな?

快適なGASライフをお楽しみください!
もっと早くやっておけばよかった…

参考にした記事

こんな記事も書いてます

studist
「伝えることを、もっと簡単に」をミッションにビジュアルSOPマネジメントプラットフォームのBtoB SaaS「Teachme Biz」を開発・運営するスタートアップ
https://medium.com/studist-dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away