drizzle-studio
Drizzle Studioは、データベースの内容をGUIで視覚的に確認したり、テーブルやデータを調べたり、簡単なクエリを実行したり、レコードを管理したりできる、pgAdminやDBeaverの代替として手軽にデータベースを操作するSkill。
📜 元の英語説明(参考)
Explore and manage databases with Drizzle Studio. Use when a user asks to browse database contents visually, inspect tables and data, run ad-hoc queries, manage database records through a GUI, debug database issues, or use a lightweight alternative to pgAdmin or DBeaver. Covers setup with Drizzle ORM, standalone usage, data browsing, filtering, and inline editing.
🇯🇵 日本人クリエイター向け解説
Drizzle Studioは、データベースの内容をGUIで視覚的に確認したり、テーブルやデータを調べたり、簡単なクエリを実行したり、レコードを管理したりできる、pgAdminやDBeaverの代替として手軽にデータベースを操作するSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o drizzle-studio.zip https://jpskill.com/download/14851.zip && unzip -o drizzle-studio.zip && rm drizzle-studio.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/14851.zip -OutFile "$d\drizzle-studio.zip"; Expand-Archive "$d\drizzle-studio.zip" -DestinationPath $d -Force; ri "$d\drizzle-studio.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
drizzle-studio.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
drizzle-studioフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
Drizzle Studio
概要
Drizzle Studioは、ブラウザ上で動作するビジュアルなデータベースブラウザおよび管理ツールです。pgAdminやDBeaverのような重厚なツールとは異なり、1つのコマンドで起動し、あらゆるDrizzle ORMプロジェクトで動作します。テーブルの閲覧、データのフィルタリング、レコードのインライン編集、SQLクエリの実行、リレーションシップの検査を、すべてクリーンなWebインターフェースを通じて行えます。PostgreSQL、MySQL、SQLiteをサポートしています。
手順
ステップ 1: Drizzle ORMでのセットアップ
# すでにDrizzle ORMプロジェクトをお持ちの場合:
npx drizzle-kit studio
# http://localhost:4983 を開きます
# データベース接続のために drizzle.config.ts を読み込みます
// drizzle.config.ts — Studioが読み込む設定
import { defineConfig } from 'drizzle-kit'
export default defineConfig({
schema: './src/db/schema.ts',
driver: 'pg',
dbCredentials: {
connectionString: process.env.DATABASE_URL!,
},
})
ステップ 2: スタンドアロンでの使用 (Drizzle ORMなし)
# 任意のPostgreSQLデータベースに接続
npx drizzle-kit studio --host 0.0.0.0 --port 4983
# 明示的な接続
DATABASE_URL=postgresql://user:pass@localhost:5432/mydb npx drizzle-kit studio
ステップ 3: 機能
データ閲覧:
- すべてのテーブルとそのスキーマを表示
- ページネーションによる行の閲覧
- カラム値によるフィルタリング
- 任意のカラムによるソート
- テーブル間のリレーションシップの表示
インライン編集:
- 任意のセルをクリックして値を編集
- UIで直接新しい行を追加
- 確認付きで行を削除
- 変更は即座にデータベースに適用
SQL runner:
- 任意のSQLクエリを実行
- 結果をテーブル形式で表示
- 結果をエクスポート
例
例 1: 本番データの問題をデバッグする
ユーザープロンプト: 「usersテーブルを素早く検査し、過去24時間以内に作成され、メール認証されていないすべてのアカウントを見つける必要があります。」
エージェントは以下を行います:
- 本番データベースに接続されたDrizzle Studioを起動します(読み取り専用の認証情報)。
- usersテーブルに移動します。
- フィルタを適用します:
created_at > yesterdayANDemail_verified = false。 - 結果を確認し、必要に応じてエクスポートします。
ガイドライン
- 誤った変更を防ぐため、本番データを閲覧する際は読み取り専用のデータベース認証情報を使用してください。
- Drizzle Studioは開発およびデバッグ用に設計されています。本番環境の管理パネルには、アクセス制御を備えた適切な管理UIを構築してください。
drizzle.config.tsを自動的に読み込みます。設定が、検査したい環境の正しいデータベースを指していることを確認してください。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Drizzle Studio
Overview
Drizzle Studio is a visual database browser and admin tool that runs in your browser. Unlike heavyweight tools like pgAdmin or DBeaver, it starts in one command and works with any Drizzle ORM project. Browse tables, filter data, edit records inline, run SQL queries, and inspect relationships — all through a clean web interface. It supports PostgreSQL, MySQL, and SQLite.
Instructions
Step 1: Setup with Drizzle ORM
# If you already have a Drizzle ORM project:
npx drizzle-kit studio
# Opens http://localhost:4983
# Reads your drizzle.config.ts for database connection
// drizzle.config.ts — Configuration that Studio reads
import { defineConfig } from 'drizzle-kit'
export default defineConfig({
schema: './src/db/schema.ts',
driver: 'pg',
dbCredentials: {
connectionString: process.env.DATABASE_URL!,
},
})
Step 2: Standalone Usage (Without Drizzle ORM)
# Connect to any PostgreSQL database
npx drizzle-kit studio --host 0.0.0.0 --port 4983
# With explicit connection
DATABASE_URL=postgresql://user:pass@localhost:5432/mydb npx drizzle-kit studio
Step 3: Features
Data browsing:
- View all tables and their schemas
- Browse rows with pagination
- Filter by column values
- Sort by any column
- View relationships between tables
Inline editing:
- Click any cell to edit its value
- Add new rows directly in the UI
- Delete rows with confirmation
- Changes are applied to the database immediately
SQL runner:
- Execute arbitrary SQL queries
- View results in a table format
- Export results
Examples
Example 1: Debug production data issues
User prompt: "I need to quickly inspect the users table and find all accounts created in the last 24 hours that haven't verified their email."
The agent will:
- Start Drizzle Studio connected to the production database (read-only credentials).
- Navigate to the users table.
- Apply filters:
created_at > yesterdayANDemail_verified = false. - Review the results and export if needed.
Guidelines
- Use read-only database credentials when browsing production data to prevent accidental modifications.
- Drizzle Studio is designed for development and debugging — for production admin panels, build a proper admin UI with access controls.
- It reads your
drizzle.config.tsautomatically — ensure the config points to the correct database for the environment you want to inspect.