React on GAS on Spreadsheet 환경 구축

개시하다

create vite

yarn create vite {projectName} --template react-ts
cd {projectName}
yarn

서버와 클라이언트로 나누기

mkdir src/client
mkdir src/server
mv src/*.* src/client/.
sed -i -e "s/main.tsx/client\/main.tsx/g" index.html #main.tsx の場所が変わったことに対応

서버 측

types 다운로드

yarn add -D @types/google-apps-script

server/main.ts 만들기

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const onOpen = () => {
  const menu = SpreadsheetApp.getUi().createMenu("メニュー").addItem("ダイアログ表示", "openDialog");
  menu.addToUi();
};

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const openDialog = () => {
  const html = HtmlService.createHtmlOutputFromFile("index").setWidth(600).setHeight(600);
  SpreadsheetApp.getUi().showModalDialog(html, "タイトル");
};

interface SheetData {
  name: string;
  numOfRows: number;
}

// TODO: テスト用の関数なので、適切なものに変更する
const getSheetData = (): SheetData => {
  const sheet = SpreadsheetApp.getActiveSheet();
  return {
    name: sheet.getName(),
    numOfRows: sheet.getMaxRows(),
  };
};

// TODO: テスト用の関数なので、適切なものに変更する
const appendRowsToSheet = (sheetName: string, rowsToAdd: number): void => {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
  if (!sheet) return;
  sheet.insertRowsAfter(sheet.getMaxRows(), rowsToAdd);
  sheet.getRange(1, 1, 5, 5).setValues([
    [1, 2, 3, 4, 5],
    [6, 7, 8, 9, 10],
    [11, 12, 13, 14, 15],
    [16, 17, 18, 19, 20],
    [21, 22, 23, 24, 25],
  ]);
};

export { getSheetData, appendRowsToSheet };

측면

가스-client 추가

yarn add gas-client

client/App.tsx 변경

import "./App.css";
import { GASClient } from "gas-client";

import * as server from "../server/main";

const { serverFunctions } = new GASClient<typeof server>();

function App() {
  const handleButtonClick = async () => {
    const sheetData = await serverFunctions.getSheetData();
    console.log(sheetData);

    serverFunctions.appendRowsToSheet("シート1", 1);
  };

  return (
    <div className="App">
      <button type="button" onClick={handleButtonClick}>
        ボタン
      </button>
    </div>
  );
}

export default App;

GAS에서 사용할 수 있도록 "\"로 통합하여 구축

플러그인 추가

yarn add -D vite-plugin-singlefile

vite.config.ts 편집

// eslint-disable-next-line import/no-extraneous-dependencies
import react from "@vitejs/plugin-react";
// eslint-disable-next-line import/no-extraneous-dependencies
import { defineConfig } from "vite";
// eslint-disable-next-line import/no-extraneous-dependencies
import { viteSingleFile } from "vite-plugin-singlefile";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), viteSingleFile()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: () => "everything.js",
      },
    },
  },
});

GAS 디버깅 가능

clasp create

## clasp を未インストールの場合
# yarn global add @google/clasp
# clasp login

clasp create # 作成したいスクリプトの種類を選択
# Spreadsheet で使用する場合は sheets を選択

.clasp.json 편집

appsscript.json 편집

프레젠테이션용scripts 추가

{
  ...
  "scripts": {
    ...
    "deploy": "mkdir claspDist && cp -r src/server/* claspDist && cp dist/index.html claspDist && cp appsscript.json claspDist && clasp push && rm -rf claspDist"
  }
  ...
}

설계를 진행하다

yarn build
yarn deploy

끝말

비망록

scripts 오류 발생 시

{
  ...
  "scripts": {
    "postinstall": "sed -i -e \"s/^declare var console/\\/\\/declare var console/g\" node_modules/@types/google-apps-script/google-apps-script.base.d.ts"
  }
  ...
  "devDependencies": {
    "@types/google-apps-script": "^1.0.45",
      ...
  }
}