DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす

フロントエンドカンファレンス北海道 プレイベント in SAPPORO ENGINEER BASE
https://seb-sapporo.connpass.com/event/361650/

Transcript

1. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす HakataYusuke(@hacusk) 2025.08.30 SAPPORO ENGINEER BASE #08 1
2. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk whoami Name: はくすけ(@hacusk) / HakataYusuke Job: 株式会社モニクル SWE Language: TypeScript, Go, PHP … FavoriteTech: MultiPlatformなもの, OSS, ネットワーク Love: 声優, 旅行, ライブ, アイドル, 車(ドライブ), モーター スポーツ, ガジェット Community: 函館本線沿線勉強会, フロントエンドカンファレンス北 海道実行委員会, OSC北海道実行委員会 2
3. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk 宣伝 3
4. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk 函館本線沿線勉強会 〜HNSAdev〜 @小樽 2025.09.23(Tue.) 13:00〜17:00 小樽市民センター 2号会議室 4
5. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk フロントエンドカンファレンス北海道2025 2025.09.06(Sat.) 10:00〜20:30 エア・ウォーターの森 5
6. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk 翌日にハンズオンイベントもあります！ 6
7. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk はじめます 7
8. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk こいついつもWasmの話してるな • WebAssembly Cookbook vol.2 ◦ ブラウザ上でExcelファイルを扱う話 • WebAssembly Cookbook vol.3 ◦ RDBMS をブラウザ上で動かしてみる話 ◦ 今日はここでしている話を取り上げます 8
9. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk Wasmおさらい 9
10. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk Wasmって? WebAssembly (略称 Wasm) は、スタックベースの仮想マシン用のバイナリ命令形式です。 Wasmは、プログラミング言語のポータブルなコンパイルターゲットとして設計されており、 クライアントアプリケーションとサーバーアプリケーションを Web 上で展開できるようになります。 https://webassembly.org/ 10
11. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk Wasmって? WebAssembly は現代のウェブブラウザーで実行できる新しい種類のコードです。 ネイティブに近いパフォーマンスで動作する、コンパクトなバイナリー形式の低レベルなアセンブリー風言語で す。 さらに、 C/C++、C# や Rust などの言語のコンパイル先となり、それらの言語をウェブ上で実行すること ができます。 WebAssembly は JavaScript と並行して動作するように設計されているため、 両方を連携させること ができます。 https://developer.mozilla.org/ja/docs/WebAssembly 11
12. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk Wasmって? WebAssembly は現代のウェブブラウザーで実行できる新しい種類のコードです。 ネイティブに近いパフォーマンスで動作する、コンパクトなバイナリー形式の低レベルなアセンブリー風言語で す。 さらに、 C/C++、C# や Rust などの言語のコンパイル先となり、それらの言語をウェブ上で実行すること ができます。 WebAssembly は JavaScript と並行して動作するように設計されているため、 両方を連携させること ができます。 https://developer.mozilla.org/ja/docs/WebAssembly Webブラウザー上で実行できる CやC++、C#やRustなどの言語からコンパイルできる ネイティブに近いパフォーマンスで動作する バイナリ形式のアセンブリ言語 の仕様とVirtualMachineのこと 12
13. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk Wasmって? • 仕様はW3Cによって定められている ◦ 設計目標（Design Goals）が設定されている • Wasm単体ではCPUやメモリを直接つかう計算処理などしか扱えない ◦ サンドボックス環境で実行され数値計算やメモリの読み書きしかできない ◦ I/Oやリソース外へのアクセスなどは実行元から提供される必要がある ▪ すごく良いように言うと、セキュアだね ▪ WasmのRuntimeとして扱えるようにしようよという動きもある（WASI) 13
14. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk https://webassembly.org/features/ 14
15. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk CPUの話 CPUなどのプロセッサには命令セットという命令の集まりがある。 プロセッサは命令を実行することで処理を行うが、 プロセッサが受け入れ可能な命令はプロセッサごとに異なる。 Windows x86-64 macOS AArch64 Linux RISC-V 15
16. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk コンパイラ型言語の話 C/C++ やGo、Rustなどのコンパイラ型言語では実行したい CPUアーキテクチャごとに対応したバイナリに変換する必要がある。 Windows x86-64 macOS AArch64 Linux RISC-V C/C++, Go, Rust … 16
17. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk じゃあWebAssemblyは? WebAssemblyでは各コンパイラ型言語からWebAssembly上で 実行可能なバイナリとそれを実行するVMを用いてOSやCPUアーキテクチャの差異を吸収している。 Windows x86-64 macOS AArch64 Linux RISC-V C/C++, Go, Rust … WebAssembly 17
18. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk 似てるね 30億のデバイスで走るJavaは、JavaコンパイラからJVM(Java Virtual Machine)で 実行可能なバイナリをコンパイルしJVM上で実行することで実現している。 Windows x86-64 macOS AArch64 Linux RISC-V Java (source) JVM (Java Virtual Machine) 18
19. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk 30億のデバイスで動くWebAssembly ブラウザ上にWebAssemblyのVirtualMachine が実装されている。 これにより、WebAssemblyのバイナリをブラウザ 上で自由に実行できるようになっている。 また、バイナリフォーマットをWasmが直接扱うこと でJavaScriptよりも高いパフォーマンスが見込め る。≒ マシン語 C/C++, Go, Rust … WebAssembly (binary) Windows x86-64 macOS AArch64 Linux RISC-V WebAssembly (VM) Web Browser (Firefox / Chrome…) 19
20. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk 30億のデバイスで動くWebAssembly C/C++, Go, Rust … WebAssembly (binary) WebAssembly (VM) Web Browser (Firefox / Chrome…) Frontend Backend WebAssembly System Interface (WASI) Wasm Runtime (Wasmer / wasmtime…) 20
21. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk 本題 21
22. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk Wasmビルドのデータベース • DuckDB ◦ DuckDB-Wasm • PostgreSQL ◦ PGLite • SQLite ◦ SQLite Wasm 22
23. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk DuckDB-Wasm • オンライン分析処理(OLAP)に特化したRDBMSで、データ分析などが得意 ◦ MySQLやPostgreSQLと同じ一般的なSQL文が使える • DuckDB-WasmはNode.js、Bun、ブラウザ上で実行可能 • Open-Private-File-System(OPFS)に対応しており、永続的にデータの保存が可能 • データのインポートにCSV、Parquetファイルが使える ◦ ネイティブ版はもとより、Wasm版でもインポートが可能 23
24. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk Open-Private-File-System(OPFS) • ブラウザ内でOriginごとに隔離されたプライベートなファイル領域を提供するファイルシステム • ファイルシステムアクセスAPIの一部として提供 • Originごとに隔離されているのでセキュリティ的に優れている ◦ ユーザーが直接閲覧することのできない形でファイルが管理される • セキュリティチェックの範囲が狭まるのでパフォーマンスが向上 ◦ 悪意のあるデータのチェックを厳密にする必要がなくなる ◦ ファイルシステムアクセスAPIでは、悪意のあるコンテンツがファイルシステムに書き込まれないように、多くのセ キュリティチェックが行われている ◦ これらの書き込みはその場で行われるのではなく一時ファイルを使用し、すべてのセキュリティチェックに合格し ない限り、元のファイルは変更されない • サイトのストレージデータをクリアすると、 OPFS が削除される 24
25. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk 動かす 任意のパッケージマネージャーから @duckdb/duckdb-wasm を追加してください $ npm i @duckdb/duckdb-wasm 25
26. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk 動かす DuckDB-Wasmを呼び出し、Wasmの実行とそのDuckDBとの接続インスタンスを生成 WebWorkerを用いて、バックグラウンドのスレッドで実行するようにします const MANUAL BUNDLES: duckdb.DuckDBBundlers = { mvp: { mainModule: duckdb_wasm, mainWorker: mvp_worker, }, eh: { mainModule: duckdb_wasm_eh, mainWorker: eh_worker, }, }; const bundle = await duckdb.selectBundle(MANUAL_BUNDLES); const worker = new Worker(bundle.mainWorker!); const logger = new dubdb.ConsoleLogger(); const db = new duckdb.AsyncDuckDB(logger, worker); await db.instance(bundle.mainModule, bundle.pthreadWorker) 26
27. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk デモ 27 https://github.com/hacusk/wasm-cookbook/tree/main/vol03/ch01
28. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk パフォーマンスはどうだったか 200万件のデータを用いて実行した結果 - 総データ量 SQL Query Query time 1回目 2,000,000 SELECT * FROM customers WHERE Country = ‘Japan’; 331.3ms 2回目 2,000,000 SELECT * FROM customers WHERE Country = ‘Japan’; 334.7ms 3回目 2,000,000 SELECT * FROM customers WHERE Country = ‘Japan’; 288.7ms 4回目 2,000,000 SELECT * FROM customers WHERE Country = ‘Japan’; 288.7ms 5回目 2,000,000 SELECT * FROM customers WHERE Country = ‘Japan’; 284.7ms 28
29. DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす - hacusk まとめ • ブラウザだけで高速にSQLを使ったデータ処理が可能に ◦ 今回のデモはクエリの結果を表示するだけだが、グラフを表示するなど工夫しがいがある ◦ 巨大なデータでもパフォーマンスが安定しているという事実がうれしい ◦ ワーカー等に逃がすことでスレッドがブロックされないのもうれしい • ジオデータなど扱いにくいようなデータもフロントでSQLを用いた計算が可能に • ポータビリティ性が高い ◦ すべてまとめて、ブラウザ内だけで実行環境を完結できる 29