しおすけぶろぐ

このブログは、管理人「しおすけ」の好きなものや、役に立ちそうなものを紹介するブログです。

Google App ScriptをVSCodeで書く方法

いつもはファイターズと、たまにB'zの記事しか書いていませんが、
一応エンジニアの端くれでもあるので、その辺りの記事も書いていこうと思っています。

f:id:longfield712:20210124231526p:plain

今回は、Google Apps Script(GAS)に関する記事になります。

Google Apps ScriptをVSCodeで書く方法

背景

昨年からGoogleスプレッドシートでマクロを組む機会が増えたのですが、
職場でVSCodeを使っていることもあり、どうもあの標準のエディタは使いにくいな、
と常々思っていました。
やっぱり補完機能とか拡張機能とか使いたいじゃないですか。
補完の方は標準エディタの方でも一部やってはくれますが、なんかあんまり候補を表示されたこともなく。
VSCodeでGAS書きたいなー、と思って調べたら、ありました!

ということで、その紹介になります。
(とは言っても、主にそのやり方を紹介しているブログ記事の紹介になるのですが...^^;)

※ちなみに私の場合は、VSCodeでの編集環境構築前にスプレッドシートやある程度のマクロは既に存在しており、その上で今回紹介する環境構築を行いました。
なお、OSはWindowsです。

事前に必要なもの

その他Node.jsやclaspなども最終的には必要になりますが、
それはこの後紹介させて頂く記事内に書かれていますので、ここでは割愛します。

VSCodeのダウンロードはこちら

azure.microsoft.com

環境構築

さて準備が整ったらいよいよ環境構築に入っていきます。
環境構築はこちらの記事を参考にさせて頂きました。

coxcox.hatenablog.com注意事項なども書かれていますので、とても分かりやすかったです。

 

補完機能

上記の環境構築が済めば、めでたくVSCodeでGASを書くことが出来るのですが、
実はこのままだと補完機能が動きません
なので、補完機能を動くようにしてあげる必要があります。

gas.excelspeedup.comこれで補完機能が動くようになり、快適にコードを書くことが出来るようになります。

 

注意点

VSCode側での編集をスプレッドシートに反映させるには、

clasp push

というコマンドを使用しますが、
逆にスプレッドシート側のコードをVSCode側へ反映させるには、

clasp pull

というコマンドを叩くことになります。

ですので、VSCode側でごりごり実装して動作確認のためにclasp pushをするつもりが、
間違えてclasp pullとしてしまうと反映前のスプレッドシートの内容で上書き更新されてしまうので注意が必要です。

 

VSCodeでGASを編集できるメリットは、補完機能と、そして拡張機能が使えるという点にあると思います。

次回は私がVSCodeに入れている拡張機能の紹介をしたいと思います。

したっけ!