VSCodeを使ったGoogle Apps Script開発の環境構築

はじめに

この記事では、VSCodeでGoogle Apps Script（以下GAS）開発の環境を構築する方法を紹介します。GASを開発するためにはGoogleアカウントが必要になるので、もしお持ちでない方は先に作成してください。また、ローカルからGoogleアカウントにアクセスするためにclaspというNode.jsパッケージを使うので、Node.jsも必要になります。詳細は以下のドキュメントをご覧ください。

最終的なディレクトリ構成

myApp/
├── .clasp.json
├── .claspignore
├── appsscript.json
└── main.js

Google Apps Script APIを有効にする

まずはGAS APIを有効にしましょう。使いたいアカウントにログインした上で設定してください。以下からアクセスできます。

プロジェクトディレクトリの作成とパッケージのインストール

mkdir myApp
cd _$
npm init -y
npm i -g @google/clasp # claspはグローバルにインストールする

claspでGoogleアカウントにログインする

clasp login

このコマンドを実行するとブラウザでアカウント認証画面が開きます。先程のGAS APIを有効にしたアカウントを選択し、指示に従って進めてください。成功すると以下のようなメッセージが表示されます。以降はclaspコマンドでローカルからGoogleアカウントにアクセスして、GASソースコードのアップロード・ダウンロードなどができるようになります。

アプリケーションの新規作成と設定

以下のコマンドで新しくアプリケーションを作成します。

clasp create --type standalone

するとプロジェクトルートに以下のファイルが作成されます。

• .clasp.json claspの設定ファイル
• appsscript.json GASの設定ファイル

またアカウントのGoogle Driveにもアプリケーションが作成されているので確認してみてください。

appsscript.jsonのtimeZoneを日本に変更します。

appsscript.json

{
+ "timeZone": "Asia/Tokyo",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}

.claspignoreファイルを作成します。

後でアプリケーションをGoogleにアップロードする工程があるのですが、これはその時にアップロードしたくないファイルやディレクトリを指定するためのものです。.gitignoreのようなものですね。

以下はmain.jsとappsscript.json以外の全てを無視する設定です。

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

main.jsを作成します。今回はログを出力するだけの簡単なコードです。

main.js

const test = () => {
  console.log("Hello GAS!");
}

Googleにアプリケーションをアップロードする

ではいよいよ、Googleにアプリケーションをアップロードします。

clasp push

成功すると以下のようなメッセージが表示されます。

次に以下のコマンドを実行すると、今アップロードしたGASのwebエディターがブラウザで開きます。

clasp open

この時、main.jsはmain.gsへ自動的に変換されています。実行ボタンを押してログが表示されれば成功です🎉 お疲れ様でした！

おわりに

ローカルで開発すればエディターによる拡張機能の恩恵も受けられますし、Githubでのコード管理も楽になると思います。ぜひやってみてください。
最後まで読んでいただきありがとうございました!!