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

2025-02-03
大迫 達郎
#
#
#

はじめに

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

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

実装の概要

  1. Prismaでデータベースのスキーマ定義とマイグレーション
  2. 初期データをBase64エンコードして定数として保存
  3. ブラウザで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);
};

制限事項と注意点

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

まとめ

この実装により:

  • オフライン環境でのデータベース操作が可能
  • Prismaの強力なスキーマ管理とマイグレーション機能を活用
  • ブラウザ上でSQLクエリを実行可能

ただし、PrismaとWASM版SQLiteの直接的な連携はできないため、用途に応じて適切な使い分けが必要です。

株式会社Grandreamでは、フルリモートであなたのスキルを活かし、活躍できるエンジニアを募集しております。 詳しくは採用ページをご確認いただき、お気軽にお問い合わせください。

株式会社グランドリームでは、AWSを駆使した開発からUI/UXデザインまで、Webアプリケーションに関するすべての要望に応えます。
まずは一度お気軽にご相談ください。

お問い合わせはこちら