📖

clasp + TypeScript のGASローカル開発環境構築

に公開
TypeScript
GAS
clasp
idea

npm, clasp のインストール、Googleへのログインは済んでいることを前提とする。

  1. github リポジトリのクローン

    git clone "repository_url"

  2. GAS プロジェクトのクローン

    clasp clone “SCRIPT_ID”

  3. npm プロジェクトの初期化

    npm init -y

  4. clasp, TypeScript のローカルインストール

    npm install --save-dev typescript prettier @types/google-apps-script

  5. TypeScript の設定

    5-1. tsconfig.json の作成

    {
  "compilerOptions": {
    "target": "ES6",
    "lib": ["ES5", "ES6"],
    "module": "none",
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

    5-2. src, dist ディレクトリ作成

    mkdir src dist

  6. clasp の設定

    6-1. .clasp.json のrootdirを変更

    	{
	"scriptId": "SCRIPT_ID",
	"rootDir": "dist"
}

    6-2. appsscript.json を dist へ移動

    mv appsscript.json dist/$1

  7. .gitignore の作成

    # npm install 時に作成されるディレクトリ
node_modules/

# TypeScript のトランスパイル結果
dist/

# macOS のシステムファイル
.DS_Store

# ログファイル
*.log

# 環境変数ファイル
.env

# GAS のスクリプトIDが含まれるファイル
.clasp.json

  8. package.json の設定追加

    "scripts": {
	"format": "prettier --write '**/*.{ts, tsx}'"
}

トランスパイルの実行

  1. 通常

    npx tsc

  2. 継続監視

    npx tsc --watch

フォーマッターの実行

npm run format

Discussion