[2026/9/13]

[WEB App] DuckDB WASM Data Analyzer v1 — ブラウザ完結型 CSV / Parquet 高速分析ツール

[WEB App] DuckDB WASM Data Analyzer v1 — ブラウザ完結型 CSV / Parquet 高速分析ツール

DuckDB WASM Data Analyzer v1

ブラウザ上でサーバーサイドの処理を一切介さず、DuckDB WASM を用いて CSV / Parquet / TSV / JSON ファイルを SQL でリアルタイム集計・可視化できる Web アプリケーション。

ファイルをドラッグ＆ドロップするだけで、メモリ内で即座にスキーマを解析して描画。ワンクリック GROUP BY 集計、フリー SQL エディタ、Chart.js による5種グラフ可視化、複数ファイル JOIN、Parquet エクスポートまで、データ探索に必要な機能を統合しています。100万行の GROUP BY 集計が 91ms で返ってくるパフォーマンスを、外部サーバーなし・ファイルアップロードなしで実現しています。

スクリーンショット

メイン UI

DuckDB WASM Data Analyzer v1 — メイン UI

クエリ実行

DuckDB WASM Data Analyzer v1 — クエリ実行

Chart.js グラフ可視化

DuckDB WASM Data Analyzer v1 — グラフ可視化

動画（GIF）

DuckDB WASM Data Analyzer v1 操作デモ

Sample data

サンプルの Parquet ファイル（100万行フライトデータ等）は以下のサイトからダウンロードできます。

特徴

  • ブラウザ完結型 DuckDB WASM エンジン:
    @duckdb/duckdb-wasm を Web Worker 上で動作させ、サーバーへのファイル送信なしで CSV / Parquet / TSV / JSON をフル SQL で分析。100万行 GROUP BY が 91ms のパフォーマンスを実現。

  • ゼロコピー大容量ファイル登録:
    registerFileHandle により File オブジェクトを直接 WASM 仮想ファイルシステムに登録。ファイル内容をメモリにコピーせず、必要なバイト範囲のみを読み込む列指向アクセスを活用。

  • ワンクリック GROUP BY 集計:
    左サイドバーのカラムリストから「⚡ GROUP BY & COUNT」ボタンを押すだけで集計 SQL を自動生成・即時実行。型情報（DATE / VARCHAR / DOUBLE 等）も同時表示。

  • Chart.js 5種グラフ可視化:
    クエリ結果を TABLE / BAR / LINE / PIE / SCATTER の5モードで切り替え表示。GROUP BY 結果をそのままグラフに流せる設計。

  • 複数ファイル同時登録と JOIN:
    複数の CSV / Parquet をドロップして仮想 FS に登録し、JOIN クエリを自由に記述可能。「⚡ GENERATE JOIN TEMPLATE」ボタンで JOIN 雛形 SQL を自動生成。

  • Parquet エクスポート:
    COPY TO + copyFileToBuffer により、現在のクエリ結果を Snappy 圧縮 Parquet としてダウンロード。CSV エクスポートにも対応。

  • DuckDB 分析特化コマンド:
    SUMMARIZE（全カラム統計サマリー）、DESCRIBE（スキーマ確認）等の DuckDB 独自コマンドをプリセットボタンから実行可能。

モジュール構成

モジュール名主要機能
FILE LOADERCSV / Parquet / TSV / JSON ドラッグ＆ドロップ、複数ファイル登録、REGISTERED FILES 一覧
QUERY ENGINEフリー SQL エディタ、Ctrl+Enter 実行、実行時間・行数表示、エラー表示
PRESET SQLTOP 100 / COUNT(*) / SUMMARIZE / DESCRIBE のワンクリック実行
COLUMN PANELカラム名・型の一覧、ワンクリック GROUP BY & COUNT
VISUALIZERTABLE / BAR / LINE / PIE / SCATTER の5種ビュー切り替え（Chart.js）
MULTI FILE JOIN複数ファイル仮想 FS 登録、JOIN テンプレート自動生成
EXPORTERクエリ結果の CSV エクスポート、Parquet（Snappy）エクスポート

使い方

1. ファイルの読み込み

ドロップエリアに CSV / Parquet / TSV / JSON ファイルをドラッグ＆ドロップします。自動的にスキーマが解析され、左サイドバーにカラム一覧が表示されます。

2. モーション・表情の確認

左サイドバーのカラム名横の「⚡ GROUP BY & COUNT」ボタンをクリックすると、そのカラムの集計クエリが即時実行されます。結果は TABLE または Chart.js グラフで確認できます。

3. SQL クエリの直接入力

中央のテキストエリアに任意の SQL を入力し、Ctrl+Enter または「EXECUTE」ボタンで実行します。DuckDB の SQL 方言（SUMMARIZE、COPY TO、read_parquet() 等）がそのまま使えます。

-- 例: フライトデータの遅延分析
SELECT DISTANCE,
       AVG(DEP_DELAY) as avg_delay,
       COUNT(*) as flights
FROM 'flights-1m.parquet'
GROUP BY DISTANCE
ORDER BY avg_delay DESC
LIMIT 20;

4. 複数ファイルの JOIN

2つ以上のファイルをドロップすると、左サイドバーに「REGISTERED FILES」リストと「⚡ GENERATE JOIN TEMPLATE」ボタンが表示されます。テンプレートを編集して任意のカラムで JOIN できます。

5. グラフ表示と結果のエクスポート

右上の「VIEW」ドロップダウンでグラフ種類を選択します。クエリ結果の1列目がラベル、2列目が値として自動マッピングされます。「EXPORT CSV」または「EXPORT PARQUET」ボタンで結果をダウンロードできます。

技術スタック

  • DuckDB WASM — ブラウザ内 SQL 分析エンジン（列指向・Parquet ネイティブ対応）
  • Chart.js + react-chartjs-2 — BAR / LINE / PIE / SCATTER グラフ描画
  • React 19 — UI コンポーネント・状態管理
  • Apache Arrow — クエリ結果のメモリ内列データ表現
  • Astro — Web アプリケーション基盤

技術記事

更新履歴

  • [2026-09-13]: v1.0 初回公開。
    • DuckDB WASM（Web Worker）による CSV / Parquet / TSV / JSON のブラウザ内 SQL 実行エンジンの構築
    • registerFileHandle によるゼロコピー大容量ファイル登録と列指向アクセス
    • ワンクリック GROUP BY & COUNT、プリセット SQL（SUMMARIZE / DESCRIBE / TOP100 / COUNT）の実装
    • Chart.js 5種グラフ可視化（BAR / LINE / PIE / SCATTER / TABLE）の統合
    • 複数ファイル同時登録と JOIN テンプレート自動生成機能の実装
    • COPY TO + copyFileToBuffer による Snappy 圧縮 Parquet エクスポートの実装