🚀
ゼロ設定
自動WASM読み込みで、すぐに使い始められます。複雑な設定は不要です。
DuckDB WASM アダプターブラウザで動作する高速SQLデータベース
React、Vue、Svelte向けのモダンなDuckDBアダプター
Skip to content
クイックスタート
React
bash
npm install @northprint/duckdb-wasm-adapter-reactjsx
import { DuckDBProvider, useQuery } from '@northprint/duckdb-wasm-adapter-react';
function App() {
return (
<DuckDBProvider autoConnect>
<DataTable />
</DuckDBProvider>
);
}
function DataTable() {
const { data, loading, error } = useQuery('SELECT * FROM users');
if (loading) return <div>読み込み中...</div>;
if (error) return <div>エラー: {error.message}</div>;
return (
<table>
{data?.map(row => (
<tr key={row.id}>
<td>{row.name}</td>
<td>{row.email}</td>
</tr>
))}
</table>
);
}Vue
bash
npm install @northprint/duckdb-wasm-adapter-vuevue
<template>
<div>
<div v-if="loading">読み込み中...</div>
<div v-else-if="error">エラー: {{ error.message }}</div>
<table v-else>
<tr v-for="row in data" :key="row.id">
<td>{{ row.name }}</td>
<td>{{ row.email }}</td>
</tr>
</table>
</div>
</template>
<script setup>
import { useQuery } from '@northprint/duckdb-wasm-adapter-vue';
const { data, loading, error } = useQuery('SELECT * FROM users');
</script>Svelte
bash
npm install @northprint/duckdb-wasm-adapter-sveltesvelte
<script>
import { createDuckDB } from '@northprint/duckdb-wasm-adapter-svelte';
const db = createDuckDB({ autoConnect: true });
$: users = db.query('SELECT * FROM users');
</script>
{#if $users.loading}
<p>読み込み中...</p>
{:else if $users.error}
<p>エラー: {$users.error.message}</p>
{:else}
<table>
{#each $users.data as user}
<tr>
<td>{user.name}</td>
<td>{user.email}</td>
</tr>
{/each}
</table>
{/if}主な機能
🔍 SQLクエリの実行
ブラウザ内で直接SQLクエリを実行。パラメーターバインディングでSQLインジェクションを防止。
📁 データのインポート/エクスポート
CSV、JSON、Parquetファイルの読み込みと書き出しをサポート。
🏗️ クエリビルダー
プログラマティックにクエリを構築。型安全で直感的なAPI。
💾 キャッシング
自動的なクエリ結果のキャッシング。パフォーマンスを大幅に向上。
🎯 デバッグモード
詳細なログ出力とパフォーマンス測定で開発を支援。
🌐 空間拡張
GIS機能とPostGIS互換の空間クエリをサポート。
なぜDuckDB WASMアダプター？
問題
- サーバーサイドでのデータ処理はネットワーク遅延が発生
- 大量のデータ転送はコストが高い
- リアルタイム分析には不向き
解決策
DuckDB WASMアダプターは、ブラウザ内で完結するデータ処理を実現：
- ゼロレイテンシー: サーバー通信なし
- プライバシー: データがブラウザから出ない
- コスト削減: サーバーリソース不要
- 高速: ネイティブに近いパフォーマンス
パッケージ
| パッケージ | バージョン | 説明 |
|---|---|---|
| @northprint/duckdb-wasm-adapter-core |  | コアライブラリ |
| @northprint/duckdb-wasm-adapter-react |  | React統合 |
| @northprint/duckdb-wasm-adapter-vue |  | Vue統合 |
| @northprint/duckdb-wasm-adapter-svelte |  | Svelte統合 |