【Drizzle ORM シリーズ】
・Drizzle ORM を Next.js で使ってみる #Next.js - Qiita
https://qiita.com/sigeta/items/c0a2b0463eca06314906
・Drizzle ORM でスキーマファイルを使ってDBを操作する方法 #Next.js - Qiita
https://qiita.com/sigeta/items/99a625c17c6a0a75da54
・Drizzle ORM でリレーションを張る方法 #Next.js - Qiita
https://qiita.com/sigeta/items/b800f3e38beb1639d2b7
・Drizzle ORM の設定ファイルを接続時も利用する方法 #TypeScript - Qiita
https://qiita.com/sigeta/items/d9267a06061d4d2a51e8
・Drizzle ORM でダミーデータを流し込む方法 #TypeScript - Qiita
https://qiita.com/sigeta/items/8bc85b74273eeb37c27a
簡単に言うと、SQLをラップしてくれるORM。
Laravel みたいにモデルを作る仕組みではなく、素のSQLを関数で組み立てて、スキーマ型で受ける仕組み。
Kysely の ORM 拡張っぽい感じ。
有名なのは Prisma だが、スキーマが独自言語で、Prizma 自体で動かせるようなおっきいライブラリなので、そこまでは必要ないという若干の使いずらさを感じる。
Drizzle はすべてが TypeScript で完結しているので、シンプルで将来性が非常に高い。
ということで Next から SQLite を利用するまでのまとめです。
意外にも苦戦した...。
インストール
Next の設定はデフォルトで。
利用する SQLite のドライバは better-sqlite3 が良いかもしれない。
libsql のほうが新しいのだが、これは SQLite サーバーに直接接続できる機能が付いており、調査時に機能が混同していて難しかった...。時間があったら戦いたい。
$ npx create-next-app@latest
✔ What is your project named? … test-next-drizzle
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
$ cd test-next-drizzle
$ npm i drizzle-orm better-sqlite3
$ npm i -D drizzle-kit @types/better-sqlite3
そしたら動かす RSC コンポーネントを作成する。
チュートリアルの移植だが、これ多分 db.run() メソッドが正しい。
execute() は赤線引かれる。
'use server'
import { drizzle } from 'drizzle-orm/better-sqlite3'
export const dbSelect = async () => {
const db = drizzle()
const result = await db.run('select 1')
return result
}
そしたら pages.tsx から雑に呼び出す。
'use client'
import { useEffect } from "react"
export default function Home() {
useEffect(() => {
dbSelect().then(res => console.log(res))
}, [])
...
動いた！
時間が無いので、とりあえずここまで...
続き
Drizzle ORM でスキーマファイルを使ってDBを操作する方法 #Next.js - Qiita
https://qiita.com/sigeta/items/99a625c17c6a0a75da54