77
81

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-06-08

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の対象となります。

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

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

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

参考にした記事

こんな記事も書いてます

77
81
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
77
81

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?