VScodeとTypeScriptを用いたGAS開発の効率化

概要

Google App Script(GAS)のコーディングにclaspとVScodeを用いている。エディタは使い慣れたVScodeで作業したいかつ、TypeScriptを用いた開発を行いたいためである。が、このセットアップ作業が毎回とてもとてもめんどくさい。npmパッケージをダウンロードしたのち自分好みのディレクトリ構成にするというのは決まった動作なので、作りたいファイル名を指定すればあとは自動でセットアップしてくれるようにした。

実行環境

MacBook Pro (M3, 2023)（Apple Silicon）
OS: macOS Sonoma 14.4

作りたいディレクトリ構成

project  
├── node_modules/  
├── src/  
│   ├── appsscript.json  
│   └── main.ts  
├── .clasp.json  
├── package-lock.json  
└── package.json

また、.clasp.jsonのrootDirを./srcに変更しておきたい。

解決策

jsonの書き換えにはjqを用いた。homebrewであれば、以下のコマンドでインストール可能なので先にインストールしておく。

terminal

brew install jq

GASのプロジェクトを作成したいディレクトリに以下のファイルを置いておき、そのファイルをターミナルで./setup.sh {file_name}と呼び出す(例えば、sampleというプロジェクト名ならば./setup.sh sampleとするだけでいい)。

setup.sh

# 引数が指定されているか確認
if [ -z "$1" ]; then
  echo "
  GASのプロジェクトを作成したいディレクトリに置いて実行してください
  使用法: ./setup.sh {file_name}"
  exit 1
fi

# ディレクトリ名を変数に格納
FILE_NAME=$1

# ディレクトリを作成し移動
mkdir "$FILE_NAME"
cd "$FILE_NAME" || exit

# 必要なパッケージをインストール
npm i @google/clasp
npm i @types/google-apps-script
npm init -y

# claspにログイン
echo "claspにログインしてください..."
npx clasp login

# clasp createを実行
echo "プロジェクトを作成します..."
npx clasp create

# .clasp.jsonのrootDirを./srcに変更
jq '.rootDir = "./src"' .clasp.json > temp.json && mv temp.json .clasp.json

# srcディレクトリを作成し、ファイルを移動
mkdir src
mv appsscript.json src/
cd src || exit
touch main.ts
cd ..

# VSCodeでプロジェクトを開く
code .

echo "セットアップが完了しました！"
'

終わりに

コードを自分好みに適宜修正して快適なGASコーディング生活を送りましょう！！