ブラウザで動くCSV加工アプリ(WASM版SQLite利用)を作ってみた

はじめに

適度なデータ量のCSVの集計する機会があり、WebAssembly版のSQLiteを使ってブラウザでCSVを加工する簡単なWebアプリを作ってみた。

成果物

ローカルHTMLファイルで実行

仕様

1. ローカルのCSVファイルを読み込む
2. CSVデータをインメモリデータベースに取り込む
3. 画面上でクエリを実行し、実行結果を表示する(CSV形式)

利用ライブラリ

• encoding.js
  • 用途：CSVファイルのエンコード処理
  • https://github.com/polygonplanet/encoding.js
• sql.js
  • 用途：ブラウザ上でデータベース操作
  • SQLiteのWebAssemblyバイナリも含む
  • https://github.com/sql-js/sql.js

実装

gistのリンク

補足

• 簡易的な実装のためライブラリはCDNを利用
• 読み込んだCSVの1列目をカラム名としている
• SQLiteのWebAssembly版(.wasm)の読込方法などは公式サイト(github)を参照
• パフォーマンス計測はしていない

sql.jsの実装時メモ

実行結果を取得したいクエリの実行はDatabase.execメソッドを利用する。 その際、クエリは複数書くことができるため戻り値も配列となっている。

// Array.<Database.QueryExecResult>
const results = db.exec('SELECT * FROM TABLE1; SELECT * FROM TABLE2;')
// 1つ目のクエリ結果
const { columns: col1, values: val1 } = results[0]
// 2つ目のクエリ結果
const { columns: col2, values: val2 } = results[1]

リファレンス

CDN提供のダウンロードして利用する場合

ローカルHTMLファイルとして実行する場合、ローカルファイルのWASMバイナリはCORSポリシー違反でロードすることができない。 そのため、WASMのバイナリファイルをBASE64に変換して、JSファイルとして読み込む方法がある。

参考：SQLite WASM (v1.8.0) as BASE64 · GitHub

所感

ローカルHTMLファイルで実行できるので、簡単な集計や加工をしたい場合は結構役に立つかもしれない。