導入 ✨
このプロジェクトは、Vanilla JS + Express + Prisma + PostgreSQL（Docker）で作るシンプルなTODOアプリです。もともとSQLiteだった保存先をPrismaを介してPostgreSQLへ置き換え、型安全なデータアクセスとマイグレーション運用を加えています。小さな構成でも「本番っぽい」土台（DBの分離・移行容易性・スキーマ管理）を体験できます。
- フロント: 素のHTML/CSS/JS。
fetchでREST APIを叩くだけの軽量構成 - サーバ: Express。CRUDを最小限で実装し、PrismaでDBアクセス
- DB: Docker上のPostgreSQL。
docker compose up -dで即利用可 - スキーマ管理: Prismaのマイグレーションで履歴化・自動適用
まずは動きを見てみよう 🎯
準備ができたら以下を実行します。
# DBを起動（Docker）
docker compose up -d
# 初回のみスキーマ適用
npm run prisma:migrate -- --name init
# サーバ起動
npm startブラウザで http://localhost:3000/ にアクセス。
「やること」を入力して「追加」、チェックで完了、削除ボタンで削除。下部のヒントが「保存先: PostgreSQL」になっていればOK。APIのヘルスは GET /healthz で確認できます。
次の動画のように動きます。
仕組みを理解する 🔧
全体の流れはとても単純です。
- ブラウザ: 入力/クリック操作 →
fetch('/api/todos', …)でサーバへ - Express: 受けたリクエストを各ハンドラにルーティング
GET /api/todos一覧POST /api/todos追加PUT /api/todos/:id完了フラグ更新DELETE /api/todos/:id削除- Prisma: ルート内で
prisma.todo.findMany/create/update/deleteを実行 - PostgreSQL: Dockerで常時起動。データはボリュームに永続化
ポイントは、UIは超軽量のまま、データの正確さ/移行容易性/運用性をPrismaとPostgreSQLに委ねていること。小規模でも「拡張しやすい構造」になっています。
コードを書いてみよう 💻
次のURL先にコードを置いています。
https://github.com/daiki3027/todo/tree/docker_postgresql_schema
実行してみよう 🖱️
- DB起動:
docker compose up -d（手元にPostgreSQLが常駐していればDocker不要） - スキーマ適用（初回）:
npm run prisma:migrate -- --name init - サーバ起動:
npm start→http://localhost:3000/ - 確認:
- 追加/完了/削除が反映されること
curl http://localhost:3000/healthzが{ "ok": true }を返すこと
コメント