ものづくり経営革新等支援機関

株式会社マネジメントオフィスいまむら

GASをローカルで開発。claspを使ったVS Code連携と自動同期の設定方法(1)【環境構築編】

https://imamura-net.com

おはようございます!マネジメントオフィスいまむらの今村敦剛です。

Google Apps Script(GAS)、めちゃくちゃ便利ですよね!このGASのコーディングをローカル環境でやって、自動でGASに反映させる方法を備忘録代わりにまとめます。今回は環境構築編です。

GASをローカルで開発したいという悩み

GASは、スプレッドシートやGmailを自動化できて、手軽に業務効率化ができる最高のツールだと思います。

でも、GASを触り始めたとき、こう思ったんですよね。

「GASのブラウザで開くエディタ、ちょっと書きにくくない…?」

「コードの色分けとか、入力のヒント(補完)がもっとリッチだったらなぁ…」

「普段使ってるVS Codeで開発できたら最高なのに!」

実はこの悩み、Googleが公式に提供している「clasp」というツールを使えば、すべて解決できてしまうことがわかりました。

そこで今回は、PCにGASのローカル開発環境を構築し、みんな大好きVS Codeで快適に開発を進め、書いたコードを自動でGASに反映させるまでの一連の流れを、2回にわたって徹底的に解説していきます。

今回はその第一歩、【環境構築編】です!ちょっと専門的な設定も出てきますが、ここを乗り越えれば未来の開発が劇的に楽になります。一緒に頑張っていきましょう!

そもそも「clasp」って何者?

「クラスプ」と読みます。一言でいうと、「PC(ローカル環境)とGoogle Apps Scriptプロジェクトを繋いでくれる、魔法の杖」 のようなものです。

これを使うと、やはり最大のメリットは好きなエディタが使えるということです。VS CodeやWebStormなど、高機能なエディタで開発できます。コードの色分けや入力補完が効くだけで、開発効率も気分も爆上がりです!

またVS Codeを使うということは、Gitという仕組みを使って、「いつ、誰が、どこを直したか」を記録できます。「あ、前の状態に戻したい!」なんて時も安心です。

これは一人親方のぼくにはあまり関係ありませんが、複数人で開発をするときは、みんなで同じコードを見ながら作業できるので、複数人で大きなプログラムを作る時に超便利じゃないかと思います。

最初の関門!環境を構築する

ここからはPCにclaspを導入し、Googleアカウントと連携させるための初期設定を行っていきます。

「黒い画面(ターミナル)とか出てきて難しそう…」と思うかもしれませんが、大丈夫です!基本はコマンドをコピー&ペーストしていくだけです。一度設定してしまえば、二度とやる必要のない作業なので、サクッと終わらせちゃいましょう!

ステップ1:Node.jsをインストールする

まず、claspを動かすために必要な「Node.js」というものをPCにインストールします。「Node.jsって何?」と深く考えなくても大丈夫。「claspさんをPCで働かせるための土台」くらいのイメージでOKです。

  1. Node.js公式サイトにアクセスします。
  2. 「LTS」 と書かれている方をダウンロードして、インストーラーの指示に従ってインストールしてください。(LTSは「Long Term Support」の略で、長期間サポートされる安定版です)

インストールが終わったら、ターミナル(WindowsならPowerShellやコマンドプロンプト、Macならターミナル.app)を開いて、以下のコマンドを打ち込んでみてください。

 Bash
node -v

v20.14.0のように、バージョン情報が表示されたらインストール成功です!

ステップ2:claspをインストールする

次に、主役であるclaspをインストールします。Node.jsと一緒についてきたnpmという執事のようなツールにお願いして、claspを持ってきてもらいましょう。

ターミナルに以下のコマンドをコピペして、Enterキーを押してください。

 Bash
npm install -g @google/clasp

しばらく待って、特にエラーが出なければインストール完了です!念のため、以下のコマンドでclaspがちゃんと入ったか確認してみましょう。

 Bash
clasp --version

バージョン情報が表示されればOKです!

ステップ3:Googleアカウントにログインする

今度は、claspがのGoogleアカウントのGASを操作できるように、許可を与えてあげます。

ターミナルで、以下のコマンドを実行してください。

 Bash
clasp login

すると、自動的にブラウザが立ち上がり、「Googleアカウントでログイン」や「このアプリを信頼しますか?」といった認証画面が表示されます。内容をよく読んで、問題がなければ「許可」をクリックしてください。

ターミナルに「Logged in successfully!」と表示されたら、連携成功です!

ステップ4:Apps Script APIを有効にする

claspのような外部ツールからGASを操作するには、Googleの管理画面で「APIを使ってもいいよ」というスイッチをオンにしてあげる必要があります。

  1. Apps Script設定ページにアクセスします。
  2. 「Google Apps Script API」という項目を見つけて、スイッチを「オン」に切り替えてください。
    これで、claspを使うためのすべての準備が整いました!

まとめ

これでPCはGoogle Apps Scriptと対話する準備が万端に整いました。今回は環境構築という、少し地味で難しい部分でしたが、ここを乗り越えたらもう大丈夫。

次回の【実践編】では、いよいよこの環境を使って、新しいGASプロジェクトをローカルで作成したり、すでにあるプロジェクトをPCに持ってきたりする方法を具体的に解説します。

最近の人気記事

1

おはようございます!マネジメントオフィスいまむらの今村敦剛です。 国際標準化機構(ISO)は、現行のISO9001:2015(品質マネジメントシステム規格I)を改訂する準備を進めているようです。現在の ...

2

おはようございます!マネジメントオフィスいまむらの今村敦剛です。 2024年2月、ISO(国際標準化機構)は、マネジメントシステム規格に「気候変動への配慮」を盛り込む形で規格の一部を改定しました。今回 ...

3

おはようございます!マネジメントオフィスいまむらの今村敦剛です。 5Sの考え方がISO9001や14001の運用に役立つことがあります。その逆もあって、ISOの仕組みが5S活動に役立つこともあるんです ...