GoTHを使っている話

GoTHを使っている話 kamakura.go 2026/10/09 佐伯 壽史

はじめまして！ 技術書典でこんなの出してる人です 2

Webアプリ、 何のフレームワークで作っていますか？

今日紹介する GoTH＝Go・templ・htmx Go：バックエンド。いつものやつ templ：GoのコードとしてHTMLを書く。型が付く htmx：HTMLに属性を足すと、その場で差し替わる JSON APIサーバーではなく、HTML APIサーバーとして動かせる 4

小さく、シンプルで速く、柔軟に Express → Hono Angular → React → Vue.js → Svelte Vue.js → Alpine.js → @wcstack/state 別の流れもある Astro：SSGから発展、アイランドアーキテクチャ htmx：HTML属性を拡張。脱JS依存 5

頭文字3つで名乗るやつ 既存のフレームワーク/ライブラリを組み合わせたもの AHAスタック＝Astro / htmx / Alpine.js BADスタック＝Bootstrap / Alpine.js / Dexie.js https://zenn.dev/tkithrta/articles/3bee42966e946e 6

• https://zenn.dev/tkithrta/articles/3bee42966e946e

じゃあ、バックエンドがGoだったら？ フロントエンドはBFF(Backend for Frontend)を立てるしかない？

お試しで在庫管理アプリをGoTHで書いた 画面：templ github.com/a-h/templ go tool templ generate でGoのコードに変換 Tailwindも併用できる github.com/tailwindlabs/tailwindcss 差し替え：htmx github.com/bigskysoftware/htmx HTML断片をバックエンドAPIとやり取りできる JSONをやり取りすることもできるが…… E2E：go-rod github.com/go-rod/rod GoからヘッドレスChromiumを動かす 8

• https://github.com/a-h/templ
• https://github.com/tailwindlabs/tailwindcss
• https://github.com/bigskysoftware/htmx
• https://github.com/go-rod/rod

HTML断片のテンプレをGoっぽく書ける
templ ItemRows(items []domain.Item) {
for _, it := range items {
<tr id={ rowID(it.ID) }>
<td>{ it.Code }</td>
<td>{ it.Name }</td>
if it.LotManaged {
<span>ロット管理</span>
}
</tr>
}
}

for と if でそのまま並ぶ。埋め込む値には型が付く
html/template とは違う書き心地/読み心地

9

HTML属性だけでやり取りできる
<form hx-post="/items"
hx-target="#items-body" hx-swap="innerHTML">
<button hx-delete={ "/items/" + idStr(it.ID) }
hx-target="#items-body"
hx-confirm="この品目を削除しますか？">

対象となるHTML要素を指定するだけ（fetchもJSONも書かな
い）
古のFORM的な書き心地/読み心地
10

E2EもGoで書ける
func TestItemCRUD(t *testing.T) {
page := newPage(t, "/items")
page.clickText("新規追加")
page.fillInput(`input[name="code"]`, code)
page.clickSubmit()
page.assertTextContains("#items-body", code)
}

go build -cover したバイナリを起動するので、カバレッジも取れる

go test だけ。Node.js/Deno/Bunは不要
11

Gopherなら一度GoTHを使ってみよう！ ご清聴ありがとうございました！