Go Templ+HTMX+Tailwindフルスタック実践：フロントエンドフレームワークなしでモダンWebアプリを構築する5つのコアパターン

前端工程

2026年、フロントエンド疲労は頂点に達しています。React 19のServer Components、Next.js 15のApp Router、Vue 3.5のSuspense——すべてのフレームワークが複雑化の一途をたどっています。Goコミュニティは全く異なる答えを提示します：Templ + HTMX + Tailwind。Templは型安全なGoテンプレートでJSXを置き換え、HTMXはHTML属性でJavaScriptインタラクションを置き換え、TailwindはアトミックCSSでコンポーネントライブラリを置き換えます。この3つの組み合わせで、1行のJavaScriptも書かずに、インタラクティブで高性能なモダンWebアプリケーションを構築できます。本記事では5つのコアパターンを通じて、このフルスタック開発アプローチを習得します。

コア概念

概念 説明 主要パッケージ/ツール
Templコンポーネント 型安全なGoテンプレートエンジン、コンパイル時チェック github.com/a-h/templ
HTMXインタラクション HTML属性によるAJAXインタラクション、JS不要 htmx.org
Tailwind CSS アトミックCSSフレームワーク、ユーティリティファースト tailwindcss
サーバーサイドレンダリング Goサーバーが直接HTMLをレンダリング、SPA不要 net/http
部分更新 HTMXによるページ部分更新、フルリロード不要 hx-get/hx-post

問題分析：従来のフルスタック開発の5つのペインポイント

ペインポイント1：JavaScriptフレームワークの複雑さが制御不能

シンプルなCRUDアプリでも、React + TypeScript + Webpack + Babel + ESLintの設定ファイルが10以上あり、新人のオンボーディングコストが極めて高い。

ペインポイント2：フロントエンドとバックエンドの型不一致

バックエンドのGo structとフロントエンドのTypeScript interfaceを手動で同期する必要があり、API変更時の見落としがランタイムエラーを引き起こす。

ペインポイント3：SPAの初回描画が遅い

シングルページアプリケーションは大量のJavaScriptをロードしてからでないと初画面を描画できず、SEOに悪影響を与え、ユーザー体験が低下する。

ペインポイント4：状態管理が複雑

Redux、Pinia、Zustand——プロジェクトごとにどの状態管理ライブラリを使うか悩み、シンプルな機能が過剰設計される。

ペインポイント5：ビルドツールチェーンが脆弱

Webpack設定、Viteプラグイン、PostCSS処理——チェーンのどこか一つでも壊れるとビルドが失敗し、デバッグが困難。

コアパターン1：Templコンポーネント定義と型安全テンプレート

TemplはGo言語の型安全テンプレートエンジンです。コンパイル時にテンプレートの構文と型をチェックし、ランタイムのテンプレートエラーを完全に排除します。各TemplコンポーネントはGo関数であり、パラメータを受け取り、他のコンポーネントを呼び出し、複雑なページに組み合わせることができます。

// components/layout.templ
package components

// LayoutProps ページレイアウトプロパティ
type LayoutProps struct {
	Title       string
	Description string
}

// Layout ベースページレイアウトコンポーネント
templ Layout(props LayoutProps) {
	<!DOCTYPE html>
	<html lang="ja">
	<head>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<title>{ props.Title }</title>
		<meta name="description" content={ props.Description }/>
		<script src="https://unpkg.com/htmx.org@2.0.4"></script>
		<script src="https://unpkg.com/htmx.org/dist/ext/response-targets.js"></script>
		<link href="/assets/css/app.css" rel="stylesheet"/>
	</head>
	<body class="bg-gray-50 min-h-screen">
		<nav class="bg-white shadow-sm border-b border-gray-200">
			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
				<div class="flex justify-between h-16">
					<div class="flex items-center">
						<a href="/" class="text-xl font-bold text-indigo-600">ToolsKu</a>
					</div>
					<div class="flex items-center space-x-4">
						<a href="/tools" class="text-gray-600 hover:text-indigo-600">ツール</a>
						<a href="/blog" class="text-gray-600 hover:text-indigo-600">ブログ</a>
						<a href="/about" class="text-gray-600 hover:text-indigo-600">概要</a>
					</div>
				</div>
			</div>
		</nav>
		<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
			{ children... }
		</main>
		<footer class="bg-white border-t border-gray-200 mt-12">
			<div class="max-w-7xl mx-auto px-4 py-6 text-center text-gray-500 text-sm">
				© 2026 ToolsKu. All rights reserved.
			</div>
		</footer>
	</body>
	</html>
}

// PageProps ページプロパティ
type PageProps struct {
	Title       string
	Description string
	Content     templ.Component
}

// Page レイアウト付きページコンポーネント
templ Page(props PageProps) {
	@Layout(LayoutProps{
		Title:       props.Title,
		Description: props.Description,
	}) {
		{ props.Content }
	}
}

// components/user.templ
package components

import "time"

// User ユーザーデータモデル
type User struct {
	ID        string    `json:"id"`
	Name      string    `json:"name"`
	Email     string    `json:"email"`
	Role      string    `json:"role"`
	CreatedAt time.Time `json:"created_at"`
	AvatarURL string    `json:"avatar_url"`
}

// UserCard ユーザーカードコンポーネント
templ UserCard(user User) {
	<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
		<div class="flex items-center space-x-4">
			<img src={ user.AvatarURL } alt={ user.Name } class="w-12 h-12 rounded-full object-cover"/>
			<div class="flex-1 min-w-0">
				<h3 class="text-lg font-semibold text-gray-900 truncate">{ user.Name }</h3>
				<p class="text-sm text-gray-500 truncate">{ user.Email }</p>
			</div>
			<span class={ "px-2.5 py-0.5 rounded-full text-xs font-medium",
				templ.KV(user.Role == "admin", "bg-red-100 text-red-800", "bg-green-100 text-green-800") }>
				{ user.Role }
			</span>
		</div>
		<div class="mt-4 flex items-center justify-between">
			<span class="text-xs text-gray-400">
				参加日 { user.CreatedAt.Format("2006-01-02") }
			</span>
			<div class="flex space-x-2">
				<button hx-get={ "/users/" + user.ID + "/edit" } hx-target="#modal-container" hx-swap="innerHTML"
					class="text-sm text-indigo-600 hover:text-indigo-800">編集</button>
				<button hx-delete={ "/users/" + user.ID } hx-target="closest div" hx-swap="outerHTML swap:0.3s"
					hx-confirm="このユーザーを削除してよろしいですか？" class="text-sm text-red-600 hover:text-red-800">削除</button>
			</div>
		</div>
	</div>
}

// UserList ユーザーリストコンポーネント
templ UserList(users []User) {
	<div id="user-list" class="space-y-4">
		for _, user := range users {
			@UserCard(user)
		}
	</div>
}

// UserListPage ユーザーリストページ
templ UserListPage(users []User) {
	@Page(PageProps{
		Title:       "ユーザー管理 - ToolsKu",
		Description: "全ユーザーの管理",
		Content: userListContent(users),
	})
}

templ userListContent(users []User) {
	<div class="space-y-6">
		<div class="flex items-center justify-between">
			<h1 class="text-2xl font-bold text-gray-900">ユーザー管理</h1>
			<button hx-get="/users/new" hx-target="#modal-container" hx-swap="innerHTML"
				class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
				ユーザー追加
			</button>
		</div>

		<!-- 検索バー -->
		<div class="flex gap-4">
			<input type="text" name="q" placeholder="ユーザーを検索..."
				hx-get="/users/search" hx-trigger="input changed delay:300ms"
				hx-target="#user-list" hx-swap="innerHTML" hx-indicator="#search-spinner"
				class="flex-1 rounded-lg border border-gray-300 px-4 py-2 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"/>
			<div id="search-spinner" class="htmx-indicator">
				<svg class="animate-spin h-5 w-5 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
					<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
				</svg>
			</div>
		</div>

		@UserList(users)
	</div>
}

重要ポイント：

  • Templコンポーネントはコンパイル時にGoコードを生成、型エラーはコンパイル段階で検出
  • templ.KV()条件式がテンプレート内のif/elseを置き換え、テンプレートをシンプルに保つ
  • コンポーネントは@ComponentName()構文で組み合わせ、明確なコンポーネントツリーを形成
  • HTMX属性はHTML要素に直接記述、追加のJavaScript不要

コアパターン2：HTMX動的インタラクションと部分更新

HTMXはHTML属性（hx-get、hx-post、hx-swapなど）を通じてAJAXインタラクションを実現します。サーバーはHTMLフラグメントを返し、ページの部分コンテンツを置き換えます。このパターンにより、Goバックエンドがレンダリングロジックを完全に制御でき、フロントエンドにJavaScriptフレームワークは不要です。

// handlers/user_handler.go
package handlers

import (
	"net/http"

	"github.com/a-h/templ"
	"toolsku/components"
	"toolsku/repository"
)

// UserHandler ユーザー関連HTTPハンドラ
type UserHandler struct {
	userRepo *repository.UserRepository
}

// NewUserHandler UserHandlerを作成
func NewUserHandler(userRepo *repository.UserRepository) *UserHandler {
	return &UserHandler{userRepo: userRepo}
}

// List ユーザーリストページを表示（フルページ）
func (h *UserHandler) List(w http.ResponseWriter, r *http.Request) {
	users, err := h.userRepo.List(r.Context(), 20, 0)
	if err != nil {
		http.Error(w, err.Error(), http.StatusInternalServerError)
		return
	}

	if isHTMXRequest(r) {
		templ.Handler(components.UserList(users)).ServeHTTP(w, r)
		return
	}

	templ.Handler(components.UserListPage(users)).ServeHTTP(w, r)
}

// Search ユーザーを検索（HTMX部分更新）
func (h *UserHandler) Search(w http.ResponseWriter, r *http.Request) {
	query := r.URL.Query().Get("q")

	var users []components.User
	var err error

	if query != "" {
		users, err = h.userRepo.Search(r.Context(), query)
	} else {
		users, err = h.userRepo.List(r.Context(), 20, 0)
	}

	if err != nil {
		http.Error(w, err.Error(), http.StatusInternalServerError)
		return
	}

	templ.Handler(components.UserList(users)).ServeHTTP(w, r)
}

// Create ユーザーを作成（HTMXフォーム送信）
func (h *UserHandler) Create(w http.ResponseWriter, r *http.Request) {
	if err := r.ParseForm(); err != nil {
		http.Error(w, err.Error(), http.StatusBadRequest)
		return
	}

	user := components.User{
		Name:  r.FormValue("name"),
		Email: r.FormValue("email"),
		Role:  r.FormValue("role"),
	}

	created, err := h.userRepo.Create(r.Context(), user)
	if err != nil {
		templ.Handler(components.ErrorAlert("ユーザーの作成に失敗: " + err.Error())).ServeHTTP(w, r)
		return
	}

	w.Header().Set("HX-Trigger", `{"userCreated": {"id": "`+created.ID+`"}}`)
	templ.Handler(components.UserCard(*created)).ServeHTTP(w, r)
}

// Delete ユーザーを削除（HTMX削除）
func (h *UserHandler) Delete(w http.ResponseWriter, r *http.Request) {
	userID := r.PathValue("id")

	if err := h.userRepo.Delete(r.Context(), userID); err != nil {
		w.WriteHeader(http.StatusInternalServerError)
		return
	}

	w.WriteHeader(http.StatusOK)
}

// EditForm ユーザー編集フォーム（HTMXモーダル）
func (h *UserHandler) EditForm(w http.ResponseWriter, r *http.Request) {
	userID := r.PathValue("id")

	user, err := h.userRepo.Get(r.Context(), userID)
	if err != nil {
		http.Error(w, err.Error(), http.StatusNotFound)
		return
	}

	templ.Handler(components.UserEditModal(*user)).ServeHTTP(w, r)
}

// Update ユーザーを更新（HTMXフォーム送信）
func (h *UserHandler) Update(w http.ResponseWriter, r *http.Request) {
	userID := r.PathValue("id")

	if err := r.ParseForm(); err != nil {
		http.Error(w, err.Error(), http.StatusBadRequest)
		return
	}

	user, err := h.userRepo.Get(r.Context(), userID)
	if err != nil {
		http.Error(w, err.Error(), http.StatusNotFound)
		return
	}

	user.Name = r.FormValue("name")
	user.Email = r.FormValue("email")
	user.Role = r.FormValue("role")

	updated, err := h.userRepo.Update(r.Context(), *user)
	if err != nil {
		templ.Handler(components.ErrorAlert("ユーザーの更新に失敗: " + err.Error())).ServeHTTP(w, r)
		return
	}

	w.Header().Set("HX-Trigger", `{"userUpdated": {"id": "`+updated.ID+`"}}`)
	templ.Handler(components.UserCard(*updated)).ServeHTTP(w, r)
}

// isHTMXRequest HTMXリクエストかどうかを確認
func isHTMXRequest(r *http.Request) bool {
	return r.Header.Get("HX-Request") == "true"
}

重要ポイント：

  • isHTMXRequest()でフルページリクエストと部分更新リクエストを区別、同じHandlerで両方を処理
  • HTMXのhx-triggerイベントレスポンス（userCreated、userUpdated）でクロスコンポーネント通信を実現
  • hx-swap="outerHTML swap:0.3s"で削除アニメーション効果を作成
  • hx-indicatorでリクエスト読み込み状態を表示、ユーザー体験を向上

コアパターン3：Tailwind CSSアトミックスタイリング統合

Tailwind CSSとTemplの統合は非常に自然です——Templは純粋なHTMLを生成し、Tailwindは純粋なCSSクラス名を処理します。TailwindのJITコンパイラにより、使用されたスタイルのみがバンドルされ、最終的なCSSファイルは極めて小さくなります。

/* assets/css/app.css - Tailwindエントリーファイル */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* カスタムコンポーネントスタイル */
@layer components {
	.btn-primary {
		@apply bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700
		transition-colors font-medium;
	}

	.btn-secondary {
		@apply bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200
		transition-colors font-medium;
	}

	.btn-danger {
		@apply bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700
		transition-colors font-medium;
	}

	.input-field {
		@apply w-full rounded-lg border border-gray-300 px-3 py-2
		focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500
		placeholder-gray-400;
	}

	.card {
		@apply bg-white rounded-lg shadow-sm border border-gray-200 p-6
		hover:shadow-md transition-shadow;
	}
}

/* HTMXインジケータースタイル */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-request.htmx-indicator { display: inline-block; }

/* HTMXトランジションアニメーション */
.htmx-swapping { opacity: 0; transition: opacity 0.3s ease-out; }
.htmx-settling { opacity: 1; transition: opacity 0.3s ease-in; }

// components/shared.templ - 再利用可能なスタイルコンポーネント
package components

// BadgeProps バッジプロパティ
type BadgeProps struct {
	Text  string
	Color string
}

// Badge バッジコンポーネント
templ Badge(props BadgeProps) {
	<span class={ "px-2.5 py-0.5 rounded-full text-xs font-medium", badgeColorClass(props.Color) }>
		{ props.Text }
	</span>
}

func badgeColorClass(color string) string {
	colors := map[string]string{
		"red":    "bg-red-100 text-red-800",
		"green":  "bg-green-100 text-green-800",
		"blue":   "bg-blue-100 text-blue-800",
		"yellow": "bg-yellow-100 text-yellow-800",
		"gray":   "bg-gray-100 text-gray-800",
	}
	if c, ok := colors[color]; ok {
		return c
	}
	return colors["gray"]
}

// StatCard 統計カードコンポーネント
templ StatCard(title string, value string, change string, changeType string) {
	<div class="card">
		<div class="flex items-center justify-between">
			<p class="text-sm font-medium text-gray-500">{ title }</p>
			if change != "" {
				<span class={ "text-xs font-medium px-2 py-0.5 rounded-full",
					templ.KV(changeType == "positive", "bg-green-100 text-green-800",
						templ.KV(changeType == "negative", "bg-red-100 text-red-800",
							"bg-gray-100 text-gray-800")) }>
					{ change }
				</span>
			}
		</div>
		<p class="mt-2 text-3xl font-bold text-gray-900">{ value }</p>
	</div>
}

// Pagination ページネーションコンポーネント
templ Pagination(currentPage, totalPages int, baseURL string) {
	<div class="flex items-center justify-between mt-6">
		<p class="text-sm text-gray-500">
			{ currentPage } / { totalPages } ページ
		</p>
		<div class="flex space-x-2">
			if currentPage > 1 {
				<button hx-get={ baseURL + "?page=1" } hx-target="#content-area" hx-swap="innerHTML"
					class="btn-secondary text-sm">最初</button>
				<button hx-get={ fmt.Sprintf("%s?page=%d", baseURL, currentPage-1) } hx-target="#content-area" hx-swap="innerHTML"
					class="btn-secondary text-sm">前へ</button>
			}
			if currentPage < totalPages {
				<button hx-get={ fmt.Sprintf("%s?page=%d", baseURL, currentPage+1) } hx-target="#content-area" hx-swap="innerHTML"
					class="btn-primary text-sm">次へ</button>
			}
		</div>
	</div>
}

重要ポイント：

  • @layer componentsでよく使うスタイルの組み合わせをコンポーネントクラスとして抽出、重複を削減
  • HTMXインジケータースタイル（.htmx-indicator）で読み込み状態を正しく表示
  • Go関数（badgeColorClass）で動的スタイルロジックを処理、テンプレート条件より明確
  • templ.KV()のネストで多条件スタイル選択を実現

コアパターン4：フォーム処理とバリデーションフィードバック

フォームはWebアプリケーションのコアインタラクションです。Templ + HTMXの組み合わせにより、フォーム処理は極めてシンプルになります：サーバーサイドバリデーション、リアルタイムフィードバック、リフレッシュなし送信——すべてHTML属性とGoコードで実現します。

// components/form.templ
package components

// UserFormProps ユーザーフォームプロパティ
type UserFormProps struct {
	User      User
	Errors    map[string]string
	IsEditing bool
}

// UserForm ユーザー作成/編集フォーム
templ UserForm(props UserFormProps) {
	<form
		if props.IsEditing {
			hx-put={ "/users/" + props.User.ID }
		} else {
			hx-post="/users"
		}
		hx-target="#form-container"
		hx-swap="innerHTML"
		hx-indicator="#form-spinner"
		class="space-y-6"
	>
		<!-- 名前フィールド -->
		<div>
			<label for="name" class="block text-sm font-medium text-gray-700 mb-1">
				名前 <span class="text-red-500">*</span>
			</label>
			<input type="text" id="name" name="name" value={ props.User.Name } required
				hx-post="/users/validate" hx-trigger="change" hx-target="#name-error" hx-swap="innerHTML"
				class={ "input-field", templ.KV(hasError(props.Errors, "name"), "border-red-500 focus:border-red-500 focus:ring-red-500") }/>
			if err, ok := props.Errors["name"]; ok {
				<p id="name-error" class="mt-1 text-sm text-red-600">{ err }</p>
			} else {
				<p id="name-error" class="mt-1 text-sm text-red-600"></p>
			}
		</div>

		<!-- メールフィールド -->
		<div>
			<label for="email" class="block text-sm font-medium text-gray-700 mb-1">
				メール <span class="text-red-500">*</span>
			</label>
			<input type="email" id="email" name="email" value={ props.User.Email } required
				hx-post="/users/validate" hx-trigger="change" hx-target="#email-error" hx-swap="innerHTML"
				class={ "input-field", templ.KV(hasError(props.Errors, "email"), "border-red-500 focus:border-red-500 focus:ring-red-500") }/>
			if err, ok := props.Errors["email"]; ok {
				<p id="email-error" class="mt-1 text-sm text-red-600">{ err }</p>
			} else {
				<p id="email-error" class="mt-1 text-sm text-red-600"></p>
			}
		</div>

		<!-- 送信ボタン -->
		<div class="flex items-center space-x-3">
			<button type="submit" class="btn-primary flex items-center space-x-2">
				<span if={ props.IsEditing }>ユーザーを更新</span>
				<span if={ !props.IsEditing }>ユーザーを作成</span>
				<div id="form-spinner" class="htmx-indicator">
					<svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
						<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
					</svg>
				</div>
			</button>
			<a href="/users" class="btn-secondary inline-block">キャンセル</a>
		</div>
	</form>
}

func hasError(errors map[string]string, field string) bool {
	_, ok := errors[field]
	return ok
}

// handlers/validation_handler.go
package handlers

import (
	"net/http"
	"net/mail"
	"strings"

	"github.com/a-h/templ"
	"toolsku/components"
)

// Validator フォームバリデーター
type Validator struct {
	Errors map[string]string
}

func NewValidator() *Validator {
	return &Validator{Errors: make(map[string]string)}
}

func (v *Validator) ValidateField(field, value string, rules ...func(string) string) {
	for _, rule := range rules {
		if msg := rule(value); msg != "" {
			v.Errors[field] = msg
			return
		}
	}
}

func Required(field string) func(string) string {
	return func(value string) string {
		if strings.TrimSpace(value) == "" {
			return field + "は必須です"
		}
		return ""
	}
}

func EmailFormat() func(string) string {
	return func(value string) string {
		if _, err := mail.ParseAddress(value); err != nil {
			return "メール形式が正しくありません"
		}
		return ""
	}
}

func MinLength(min int) func(string) string {
	return func(value string) string {
		if len(value) < min {
			return fmt.Sprintf("%d文字以上で入力してください", min)
		}
		return ""
	}
}

// ValidateField リアルタイムフィールドバリデーション（HTMX）
func (h *UserHandler) ValidateField(w http.ResponseWriter, r *http.Request) {
	if err := r.ParseForm(); err != nil {
		return
	}

	validator := NewValidator()

	if name := r.FormValue("name"); name != "" {
		validator.ValidateField("name", name, Required("名前"), MinLength(2))
	}

	if email := r.FormValue("email"); email != "" {
		validator.ValidateField("email", email, Required("メール"), EmailFormat())
	}

	for field, msg := range validator.Errors {
		templ.Handler(components.FieldError(field, msg)).ServeHTTP(w, r)
		return
	}

	w.WriteHeader(http.StatusOK)
}

重要ポイント：

  • hx-trigger="change"でフィールドレベルのリアルタイムバリデーションを実現、フォーム送信を待つ必要なし
  • バリデーターパターン（Required、EmailFormat、MinLength）は組み合わせて再利用可能
  • エラーメッセージはHTMX部分更新で対応フィールドの下に表示
  • templ.KV()でエラー状態に応じて入力ボックスのボーダー色を動的に切り替え

コアパターン5：フルスタックCRUDアプリケーションの完全実装

前の4つのパターンを完全なCRUDアプリケーションに統合し、ルート登録、ミドルウェア、データベース操作、エラー処理などのプロダクション級要素を含みます。

// main.go - 完全なアプリケーションエントリーポイント
package main

import (
	"context"
	"database/sql"
	"log"
	"net/http"
	"os"
	"os/signal"
	"syscall"
	"time"

	_ "github.com/lib/pq"
	"toolsku/handlers"
	"toolsku/repository"
)

func main() {
	db, err := sql.Open("postgres", os.Getenv("DATABASE_URL"))
	if err != nil {
		log.Fatalf("connect database: %v", err)
	}
	defer db.Close()

	if err := db.Ping(); err != nil {
		log.Fatalf("ping database: %v", err)
	}

	userRepo := repository.NewUserRepository(db)
	userHandler := handlers.NewUserHandler(userRepo)

	mux := http.NewServeMux()

	mux.Handle("/assets/", http.StripPrefix("/assets/", http.FileServer(http.Dir("assets"))))

	mux.HandleFunc("GET /users", userHandler.List)
	mux.HandleFunc("GET /users/search", userHandler.Search)
	mux.HandleFunc("GET /users/new", userHandler.NewForm)
	mux.HandleFunc("POST /users", userHandler.Create)
	mux.HandleFunc("GET /users/{id}/edit", userHandler.EditForm)
	mux.HandleFunc("PUT /users/{id}", userHandler.Update)
	mux.HandleFunc("DELETE /users/{id}", userHandler.Delete)
	mux.HandleFunc("POST /users/validate", userHandler.ValidateField)

	mux.HandleFunc("GET /", func(w http.ResponseWriter, r *http.Request) {
		http.Redirect(w, r, "/users", http.StatusFound)
	})

	var handler http.Handler = mux
	handler = middlewareLogging(handler)
	handler = middlewareRecovery(handler)
	handler = middlewareCORS(handler)

	server := &http.Server{
		Addr:         ":8080",
		Handler:      handler,
		ReadTimeout:  10 * time.Second,
		WriteTimeout: 30 * time.Second,
		IdleTimeout:  60 * time.Second,
	}

	go func() {
		sigCh := make(chan os.Signal, 1)
		signal.Notify(sigCh, syscall.SIGINT, syscall.SIGTERM)
		<-sigCh

		ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
		defer cancel()

		log.Println("shutting down server...")
		server.Shutdown(ctx)
	}()

	log.Printf("server starting on %s", server.Addr)
	if err := server.ListenAndServe(); err != http.ErrServerClosed {
		log.Fatalf("server error: %v", err)
	}
}

func middlewareLogging(next http.Handler) http.Handler {
	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
		start := time.Now()
		next.ServeHTTP(w, r)
		log.Printf("%s %s %s %v", r.Method, r.URL.Path, r.RemoteAddr, time.Since(start))
	})
}

func middlewareRecovery(next http.Handler) http.Handler {
	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
		defer func() {
			if err := recover(); err != nil {
				log.Printf("panic recovered: %v", err)
				http.Error(w, "Internal Server Error", http.StatusInternalServerError)
			}
		}()
		next.ServeHTTP(w, r)
	})
}

func middlewareCORS(next http.Handler) http.Handler {
	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
		w.Header().Set("Access-Control-Allow-Origin", "*")
		w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")
		w.Header().Set("Access-Control-Allow-Headers", "Content-Type, HX-Request, HX-Target, HX-Trigger")
		if r.Method == http.MethodOptions {
			w.WriteHeader(http.StatusOK)
			return
		}
		next.ServeHTTP(w, r)
	})
}

// repository/user_repository.go - データベース操作層
package repository

import (
	"context"
	"database/sql"
	"fmt"
	"strings"

	"toolsku/components"
)

type UserRepository struct {
	db *sql.DB
}

func NewUserRepository(db *sql.DB) *UserRepository {
	return &UserRepository{db: db}
}

func (r *UserRepository) List(ctx context.Context, limit, offset int) ([]components.User, error) {
	rows, err := r.db.QueryContext(ctx,
		`SELECT id, name, email, role, created_at, avatar_url
		 FROM users ORDER BY created_at DESC LIMIT $1 OFFSET $2`, limit, offset)
	if err != nil {
		return nil, fmt.Errorf("query users: %w", err)
	}
	defer rows.Close()

	var users []components.User
	for rows.Next() {
		var u components.User
		if err := rows.Scan(&u.ID, &u.Name, &u.Email, &u.Role, &u.CreatedAt, &u.AvatarURL); err != nil {
			return nil, fmt.Errorf("scan user: %w", err)
		}
		users = append(users, u)
	}
	return users, rows.Err()
}

func (r *UserRepository) Search(ctx context.Context, query string) ([]components.User, error) {
	pattern := "%" + strings.ToLower(query) + "%"
	rows, err := r.db.QueryContext(ctx,
		`SELECT id, name, email, role, created_at, avatar_url
		 FROM users WHERE LOWER(name) LIKE $1 OR LOWER(email) LIKE $2
		 ORDER BY created_at DESC LIMIT 20`, pattern, pattern)
	if err != nil {
		return nil, fmt.Errorf("search users: %w", err)
	}
	defer rows.Close()

	var users []components.User
	for rows.Next() {
		var u components.User
		if err := rows.Scan(&u.ID, &u.Name, &u.Email, &u.Role, &u.CreatedAt, &u.AvatarURL); err != nil {
			return nil, fmt.Errorf("scan user: %w", err)
		}
		users = append(users, u)
	}
	return users, rows.Err()
}

func (r *UserRepository) Get(ctx context.Context, id string) (*components.User, error) {
	var u components.User
	err := r.db.QueryRowContext(ctx,
		`SELECT id, name, email, role, created_at, avatar_url FROM users WHERE id = $1`, id).
		Scan(&u.ID, &u.Name, &u.Email, &u.Role, &u.CreatedAt, &u.AvatarURL)
	if err == sql.ErrNoRows {
		return nil, fmt.Errorf("user not found: %s", id)
	}
	if err != nil {
		return nil, fmt.Errorf("get user: %w", err)
	}
	return &u, nil
}

func (r *UserRepository) Create(ctx context.Context, user components.User) (*components.User, error) {
	var created components.User
	err := r.db.QueryRowContext(ctx,
		`INSERT INTO users (name, email, role, avatar_url) VALUES ($1, $2, $3, $4)
		 RETURNING id, name, email, role, created_at, avatar_url`,
		user.Name, user.Email, user.Role, user.AvatarURL).
		Scan(&created.ID, &created.Name, &created.Email, &created.Role, &created.CreatedAt, &created.AvatarURL)
	if err != nil {
		return nil, fmt.Errorf("create user: %w", err)
	}
	return &created, nil
}

func (r *UserRepository) Update(ctx context.Context, user components.User) (*components.User, error) {
	var updated components.User
	err := r.db.QueryRowContext(ctx,
		`UPDATE users SET name = $1, email = $2, role = $3 WHERE id = $4
		 RETURNING id, name, email, role, created_at, avatar_url`,
		user.Name, user.Email, user.Role, user.ID).
		Scan(&updated.ID, &updated.Name, &updated.Email, &updated.Role, &updated.CreatedAt, &updated.AvatarURL)
	if err != nil {
		return nil, fmt.Errorf("update user: %w", err)
	}
	return &updated, nil
}

func (r *UserRepository) Delete(ctx context.Context, id string) error {
	result, err := r.db.ExecContext(ctx, `DELETE FROM users WHERE id = $1`, id)
	if err != nil {
		return fmt.Errorf("delete user: %w", err)
	}
	if n, _ := result.RowsAffected(); n == 0 {
		return fmt.Errorf("user not found: %s", id)
	}
	return nil
}

重要ポイント：

  • Go 1.22の強化ルートパターン（GET /users/{id}）がサードパーティルーターライブラリを代替
  • ミドルウェアチェーンがロギング、パニックリカバリ、CORSなどの横断的関心事を処理
  • Repositoryパターンがデータベース操作をカプセル化、HandlerはHTTPロジックにのみ注力
  • HTMXリクエストと通常リクエストは同じHandlerを共有、isHTMXRequest()でレスポンスを区別

よくある落とし穴

落とし穴1：Templコンポーネントでユーザー入力のエスケープを忘れる

// ❌ 間違い：ユーザー入力を直接出力、XSSリスク
templ UnsafeOutput(content string) {
	<div>{ content }</div>
}

// ✅ 正しい：Templはデフォルトですべての文字列をHTMLエスケープ、追加処理不要
templ SafeOutput(content string) {
	<div>{ content }</div>  // Templが自動エスケープ
}

// 生のHTML出力が必要な場合はtempl.Rawを使用
templ RawHTML(html string) {
	<div>{ templ.Raw(html) }</div>  // 信頼できるコンテンツのみで使用
}

落とし穴2：HTMXリクエストでフルページを返す

// ❌ 間違い：HTMXリクエストもフルページを返す、帯域幅の無駄
func (h *UserHandler) List(w http.ResponseWriter, r *http.Request) {
	users, _ := h.userRepo.List(r.Context(), 20, 0)
	templ.Handler(components.UserListPage(users)).ServeHTTP(w, r)
}

// ✅ 正しい：HTMXリクエストと通常リクエストを区別
func (h *UserHandler) List(w http.ResponseWriter, r *http.Request) {
	users, _ := h.userRepo.List(r.Context(), 20, 0)
	if isHTMXRequest(r) {
		templ.Handler(components.UserList(users)).ServeHTTP(w, r)
		return
	}
	templ.Handler(components.UserListPage(users)).ServeHTTP(w, r)
}

落とし穴3：Tailwindクラス名の連結でJIT検出が壊れる

// ❌ 間違い：Tailwindクラス名を動的に連結、JITが検出できない
templ DynamicClass(color string) {
	<div class={ "bg-" + color + "-500 text-white" }>コンテンツ</div>
}

// ✅ 正しい：完全なクラス名を使用し、JITが検出できるようにする
templ CorrectClass(color string) {
	<div class={ badgeColorClass(color) }>コンテンツ</div>
}

func badgeColorClass(color string) string {
	switch color {
	case "red":
		return "bg-red-500 text-white"
	case "green":
		return "bg-green-500 text-white"
	default:
		return "bg-gray-500 text-white"
	}
}

落とし穴4：HTMXイベントが正しくトリガーされない

// ❌ 間違い：HX-Triggerヘッダーのフォーマットが不正
w.Header().Set("HX-Trigger", "userCreated")

// ✅ 正しい：JSON形式でイベントデータを渡す
w.Header().Set("HX-Trigger", `{"userCreated": {"id": "123"}}`)

落とし穴5：Templ生成コードがビルドプロセスに含まれていない

# ❌ 間違い：templ generateの実行を忘れ、Goコンパイルが失敗
go build -o app .

# ✅ 正しい：Templコードを生成してからコンパイル
templ generate && go build -o app .

エラートラブルシューティング

エラー現象 可能な原因 トラブルシューティング方法 解決策
Templコンパイル失敗 構文エラーまたは型不一致 templ generateの出力を確認 テンプレート構文と型を修正
HTMXリクエストが無応答 hx-targetが正しく設定されていない ブラウザのネットワークリクエストを確認 ターゲット要素IDの存在を確認
Tailwindスタイルが欠落 JITがクラス名をスキャンしていない content設定を確認 templファイルがスキャンパスにあることを確認
フォーム送信404 ルートが未登録 mux登録パスを確認 HTTPメソッドの一致を確認
モーダルが閉じない クローズロジックが欠落 HTMXレスポンスヘッダーを確認 HX-Triggerクローズイベントを追加
検索遅延が顕著 デバウンスが未設定 hx-trigger設定を確認 delay:300msを追加
削除アニメーションが動作しない hx-swap設定エラー swapパラメータを確認 outerHTML swap:0.3sを使用
CSSファイルが大きすぎる minifyが未有効 ビルドコマンドを確認 --minifyフラグを追加
ページがちらつく HTMXロード時にコンテンツがジャンプ indicatorスタイルを確認 htmx-indicatorを追加
バリデーションがトリガーされない hx-trigger設定エラー triggerイベント名を確認 changeまたはinputを使用

高度な最適化

1. Templコードホットリロード

airまたはcosmtrek/airでGoコードのホットリロードを実現し、templ generate --watchと組み合わせてテンプレートのホットアップデートを実現。開発体験はフロントエンドのHMRに匹敵。

2. HTMX拡張統合

HTMX拡張（response-targets、loading-states、path-params）を活用してインタラクション能力を強化し、無限スクロールやドラッグ＆ドロップソートなど、より複雑なUIパターンを実現。

3. コンポーネントキャッシュとストリーミング

静的コンポーネントにtempl.Handlerでレンダリング結果をキャッシュし、長いリストにtempl.HandlerでHTMLフラグメントをストリーミング出力して初回描画速度を向上。

4. プログレッシブエンハンスメント戦略

HTMXインタラクションにnoscriptフォールバックを追加し、JavaScriptが無効でもアプリが正常に動作することを確保。フォームには標準のaction属性を使用し、HTMXで上書き強化。

5. ビルド最適化とデプロイ

esbuildで少量のクライアントサイドJavaScript（Alpine.jsなど）をバンドルし、Goを単一バイナリにコンパイルし、Dockerマルチステージビルドでイメージサイズを最小化。

比較

次元 Templ+HTMX+Tailwind React+Next.js Vue+Nuxt
言語統一性 ✅ フルスタックGo ❌ Go+TypeScript ❌ Go+TypeScript
型安全性 ✅ コンパイル時チェック ✅ TypeScript ✅ TypeScript
初回描画パフォーマンス ✅ サーバーサイドレンダリング ⚠️ SSR最適化が必要 ⚠️ SSR最適化が必要
インタラクション複雑さ ⚠️ 中程度 ✅ 複雑なインタラクション ✅ 複雑なインタラクション
ビルド複雑さ ✅ 極小 ❌ 複雑 ❌ 複雑
学習曲線 ✅ 低い ❌ 高い ⚠️ 中程度
SEOフレンドリー ✅ サーバーサイドレンダリング ✅ SSRサポート ✅ SSRサポート
バンドルサイズ ✅ 極小 ❌ 大きい ⚠️ 中程度
エコシステムの豊富さ ⚠️ 成長中 ✅ 非常に豊富 ✅ 豊富

まとめ

Templ + HTMX + TailwindはReactやVueを置き換えるものではなく、複雑なフロントエンドインタラクションを必要としないアプリケーションによりシンプルな選択肢を提供するものです。アプリが主にCRUDで、インタラクションがフォームとリストが中心で、チームが主にGo開発者で構成されている場合、このスタックは最小限のコード、最小限の依存関係、最小限のビルドステップで高性能なモダンWebアプリケーションを構築できます。少ないほど豊か——これはデザイン哲学であり、エンジニアリング哲学でもあります。

オンラインツールおすすめ

  • JSONフォーマッター — APIレスポンスJSONをフォーマットし、Templコンポーネントデータを素早く検証
  • cURL to Code — cURLコマンドをGo HTTPコードに変換し、HTMXエンドポイントを素早くテスト
  • ハッシュ計算 — ユーザーIDのハッシュ値を計算、アバターURL生成とデータマスキングに使用

ブラウザローカルツールを無料で試す →

#Go Templ#HTMX#Tailwind CSS#全栈开发#2026#前端工程