概要

Google Apps Scriptの環境でReactのWebアプリを作成する際の手順になります.

目次

概要

動作環境

Windows 11
node v20.12.2
npm 10.5.0
vite 5.2.11
gitbash

Reactプロジェクトの作成

始めにReactプロジェクトをViteから作成します.

~\typescript> npm create vite
√ Project name: ... gas-test-project
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others
? Select a variant: » - Use arrow-keys. Return to submit.
    TypeScript
>   TypeScript + SWC
    JavaScript
    JavaScript + SWC

Scaffolding project in C:~\typescript\gas-test-project...

Done. Now run:

  cd gas-test-project
  npm install
  npm run dev

プロジェクトディレクトリに移動し,以下コマンドから問題なく起動できるか確認します.

npm install
npm run dev

buildの設定

GASプロジェクトにアップロードするファイルを1つにまとめたいので, viteのvite-plugin-singlefileをインストールします.

~/gas-test-project
$ npm install vite-plugin-singlefile --save-dev

added 1 package, and audited 164 packages in 1s

38 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

vite.config.tsにvite-plugin-singlefileに関する記述を追加します.

併せてファイル出力先を変更しておきます.

# vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { viteSingleFile } from "vite-plugin-singlefile"

export default defineConfig({
  plugins: [react(), viteSingleFile()],
  build: {
    outDir: 'dist/src',
  }
})

buildした際に生成したファイルはsrc内, その他のGASプロジェクトにアップロードしたいファイルはdist直下に入れておきます.

.
└── dist
    ├── src
    │   ├── index.html
    │   └── vite.svg
    └── // 後ほどファイルを追加

記述後にnpm run buildをするとdistフォルダ, srcフォルダとその中にindex.htmlが出力されます.

claspを用いたデプロイ

claspの追加

今回はclaspを用いて管理をしていきます.

プロジェクトにclaspをインストールしていきます.

~\gas-test-project> npm install -g @google/clasp

changed 274 packages in 20s

86 packages are looking for funding
  run `npm fund` for details

claspのログイン

インストール後にclasp loginでログインできます.

ログイン画面が出てくるので進めてください.

~/gas-test-project
$ clasp login
Warning: You seem to already be logged in *globally*. You have a ~/.clasprc.json
Logging in globally…
🔑 Authorize clasp by visiting this url:
~~~~~~~~~~~~~~~~~~~

Authorization successful.

Default credentials saved to: C:\Users\black\.clasprc.json.

GASプロジェクトを新規作成

clasp createでGASプロジェクトを作成します.

~/gas-test-project
$ clasp create
? Create which script?
  standalone
  docs
  sheets
  slides
  forms
> webapp
  api

Created new webapp script: https://script.google.com/d/~~~~ ← GASプロジェクトのリンク
Warning: files in subfolder are not accounted for unless you set a '~~~' file.
Cloned 1 file.
└─ ~\gas-test-project/appsscript.json

appsscriptファイルの設定

appsscript.jsonファイルはGASプロジェクトの設定ファイルになります.

このファイル中にwebappの項目を追加することでclasp deploy時にwebアプリとして認識してくれるようです.

{
  "timeZone": "America/New_York",
  "dependencies": {
  },
  "webapp":{}, // 空でもいいので作成する
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}

タイムゾーンを東京にしWebアプリのアクセスユーザを誰でも,実行権限はデプロイユーザにする場合は以下のようになります.

{
  "timeZone": "Asia/Tokyo",
  "dependencies": {
  },
  "webapp": {
    "executeAs": "USER_DEPLOYING",
    "access": "ANYONE" 
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}

doGet()用ファイルの作成

Webアプリにアクセスした際に(GETリクエストされた際に)doGet関数が実行されます.

その中でsrc/index.htmlを呼び出すように設定します.

export function doGet() : GoogleAppsScript.HTML.HtmlOutput{
    return HtmlService.createHtmlOutputFromFile("src/index.html")
}

アップロードファイルの整理

上記で編集したappsscript.json, doget.tsはGASプロジェクトにアップロードするのでdistフォルダに移動します.

vite.svgはアップロードできないので削除すると以下のようなフォルダ構成になります.

.
└── dist
    ├── src
    │   └── index.html
    ├── appsscript.json
    └── doget.ts

push / deploy

clasp pushでは.clasp.jsonのrootDirの配下にあるファイルをGASプロジェクトにアップロードします.

今回はdist配下のファイルをアップロードしたいのでrootDirの指定先を変えます.

{
    "scriptId":"~~~~",
    "rootDir":"C:\\~\\gas-test-project\\dist"
}

記載の変更ができたらclasp push, clasp deployでWebアプリのデプロイをします.

clasp push
clasp deploy

補足

google-apps-scriptの型定義

google-apps-scriptの型定義ファイルは以下のコマンドで取得できます.

npm install --save @types/google-apps-script

参考