Go Conference mini in Sendai 2026 - 初めてのGoでWebアプリをつくってみた

初めてのGoでWebアプリをつくってみた 初めてのGOでGTH Stack（Go + Templ + HTMX）に挑んでみた Go Templ Go Conference mini in Sendai | LT 5min HTMX Tailwind CSS

自己紹介 すずき ゆい 開発歴 2年半くらい FE・BEどちらもやります 最近はネットワークとセキュリティにも 興味があります

背景 普段の使用技術 今回のモチベーション React / TypeScript ・ Goを使ってみたい PHP/Laravel, Svelte, Hono, Python ・ でも画面も作りたい！ C++, C#, Arduino ・ Goだけで簡単に画面もつくれないか？ → GTH Stackを試してみた

GTH Stack とは？ G Go 型安全な静的型付け言語 高速ビルド・バイナリ一発 T Templ Goで書く型安全なHTMLテンプレー ト JSXライクな書き心地 H HTMX HTML属性だけでAjax・部分更新 JSをほぼ書かなくてOK 「JSをほとんど書かずにSPAのような体験を作れる」

【デモ】作ったもの：BBS（掲示板） 投稿機能 フォーム送信でリアルタイム追加 2秒ごと自動更新 hx-trigger="every 2s" のみ Tailwind CSS スタイルをサクッと整形 Makefile make run で一発起動

TemplはGo版JSX
React (TypeScript)

Templ (Go)

interface PostItemProps {

post: {

id: number;

name: string;

message: string;

};

}

const PostItem = ({ post }: PostItemProps) => (

<div className="post-card">

<span className="name">{post.name}</span>

<p>{post.message}</p>

</div>

);


// Goの構造体をそのまま引数に渡す

type Post struct {

ID
int

Name
string

Message string

}

templ PostItem(post Post) {

<div class="post-card">

<span class="name">{ post.Name }</span>

<p class="msg">{ post.Message }</p>

</div>

}

VS

引数に Goの構造体をそのまま渡せる

ReactのComponent感覚でUIを切り出せる

エディタ補完が効く型安全なHTML

HTMXによるJSゼロの実装
HTMX — 自動更新 + 投稿

Reactなら…

// 2秒ごとに自動更新

<div id="posts"

hx-get="/posts"

hx-trigger="every 2s"

hx-swap="innerHTML">

// 投稿一覧がここに入る

</div>

// 投稿フォーム

<form hx-post="/posts"

hx-target="#posts"

hx-swap="afterbegin">

<input name="message" />

<button type="submit">投稿</button>

</form>

const [posts, setPosts] = useState([]);

useEffect(() => {

const timer = setInterval(async () => {

const res = await fetch('/api/posts');

const data = await res.json();

setPosts(data);

}, 2000);

return () => clearInterval(timer);

}, []);

const handleSubmit = async (e) => {

e.preventDefault();

await fetch('/api/posts', {

method: 'POST',

body: new FormData(e.target)

});

};

属性を4つ書くだけで、useEffect＋状態管理が不要に！

サーバーサイドのシンプルさ // 投稿を保存してコンポーネント単位でHTMLを返す func handleNewPost(w http.ResponseWriter, r *http.Request) { r.ParseForm() newPost := Post{ nextID(), ID: Name: r.FormValue("name"), Message: r.FormValue("message"), } db.Save(newPost) // ページ全体ではなく「コンポーネント」だけHTMLで返す PostItem(newPost).Render(r.Context(), w) } コンポーネント単位のレスポンス ページ全体ではなくHTMLの断片を返す → HTMXが差し込んでくれる APIとUIが一体化 エンドポイントがそのままフロントのパー ツに → JSONの変換不要 Goの型安全性がそのまま活きる 構造体の変更は即コンパイルエラー → テンプレートの型ミスもゼロ

開発環境：Makefileで一発起動 ワークフロー # Makefile setup: go install github.com/a-h/templ/cmd/templ@latest go mod tidy generate: templ generate # .templ → .go に変換 run: generate go run ./cmd/server/main.go # サーバー起動 1. .templ ファイルを編集 ↓ 2. templ generate ↓ 3. .go ファイルに変換 ↓ 4. go run でサーバー起動 $ make run と入力するだけ Goの高速ビルドとバイナリ一発でポータビリティも◎

GTH Stack vs React — 比較 項目 GTH Stack React (+ Next.js ) アーキテクチャ Server-Side Rendering (SSR) 中心 状態管理 サーバーサイドで保持 通信 HTMLの断片をやり取りする 学習コスト 低い (Go と HTMLの知識で使用可能) デプロイ形式 シングルバイナリ 管理画面・ブログ SEO重視のサイト Client-Side Rendering (CSR) 中心 クライアントサイドで保持 ( useState, Redux等 ) JSONデータをやり取りする 高い ( Hooks、ビルド設定等 ) 静的ファイル + Node.jsサーバー等 複雑な対話性が必要なSPA ( ダッシュボード等 ) 適した用途

まとめ Goはバックエンド専用ではない Templは型安全なGo版JSX HTMXでJSを減らせる GTH Stackは簡単なWebアプリケーションを開発するのに最適 Goを使った簡単なアプリケーション開発を、ぜひ体験してみてください！