---
title: GoTHを使っている話
tags:  #go #golang #templ #htmx  
author: [佐伯](https://image.docswell.com/user/h-saeki)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/K74WYQLQE1.jpg?width=480
description: kamakura.go #10でLTしたスライドです（2026/10/09）。 https://kamakurago.connpass.com/event/403927/
published: October 10, 26
canonical: https://image.docswell.com/s/h-saeki/5L36MP-2026-10-10-113709
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/K74WYQLQE1.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/LJ1Y6PLLEG.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/GJWGW2VQ72.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/4EZL5D4373.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/Y76W913Z7V.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/G75MN4L974.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/9J295VL5ER.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/DEY4K3Q6JM.jpg)

お試しで在庫管理アプリを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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/VJNYRV2178.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/YE9PM61YJ3.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/GE8DLZ4KED.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/LELMLD6P7R.jpg)

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