ブラウザで動作するSQLite: sql.jsとPrismaを組み合わせた実装

はじめに

ブラウザ上でSQLiteを動作させ、オフラインでもデータベース操作を可能にする方法を紹介します。

この実装では、Prismaを使用してデータベースの構造管理とシーディングを行い、sql.jsを使用してブラウザ上でデータベースを操作します。

実装の概要

Prismaでデータベースのスキーマ定義とマイグレーション
初期データをBase64エンコードして定数として保存
ブラウザでsql.jsを使用してデータベースを操作

データベースのセットアップ

スキーマ定義


// prisma/schema.prisma
model users {
  id             Int      @id @default(autoincrement())
  name           String
}

`‍`シーディング`‍`


// prisma/seed.ts
const users = [
  { name: "山田太郎" },
  { name: "鈴木花子" },
  { name: "佐藤次郎" },
];

await prisma.users.createMany({
  data: users,
});

`‍`データベースの生成と変換

Prismaで生成したデータベースをBase64エンコードし、定数として保存します：


// src/lib/generateDatabase.ts
export async function generateInitialDatabase() {
  const prisma = new PrismaClient();
  try {
    await prisma.$disconnect();
    const dbFile = fs.readFileSync("prisma/dev.db");
    const db = new DatabaseService();
    await db.initialize();
    await db.loadBinary(new Uint8Array(dbFile));
    return db.export();
  } catch (error) {
    console.error("Error:", error);
    throw error;
  }
}

`‍`ブラウザでの使用


// app/(main)/test-db/page.tsx
const [db, setDb] = useState(null);

useEffect(() => {
  const initDb = async () => {
    const dbService = new DatabaseService();
    await dbService.initialize(INITIAL_DB_BASE64);
    setDb(dbService);
  };
  initDb();
}, []);

const handleQuery = () => {
  if (!db) return;
  const result = db.query("SELECT * FROM users");
  console.log(result);
};

‍

制限事項と注意点

Prismaとsql.jsの相互運用性
- sql.jsで読み込んだデータベースに対してPrismaを使用することはできません
- Prismaはサーバーサイドでの使用に限定されます
データの更新
- データベースの更新が必要な場合は、再度マイグレーションとシーディングを実行する必要があります