🎮 DB-UI Playground：日本語サンプルデータで試すモダンDB管理ツール

📖 はじめに
1. 🎯 この記事で分かること
2. 🔧 対象読者
🚀 3分でセットアップ
✨ db-uiの特徴
📊 日本語サンプルデータの内容
🎯 実際にできること
💡 Chat機能について
🛠️ カスタマイズ方法
1. ポート番号の変更
2. 独自データの追加
📝 トラブルシューティング
1. よくある問題と解決方法
🔄 管理操作コマンド
🎉 まとめ

📖 はじめに

データベース管理ツールといえば、phpMyAdminやpgAdminが定番ですが、設定が複雑だったり、UIが古めかしかったりと、現代の開発者には少し使いづらい面があります。

そこで今回は、Next.js + TypeScript + shadcn/ui で構築された、モダンでユーザーフレンドリーなDB管理ツール「db-ui」を紹介します。さらに、日本語のサンプルデータを含むPostgreSQLデータベースと組み合わせることで、3分でセットアップして即座に体験できる環境を作成しました。

シンプルかつ見やすいセルフホストできるデータベースUI「db-ui」がめっちゃ良かった！！！！ https://t.co/eaTJhDxGoh pic.twitter.com/qIXb7CNxTZ

— Maki@Sunwood AI Labs. (@hAru_mAki_ch) July 12, 2025

🎯 この記事で分かること

db-uiの特徴と従来ツールとの違い
Docker Composeを使った簡単セットアップ方法
日本語サンプルデータの内容と活用方法
実際の操作例とできること

🔧 対象読者

データベース管理ツールを探している開発者
モダンなUIでDBを操作したい方
PostgreSQLを学習中の方
チーム開発でDB管理環境を統一したい方

🚀 3分でセットアップ

前提条件

Docker & Docker Compose がインストール済み
ポート3000, 5432が空いている

セットアップ手順

# リポジトリをクローン
git clone https://github.com/Sunwood-ai-labs/db-ui-playground.git
cd db-ui-playground

# 環境を起動（バックグラウンド）
docker-compose up -d

# 起動確認
docker-compose ps

アクセス: http://localhost:3000

接続情報

項目	値
DB-UI URL	http://localhost:3000
PostgreSQL ホスト	localhost
ポート	5432
データベース名	sampledb
ユーザー名	dbuser
パスワード	dbpassword

✨ db-uiの特徴

🎨 モダンなUI/UX

直感的なインターフェース: shadcn/uiベースの洗練されたデザイン
レスポンシブデザイン: デスクトップ・タブレット対応
ダークモード対応: 目に優しい表示切り替え

📊 豊富な機能

テーブルブラウザ: データの表示・編集・削除が簡単
高度なフィルタリング: 複数条件での絞り込み
ソート機能: カラムクリックで即座にソート
ページネーション: 大量データも快適に表示

💻 開発者フレンドリー

SQLエディタ: シンタックスハイライト付き
クエリ履歴: 過去のクエリを再実行可能
CSV エクスポート: データ分析ツールとの連携
スキーマ可視化: テーブル構造の把握が容易

📊 日本語サンプルデータの内容

データベース構造

&#x1f4c2; sampledb
├── &#x1f465; users (ユーザー情報)
├── &#x1f4e6; categories (商品カテゴリ)
├── &#x1f6cd;&#xfe0f; products (商品情報)
├── &#x1f6d2; orders (注文情報)
└── &#x1f4c4; order_items (注文詳細)

含まれるサンプルデータ

👥 ユーザー (5名)

山田太郎 (yamada_taro@example.com)
鈴木花子 (suzuki_hanako@example.com)
田中一郎 (tanaka_ichiro@example.com)
渡辺雪 (watanabe_yuki@example.com)
佐藤寛 (sato_hiroshi@example.com)

📦 カテゴリ (5種類)

電子機器: スマートフォン、パソコン、タブレット
書籍: 小説、技術書、雑誌
衣類: 洋服、靴、アクセサリー
ホーム＆ガーデン: 家具、インテリア用品
スポーツ: スポーツ用品、アウトドア用品

🛍️ 商品 (10商品)

商品名	価格	カテゴリ	在庫
スマートフォン	¥89,999	電子機器	50
ノートパソコン	¥149,999	電子機器	25
プログラミング入門書	¥2,980	書籍	100
Tシャツ	¥1,980	衣類	200
ジーンズ	¥6,980	衣類	150

🔍 分析用ビュー

効率的なデータ分析のため、以下のビューも事前定義済み：

order_summary: 注文サマリー（顧客情報＋注文統計）
product_sales: 商品別売上統計
sales_ranking: 売上ランキング
customer_stats: 顧客別統計情報

🎯 実際にできること

1. テーブルデータの確認・編集

-- 全ユーザーを表示
SELECT * FROM users;

-- 価格順で商品表示
SELECT name, price FROM products ORDER BY price DESC;

2. 売上分析

-- 売上ランキング表示
SELECT * FROM sales_ranking;

-- カテゴリ別商品数
SELECT c.name, COUNT(p.id) as product_count 
FROM categories c 
LEFT JOIN products p ON c.id = p.category_id 
GROUP BY c.name;

3. 顧客分析

-- 顧客統計の確認
SELECT * FROM customer_stats;

-- 高額購入者の特定
SELECT username, total_spent 
FROM customer_stats 
WHERE total_spent > 50000 
ORDER BY total_spent DESC;

4. データ操作

新規商品追加: GUIから直接入力
在庫更新: テーブル上で直接編集
注文ステータス変更: ドロップダウンで簡単切り替え

💡 Chat機能について

現在の状況

現在のdb-uiバージョンでは、Chat機能（AI機能）は動作しません。設定ファイルにはGroq APIの設定項目がありますが、実際の機能は未実装または不安定な状態です。

設定済み項目

# .envファイル内
GROQ_API_KEY=gsk_xxxx
GROQ_MODEL=llama-3.1-70b-versatile

将来の期待

自然言語でのクエリ生成
データ分析の自動化
レポート生成の支援

基本的なDB管理機能は完全に利用できるため、Chat機能の実装を待ちつつ、現在の機能を活用していきましょう。

🛠️ カスタマイズ方法

ポート番号の変更

他のサービスとのポート競合を避けたい場合：

# docker-compose.yml
ports:
  - "3001:3000"  # db-ui
  - "5433:5432"  # postgres

独自データの追加

init-db.sqlに追加のテーブルやデータを記述：

-- 新しいテーブルの追加例
CREATE TABLE reviews (
    id SERIAL PRIMARY KEY,
    product_id INTEGER REFERENCES products(id),
    user_id INTEGER REFERENCES users(id),
    rating INTEGER CHECK (rating >= 1 AND rating <= 5),
    comment TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

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

よくある問題と解決方法

1. ポートが既に使用されている

# 使用中のポートを確認
lsof -i :3000
lsof -i :5432

# 別のポートを使用（.envファイルで設定）
POSTGRES_PORT_HOST=5433
DB_UI_PORT_HOST=3001

2. データベース接続エラー

# PostgreSQLコンテナの状態確認
docker-compose logs postgres

# ヘルスチェック確認
docker-compose ps

3. データの初期化

# 完全リセット（データ削除）
docker-compose down -v
docker-compose up -d

🔄 管理操作コマンド

# 状態確認
docker-compose ps

# ログ確認
docker-compose logs db-ui
docker-compose logs postgres

# 停止
docker-compose down

# 完全削除（データも含む）
docker-compose down -v

# 再起動
docker-compose restart

🎉 まとめ

db-ui-playgroundは、モダンなDB管理ツールを日本語データですぐに体験できる環境です。

🌟 主なメリット

簡単セットアップ: 3分で完全な環境が構築
実用的なサンプル: ECサイトを想定したリアルなデータ
学習に最適: PostgreSQLとSQL学習に活用可能
チーム開発: 統一されたDB管理環境

🚀 次のステップ

基本操作の習得: テーブルブラウザとSQLエディタを試す
独自データ追加: 自分のプロジェクトデータを投入
チームでの活用: 開発チーム全体での標準ツール化
Chat機能対応: 将来のアップデートを待つ

リポジトリ: Sunwood-ai-labs/db-ui-playground

従来の重厚なDB管理ツールに代わる、軽量でモダンな選択肢として、ぜひお試しください！