Svelte Go Todo

hiroaqii

TODO app built with Go (Chi + Huma) + Svelte 5 + Docker

TODO App - Chi + Huma + Svelte

Go言語のChi（HTTPルーター）とHuma（APIフレームワーク）によるバックエンドと、Svelte 5によるフロントエンドを組み合わせたTODOアプリケーション。

学習目的で作成しており、全てのファイルに詳細なコメントを記載しています。

技術スタック

レイヤー	技術	役割
フロントエンド	Svelte 5 + Vite+	TODOアプリのUI
バックエンド	Go + Chi v5 + Huma v2	REST API（OpenAPI自動生成）
リバースプロキシ	Caddy	静的ファイル配信 + APIプロキシ（Docker時）
コンテナ	Docker Compose	全サービスの一括管理

プロジェクト構成

svelte-go-todo/
├── docker-compose.yml           # Docker Compose 設定
├── backend/
│   ├── Dockerfile               # Go マルチステージビルド
│   ├── main.go                  # API 本体（CRUD + CORS）
│   ├── go.mod                   # Go モジュール定義
│   └── go.sum
└── frontend/
    ├── Dockerfile               # Node build → Caddy 配信
    ├── Caddyfile                # Caddy 設定（プロキシ含む）
    ├── package.json             # pnpm 依存関係
    ├── vite.config.js           # Vite+ 設定（開発プロキシ）
    ├── svelte.config.js         # Svelte 設定
    ├── index.html               # エントリーHTML
    └── src/
        ├── main.js              # Svelte マウント
        ├── App.svelte           # ルートコンポーネント
        └── lib/
            └── TodoApp.svelte   # TODO CRUD コンポーネント

起動方法

Docker で起動（推奨）

docker compose up --build

URL	内容
http://localhost:3000	Svelte UI
http://localhost:3000/api/todos	API
http://localhost:3000/docs	OpenAPI ドキュメント
http://localhost:3000/openapi.json	OpenAPI 仕様（JSON）

停止:

docker compose down

開発モードで起動（Docker 不要）

ターミナルを2つ使います。

ターミナル1 - バックエンド:

cd backend
go run main.go

ターミナル2 - フロントエンド:

cd frontend
vp install    # 初回のみ
vp dev

URL	内容
http://localhost:5173	Svelte UI（Vite+ dev server）
http://localhost:8888/api/todos	API（直接アクセス）
http://localhost:8888/docs	OpenAPI ドキュメント

開発モードでは Vite+ のプロキシが /api/* へのリクエストを自動的にバックエンド（:8888）に転送します。

API エンドポイント

メソッド	パス	説明	ステータス
GET	`/api/todos`	TODO 一覧取得	200
GET	`/api/todos?completed=true`	完了済みのみ取得	200
POST	`/api/todos`	TODO 作成	201
GET	`/api/todos/{id}`	TODO 個別取得	200
PUT	`/api/todos/{id}`	TODO 更新	200
DELETE	`/api/todos/{id}`	TODO 削除	204

API 使用例（curl）

# 一覧取得
curl http://localhost:3000/api/todos

# 作成
curl -X POST http://localhost:3000/api/todos \
  -H 'Content-Type: application/json' \
  -d '{"title":"買い物に行く"}'

# 更新（完了にする）
curl -X PUT http://localhost:3000/api/todos/1 \
  -H 'Content-Type: application/json' \
  -d '{"title":"買い物に行く","completed":true}'

# 削除
curl -X DELETE http://localhost:3000/api/todos/1

アーキテクチャ

                    Docker Compose
┌─────────────────────────────────────────────┐
│                                             │
│  ブラウザ → Caddy(:3000)                      │
│              ├→ /            → 静的ファイル   │
│              ├→ /api/*       → backend:8888  │
│              └→ /docs        → backend:8888  │
│                                             │
│            backend(:8888)                    │
│              Go + Chi + Huma                 │
│              └→ インメモリストア              │
│                                             │
└─────────────────────────────────────────────┘

必要な環境

Docker / Docker Compose（Docker 起動の場合）
Go 1.25+（開発モードの場合）
Node.js 22+, Vite+（開発モードの場合）

Top categories