👨‍💻

GASをTypescriptで。(動作確認済み)

に公開
JavaScript
TypeScript
GAS
tech

Google Apps Script (GAS) を TypeScript で開発し、VSCode を使ってスプレッドシートを操作する方法を以下に説明します。TypeScript を使うことで、型安全で保守性の高いコードを書けます。

手順

  1. 必要なツールのインストール
    まず、以下のツールをインストールします。

    • Node.js（npmが使える環境）
    • clasp（Google Apps Script の CLI ツール）

    clasp のインストールコマンド:

    npm install -g @google/clasp

  2. Google アカウントで clasp を認証

    clasp login

    指示に従って Google アカウントで認証を行います。

  3. プロジェクトの作成
    スプレッドシート用のプロジェクトを作成します。

    新規プロジェクト作成:

    clasp create --type standalone --title "Spreadsheet Project"

  4. プロジェクトディレクトリのセットアップ
    作成したプロジェクトディレクトリで TypeScript を設定します。

    必要なモジュールのインストール:

    npm init -y
npm install --save-dev @google/clasp @types/google-apps-script typescript

    TypeScript の初期設定:

    npx tsc --init

    tsconfig.json を以下のように修正します:

    {
  "compilerOptions": {
    "target": "es5",
    "lib": ["es6", "dom"],
    "module": "commonjs",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": ["src/**/*"]
}

  5. GAS プロジェクトのコードを TypeScript で記述
    プロジェクト内に src ディレクトリを作成し、そこにコードを書きます。

    例: src/main.ts を作成

    function createSpreadsheet(): void {
  const sheet = SpreadsheetApp.create("My New Spreadsheet");
  sheet.getActiveSheet()?.getRange("A1").setValue("Hello, Spreadsheet!");
}

function updateSpreadsheet(): void {
  const spreadsheet = SpreadsheetApp.openById("YOUR_SPREADSHEET_ID");
  const sheet = spreadsheet.getActiveSheet();
  if (sheet) {
    sheet.getRange("A1").setValue("Updated Value");
  }
}

  6. ビルドとデプロイ
    TypeScript を JavaScript にコンパイルし、GAS にデプロイします。

    ビルド:

    npx tsc

    デプロイ:

    clasp push

  7. Google スクリプトエディタでスクリプトを確認
    Google Apps Script のウェブエディタでプロジェクトを確認したい場合は以下を実行:

    clasp open

  8. スクリプトを実行
    Google スプレッドシートの操作コードを実行するには、Google Apps Script のウェブエディタやトリガーで実行を設定します。

補足

  • YOUR_SPREADSHEET_ID の部分には対象のスプレッドシートの ID を入力してください。
    スプレッドシートの URL: https://docs.google.com/spreadsheets/d/XXXXXXXXXXXXX/edit の XXXXXXXXXXXXX が ID です。

  • clasp のバージョンや Google Apps Script API の仕様が変わることがあるので、最新情報は clasp の公式ドキュメントを参照してください。

ChatGPTによって生成

Discussion