はじめに
ブラウザ上で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はサーバーサイドでの使用に限定されます
- データの更新
- データベースの更新が必要な場合は、再度マイグレーションとシーディングを実行する必要があります
まとめ
この実装により：
- オフライン環境でのデータベース操作が可能
- Prismaの強力なスキーマ管理とマイグレーション機能を活用
- ブラウザ上でSQLクエリを実行可能
ただし、PrismaとWASM版SQLiteの直接的な連携はできないため、用途に応じて適切な使い分けが必要です。
株式会社Grandreamでは、フルリモートであなたのスキルを活かし、活躍できるエンジニアを募集しております。
詳しくは採用ページをご確認いただき、お気軽にお問い合わせください。
