---
title: Go Conference mini in Sendai 2026 - 初めてのGoでWebアプリをつくってみた
tags: 
author: [Yui Suzuki](https://convert.docswell.com/user/yui-sua)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/L7LM9PW1JR.jpg?width=480
description: Go Conference mini in Sendai 2026 - 初めてのGoでWebアプリをつくってみた by Yui Suzuki
published: February 21, 26
canonical: https://convert.docswell.com/s/yui-sua/5RELME-2026-02-21-163949
---
# Page. 1

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

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


# Page. 2

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

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


# Page. 3

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

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


# Page. 4

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

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


# Page. 5

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

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


# Page. 6

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

TemplはGo版JSX
React (TypeScript)
Templ (Go)
interface PostItemProps {
post: {
id: number;
name: string;
message: string;
};
}
const PostItem = ({ post }: PostItemProps) =&gt; (
&lt;div className=&quot;post-card&quot;&gt;
&lt;span className=&quot;name&quot;&gt;{post.name}&lt;/span&gt;
&lt;p&gt;{post.message}&lt;/p&gt;
&lt;/div&gt;
);
// Goの構造体をそのまま引数に渡す
type Post struct {
ID
int
Name
string
Message string
}
templ PostItem(post Post) {
&lt;div class=&quot;post-card&quot;&gt;
&lt;span class=&quot;name&quot;&gt;{ post.Name }&lt;/span&gt;
&lt;p class=&quot;msg&quot;&gt;{ post.Message }&lt;/p&gt;
&lt;/div&gt;
}
VS
引数に Goの構造体をそのまま渡せる
ReactのComponent感覚でUIを切り出せる
エディタ補完が効く型安全なHTML


# Page. 7

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

HTMXによるJSゼロの実装
HTMX — 自動更新 + 投稿
Reactなら…
// 2秒ごとに自動更新
&lt;div id=&quot;posts&quot;
hx-get=&quot;/posts&quot;
hx-trigger=&quot;every 2s&quot;
hx-swap=&quot;innerHTML&quot;&gt;
// 投稿一覧がここに入る
&lt;/div&gt;
// 投稿フォーム
&lt;form hx-post=&quot;/posts&quot;
hx-target=&quot;#posts&quot;
hx-swap=&quot;afterbegin&quot;&gt;
&lt;input name=&quot;message&quot; /&gt;
&lt;button type=&quot;submit&quot;&gt;投稿&lt;/button&gt;
&lt;/form&gt;
const [posts, setPosts] = useState([]);
useEffect(() =&gt; {
const timer = setInterval(async () =&gt; {
const res = await fetch(&#039;/api/posts&#039;);
const data = await res.json();
setPosts(data);
}, 2000);
return () =&gt; clearInterval(timer);
}, []);
const handleSubmit = async (e) =&gt; {
e.preventDefault();
await fetch(&#039;/api/posts&#039;, {
method: &#039;POST&#039;,
body: new FormData(e.target)
});
};
属性を4つ書くだけで、useEffect＋状態管理が不要に！


# Page. 8

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

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


# Page. 9

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

開発環境：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の高速ビルドとバイナリ一発でポータビリティも◎


# Page. 10

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

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
( ダッシュボード等 )
適した用途


# Page. 11

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

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


