この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
こんにちは!たぬきうどんです!
私は2018年に非IT業界から未経験でエンジニアに転職し、現在までエンジニアとして働いています。
この記事ではGoogle Apps Script開発環境をVisual Studio Codeで構築する方法を書いています。
VS CodeでGAS開発を行いたい!
と考えている方はぜひ御覧ください!
環境構築
環境
今回の記事執筆時の環境は以下です。
- Windows OS
- PowerShell
- Node.js
v16.13.1
- npm
v8.1.2
今回使用するパッケージは以下です。
claspはGoogle Apps Scriptをローカルで開発するためのパッケージです。
また、Google Apps Scriptのタイプ定義のために@types/google-apps-scriptパッケージを使用します。
ESLintとPrettierの導入ははお好みで。
1. 必要なパッケージをインストールする
作業フォルダに移動し、以下のコマンドを実行し、package.json
を作成します。
npm init
TypeScriptのインストールとtsconfig.json
を作成します。
npm install typescript --save-dev
npx tsc --init
今回はプログラムファイル格納用にsrc
フォルダを、ビルドファイル格納用にdist
フォルダを使用するので、2フォルダを作業フォルダ下に作成します。
その後、tsconfig.json
に設定を追加します。
{
"include": ["src/*"],
"compilerOptions": {
"outDir": "./dist"
}
}
続いてclasp
と@types/google-apps-script
の両パッケージをインストールします。
npm install clasp @types/google-apps-script --save
eslint
とprettier
をインストールします。
導入する場合はESLintとPrettierのVS Codeの拡張を入れておきましょう。
npm install eslint prettier eslint-config-prettier eslint-plugin-googleappsscript --save-dev
ESLintの設定ファイルを対話的に作成します。
npx eslint --init
今回は以下の構成です。
√ 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の設定を追加しましょう。
module.exports = {
/* 中略 */
env: {
"googleappsscript/googleappsscript": true
}
plugins: [
/* 中略 */,
"googleappsscript"
],
extends: [
/* 中略 */
"prettier", // 他の設定の上書きを行うために、必ず最後に配置しましょう。
],
};
保存時にPrettierが走るように.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
にしたら以下のコマンドを実行し、ログインしましょう。
npx clasp login
アカウントへの認証を行いましょう。
ログインに成功すると、資格情報を.clasprc.json
に保存します。
.clasprc.json
ファイルはデフォルトではC:\Users\{ユーザー名}
に保存されます。
3. プロジェクトを作成する
GASプロジェクトを作成します。
今回はpraGas
という名前でプロジェクトを作成します。
次のコマンドでプロジェクトを作成しましょう。
npx clasp create --title praGas
どこにスクリプトを作成するか聞かれますので、適宜選択しましょう。
今回はstandalone
にします。
作成に成功したら Googleドライブを開いて、GASプロジェクトが作成されているか確認しましょう。
また、clasp の設定ファイル.clasp.json
とマニフェストファイルappsscript.json
が作業フォルダ下に作成されているので、それらも確認しましょう。
上記ファイルの作成を確認したら、.clasp.json
のrootDir
をdist
フォルダにし、appsscript.json
をdist
フォルダに移動します。
{
"rootDir": "./dist"
}
これでclasp
でプッシュコマンドを実行したときに、dist
フォルダにあるスクリプトファイルがプッシュされるようになります。
4. スクリプトを作成する
それではスクリプトを作成してみます。
src
フォルダにsayHello.ts
を作成し、以下のコードを書いていきましょう。
function sayHello(): void {
Logger.log("Hello GAS !");
}
それでは先程作成した GASプロジェクトにスクリプトをプッシュします。
npx clasp push
プッシュに成功したら、GASプロジェクトにスクリプトがあるか確認しましょう。
スクリプトを実行して、実行時間 情報 Hello GAS !
が実行ログに表示されていたら OK です。
プッシュコマンドを以下のようにnpmスクリプトに登録しておくと楽でしょう。
"scripts": {
"deploy": "clasp push"
},
おわりに…
以上がGoogle Apps Script開発環境をVisual Studio Codeで構築する方法でした。
clasp
パッケージにはまだいろいろな CLIがあるので、claspのGitHubページで使い方を確認してください。
この記事が皆さんのお役に立てば幸いです!
最後まで読んでいただき、ありがとうございました!