Google Apps Script開発環境をVisual Studio Codeで構築する

こんにちは!たぬきうどんです!

私は2018年に非IT業界から未経験でエンジニアに転職し、現在までエンジニアとして働いています。

この記事ではGoogle Apps Script開発環境をVisual Studio Code構築する方法を書いています。

VS CodeでGAS開発を行いたい!

と考えている方はぜひ御覧ください!

環境構築

環境

今回の記事執筆時の環境は以下です。

  • Windows OS
  • PowerShell
  • Node.js v16.13.1
  • npm v8.1.2

今回使用するパッケージは以下です。

claspGoogle Apps Scriptをローカルで開発するためのパッケージです。

また、Google Apps Scriptのタイプ定義のため@types/google-apps-scriptパッケージを使用します。

ESLintPrettierの導入ははお好みで。

1. 必要なパッケージをインストールする

作業フォルダに移動し、以下のコマンドを実行し、package.jsonを作成します。

PowerShell
npm init

TypeScriptの導入

TypeScriptのインストールtsconfig.jsonを作成します。

PowerShell
npm install typescript --save-dev
npx tsc --init

今回はプログラムファイル格納用srcフォルダを、ビルドファイル格納用distフォルダを使用するので、2フォルダを作業フォルダ下に作成します。

その後、tsconfig.jsonに設定を追加します。

tsconfig.json
{
  "include": ["src/*"],
  "compilerOptions": {
    "outDir": "./dist"
  }
}

claspと@types/google-apps-script のインストール

続いてclasp@types/google-apps-scriptの両パッケージをインストールします。

PowerShell
npm install clasp @types/google-apps-script --save

(お好みで)ESLint と Prettierのインストール

eslintprettierをインストールします。

導入する場合はESLintとPrettierのVS Codeの拡張を入れておきましょう。

PowerShell
npm install eslint prettier eslint-config-prettier eslint-plugin-googleappsscript --save-dev

ESLintの設定ファイルを対話的に作成します。

PowerShell
npx eslint --init

今回は以下の構成です。

PowerShell
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · none
√ Does your project use TypeScript? · Yes
√ Where does your code run? · node
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · airbnb
√ What format do you want your config file to be in? · JavaScript
√ Would you like to install them now with npm? · Yes

作成された.eslintrc.jsにPrettierとGAS用のESLintプラグインeslint-plugin-googleappsscriptの設定を追加しましょう。

.eslintrc.js
module.exports = {
  /* 中略 */
  env: {
    "googleappsscript/googleappsscript": true
  }
  plugins: [
    /* 中略 */,
    "googleappsscript"
  ],
  extends: [
    /* 中略 */
    "prettier", // 他の設定の上書きを行うために、必ず最後に配置しましょう。
  ],
};

保存時にPrettierが走るように.vscode/settings.jsonを作成し、設定を追加しましょう。

.vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

2. claspでログインする

claspを使うためにGoogle Apps Script APIを有効化しましょう。

https://script.google.com/home/usersettingsからGoogle Apps Script APIをONにします。

ONにしたら以下のコマンドを実行し、ログインしましょう。

PowerShell
npx clasp login

アカウントへの認証を行いましょう。

ログインに成功すると、資格情報を.clasprc.jsonに保存します。

.clasprc.jsonファイルはデフォルトではC:\Users\{ユーザー名}に保存されます。

3. プロジェクトを作成する

GASプロジェクトを作成します。

今回はpraGasという名前でプロジェクトを作成します。

次のコマンドでプロジェクトを作成しましょう。

PowerShell
npx clasp create --title praGas

どこにスクリプトを作成するか聞かれますので、適宜選択しましょう。

今回はstandaloneにします。

作成に成功したら Googleドライブを開いて、GASプロジェクトが作成されているか確認しましょう。

また、clasp の設定ファイル.clasp.jsonマニフェストファイルappsscript.jsonが作業フォルダ下に作成されているので、それらも確認しましょう。

上記ファイルの作成を確認したら、.clasp.jsonrootDirdistフォルダにし、appsscript.jsondistフォルダに移動します。

.clasp.json
{
  "rootDir": "./dist"
}

これでclaspでプッシュコマンドを実行したときに、distフォルダにあるスクリプトファイルがプッシュされるようになります。

4. スクリプトを作成する

それではスクリプトを作成してみます。

srcフォルダにsayHello.tsを作成し、以下のコードを書いていきましょう。

sayHello.ts
function sayHello(): void {
  Logger.log("Hello GAS !");
}

それでは先程作成した GASプロジェクトにスクリプトをプッシュします。

PowerShell
npx clasp push
TypeScriptのトランスパイル

clasp push 時に.tsファイルはgasファイルに自動的にトランスパイルされます。

プッシュに成功したら、GASプロジェクトにスクリプトがあるか確認しましょう。

スクリプトを実行して、実行時間 情報 Hello GAS !が実行ログに表示されていたら OK です。

プッシュコマンドを以下のようにnpmスクリプトに登録しておくと楽でしょう。

package.json
"scripts": {
  "deploy": "clasp push"
},

おわりに…

以上がGoogle Apps Script開発環境をVisual Studio Codeで構築する方法でした。

claspパッケージにはまだいろいろな CLIがあるので、claspのGitHubページで使い方を確認してください。

この記事が皆さんのお役に立てば幸いです!

最後まで読んでいただき、ありがとうございました!

参考文献

コメントを残す

メールアドレスが公開されることはありません。