[2026/9/9]

[WEB App] SQLite Viewer v1 — sql.js WASMによるブラウザ完結型SQLiteデータベースビューア/エディタ

[WEB App] SQLite Viewer v1 — sql.js WASMによるブラウザ完結型SQLiteデータベースビューア/エディタ

SQLite Viewer

SQLiteデータベースファイル（.sqlite / .db）をブラウザ内で閲覧・操作するビューア/エディタ。

sql.js（SQLite WASMビルド）をCDNからロードし、テーブルデータ表示、スキーマ解析、SQL実行、CSV/JSONエクスポートをブラウザ完結で実行します。ファイルがサーバーにアップロードされることはありません。

スクリーンショット

テーブルデータ表示

テーブル一覧から選択し、データを表示。DB情報パネル・テーブル検索フィルタ搭載。

SQLite Viewer — テーブルデータ表示

スキーマ表示

カラム定義（型・NOT NULL・PK）とCREATE TABLE SQL を表示。

SQLite Viewer — スキーマ表示

SQLエディタ

任意のSQLを実行。SELECT/INSERT/UPDATE/DELETE/DDLすべて対応。

SQLite Viewer — SQLエディタ

動画（GIF）

SQLite Viewer — 操作デモ

Sample data

テストデータにはNorthwind Sample Databaseを使用しています。

特徴

  • ブラウザ完結処理 — ファイルをサーバーへ送信せず、すべてブラウザ内で処理。プライバシーの高いDBファイルでも安心
  • DB情報パネル — ファイル名、サイズ、テーブル数、総レコード数、ページサイズ、エンコーディングをPRAGMAで取得し一覧表示
  • テーブルデータ表示 — テーブル一覧からクリックで即座にデータ表示。行数制御（100/300/1000/ALL）対応
  • スキーマ解析 — PRAGMA table_info によるカラム定義（型・NOT NULL・PK・デフォルト値）と CREATE TABLE SQL の表示
  • SQLエディタ — 任意のSQLを実行。SELECT/INSERT/UPDATE/DELETE/CREATE TABLE/DROP TABLE すべて対応。実行時間表示
  • CSV/JSONエクスポート — アクティブなテーブルのデータをCSVまたはJSON形式でダウンロード
  • DBバイナリ保存 — SQLエディタで変更した内容を含むDBを .sqlite ファイルとしてエクスポート
  • セルクリックコピー — テーブルのセルをクリックするだけで値をクリップボードにコピー
  • テーブル検索フィルタ — テーブル数が多いDBでもインクリメンタルサーチで即座に絞り込み
  • NULL値の視覚的区別 — NULL値をイタリック＋暗色で表示し、空文字列との区別を明確化
  • サンプルDB生成 — ファイルがなくてもワンクリックでサンプルDBを生成して機能を試せる
  • ローカルファイルゼロ — /publicにファイルを置く必要なし。sql.js/WASMバイナリはCDNから自動取得

使い方

1. DBファイルを読み込む

左パネルのドロップエリアに .sqlite / .db / .sqlite3 / .db3 ファイルをドラッグ＆ドロップするか、「ファイル選択」ボタンからファイルを選択します。

ファイルがない場合は「サンプルDB生成」ボタンで、テスト用のサンプルデータベースを自動生成できます。

2. テーブルを閲覧する

ファイル読み込み後、左パネルにテーブル一覧が表示されます。テーブル名をクリックすると右側にデータが表示されます。

機能説明
テーブル一覧左パネルにすべてのテーブルを表示。クリックで選択
テーブル検索検索ボックスに入力してテーブルをインクリメンタル絞り込み
行数制御右上のセレクトで表示件数を変更（100/300/1000/ALL）
セルコピーセルをクリックするとその値がクリップボードにコピーされます

3. スキーマを確認する

「スキーマ」タブでアクティブなテーブルのカラム定義を確認できます。

表示項目説明
cidカラムID（0始まり）
nameカラム名
typeデータ型（INTEGER, TEXT, REAL等）
notnullNOT NULL制約の有無
defaultデフォルト値
pkPRIMARY KEY（0=非PK, 1以上=PK順序）

ページ下部にはそのテーブルの CREATE TABLE SQL文も表示されます。

4. SQLを実行する

「SQLエディタ」タブで任意のSQLを入力し、「実行 (Ctrl+Enter)」ボタンまたはキーボードショートカットで実行します。

SELECT文の場合は結果テーブルが表示されます。INSERT/UPDATE/DELETE/DDL文の場合は実行完了メッセージが表示され、テーブル一覧が自動更新されます。

5. データをエクスポートする

ボタン説明
CSVアクティブなテーブルのデータをCSVファイルとしてダウンロード
JSONアクティブなテーブルのデータをJSONファイルとしてダウンロード
DBを保存 (.sqlite)現在のDB全体を .sqlite ファイルとしてダウンロード

SQLエディタでINSERT/UPDATEした変更も「DBを保存」に反映されます。

DB情報パネル

ファイル読み込み後、左パネルに以下の情報が表示されます。

項目説明
File読み込んだファイル名
Sizeファイルサイズ
Tablesテーブル数
Records全テーブルの総レコード数
Page SizeSQLiteのページサイズ（bytes）
Encodingテキストエンコーディング

対応入力フォーマット

拡張子説明
.sqliteSQLiteデータベースファイル
.dbSQLiteデータベースファイル
.sqlite3SQLiteデータベースファイル
.db3SQLiteデータベースファイル

キーボードショートカット

ショートカット説明
Ctrl+EnterSQL実行（SQLエディタタブ）

技術スタック

  • sql.js v1.12.0 — SQLiteのEmscripten WASMビルド
  • Web API (FileReader / Blob / Clipboard) — ファイル読み込み・エクスポート・セルコピー
  • Astro — Webアプリケーション基盤

技術記事

更新履歴

  • [v1.0] (2026-09-08): 初回公開。
    • sql.js v1.12.0 WASM による SQLite エンジン統合
    • テーブルデータ表示（行数制御: 100/300/1000/ALL）
    • PRAGMA table_info によるスキーマ解析 + CREATE TABLE SQL 表示
    • SQLエディタ（SELECT/INSERT/UPDATE/DELETE/DDL対応、実行時間計測）
    • DB情報パネル（PRAGMA page_size/encoding、総レコード数）
    • CSV/JSON/DBバイナリ エクスポート
    • セルクリックコピー、テーブル検索フィルタ、NULL値視覚化
    • サンプルDB生成機能