私は高校が夏休みに入ってようやく次の記事が書けそうで…Qiitaを書く社会人はどのようにして記事を書いているのかすごい気になります…
もしこの記事が「わるくないねえ」とか思ってくださったらいいねください。
コメントなどつけてくださいましたら泣いて喜びます。
開発バージョン
node
- node: 26.5.0
- npm: 12.0.1
npmパッケージ
- @types/google-apps-script: 2.0.11
- @types/node": 26.1.1
- esbuild": 0.28.1
- esbuild-plugin-gas-generator": 2.0.2
- esbuild-single-html": 1.0.0
バックエンドはこれみてください。
GASアプリを作成する際、@OrzSabaku さんの
と、@debiru さんの
二つが大変役に立ちました。感謝してます。
ファイル構成
project_root/
├── src/ # GASのバックエンド
│ └── index.ts # エントリーポイント
├── frontend/ # GASのWebアプリのフロントエンド
│ ├── index.html # エントリーポイント
│ └── app.ts
├── scripts/
│ └── build.js # ビルドスクリプト
├── appsscript.json # GASのマニフェスト
├── dist/ # ビルドアウトプット
└── .clasp.json # claspのプロジェクト設定
.clasp.json追記
.clasp.json
{
+ "rootDir": "dist",
}
フロントエンドにもesbuildをつかいます
viteは何でも出来ます。しかし、今回の場合ではちょっとオーバースペックだと感じましたのでesbuildを使っております。
でももし「viteの方が楽でいいじゃん」と考えている読者がいましたら、@Ryo-Nakano さんの、
を参照してみるといいですよ。
コード
frontend/index.html
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
はろーー
</body>
<script src="app.ts"></script>
<!--↑のようにリンクを貼ります-->
</html>
こんな感じで書きます。
frontend/app.ts
app.ts
document.body.textContent = "わーーるど！"
とても人には見せられないような簡単なコードにしております。
scripts/build.js
ここ重要です
build.js
import GasPlugin from 'esbuild-plugin-gas-generator';
import { singleHtmlPlugin } from 'esbuild-single-html'
import esbuild from 'esbuild'
esbuild.build({
entryPoints: ["src/index.ts"],
bundle: true,
minify: true,
outfile: "dist/project.js",
format: "iife",
plugins: [GasPlugin({appsscript: "appsscript.json"})]
}).catch((e) => {
console.error(e)
process.exit(1)
})
esbuild.build({
entryPoints: ["frontend/index.html"],
bundle: true,
outfile: "dist/index.html",
plugins: [singleHtmlPlugin()] //これが肝
}).catch((e) => {
console.error(e)
process.exit(1)
})
singleHtmlPluginはこの記事に書いてあることをするためだけに私が作ったのでだいぶ簡単な作りになっています。リンクされたjavascriptとcssをインライン化します。npmパッケージとして公開しています。
src/index.ts
index.ts
export function doGet() {
return HtmlService.createHtmlOutputFromFile("index")
}
右側のhtmlファイルの指定はbuild.jsのoutfileに沿って書いてください。
デプロイ
claspのコマンドで一発です。
新規デプロイ
clasp deploy -d 初回デプロイ
バージョンアップ
clasp -i 初回デプロイ時に出てきたデプロイメントID -d 次回デプロイ
以上
ここまで読んでくださりありがとうございます。
再掲
私は高校が夏休みに入ってようやく次の記事が書けそうで…Qiitaを書く社会人はどのようにして記事を書いているのかすごい気になります…
もしこの記事が「わるくないねえ」とか思ってくださったらいいねください。
コメントなどつけてくださいましたら泣いて喜びます。