Open4

Web上でデータベースを学習できる環境を開発する

Godai HoriGodai Hori

ORMはNode依存がない標準の技術で動いているdrizzleを採用する
Prismaはそもそもスキーマに応じてビルドしてから使うものなのでそれをブラウザーで使おうと思うとなかなか難しい

https://github.com/drizzle-team/drizzle-orm

SQLとしてはブラウザーで動作するsql.jsを使う。
内部的には専用のwasmが使われているらしい

https://github.com/sql-js/sql.js

こういうのもあるっぽい

https://github.com/sqlite/sqlite-wasm

Godai HoriGodai Hori

sqlのwasmをロード

import initSqlJs, { SqlValue } from 'sql.js';

const sqlPromise = await initSqlJs({
  locateFile: (file) => `https://sql.js.org/dist/${file}`,
});

sqliteのデータのバイナリーを読み込む

async function loadBinaryFile(path: string) {
    try {
        const response = await fetch(path);
        const arrayBuffer = await response.arrayBuffer();
        const data = new Uint8Array(arrayBuffer);
        let arr = [];
        for(let i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
        return arr.join("");
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
}

loadBinaryFile('./nw.sqlite', function(data){
  const sqldb = new sqlPromise.Database(data);
});

drizzleと接続する

const database = drizzle(sqldb);
const res = database.select().from(employees).all()
setDb(database)