2023-11-02

Remix Prismaを導入する

RemixでのORMの導入

参考資料

Remixドキュメント

https://remix.run/docs/en/main/tutorials/jokes#databa

What is Prisma

https://www.prisma.io/docs/concepts/overview/what-is-prisma

Prisma CLI

https://www.prisma.io/docs/reference/api-reference/command-reference

Faker

https://fakerjs.dev/guide/

概要

前回の部分から続きの作成をしていく。

Reactの初期の表示からデータベースの作成、取得。

Prismaとは

Node.jsとTypescriptのORM（Object Relational Mapping）のツールの一つ。

Sequelize、TypeORM、Mongooseあたりが強豪。

特徴

Prisma Client ... データベースの型安全なクエリを自動生成。

Prisma Migrate ... マイグレーション。

Prisma Studio ... GUIを用いてデータの確認や編集。

これらのツールもを用いて一連の開発プロセスをサポートされている。

+----------------+     +-------------------+     +------------------+
| Prisma Schema  |     | Prisma Migrate    |     | Prisma Client    |
| - モデル定義   +---->+ - マイグレーション生成 +---->+ - クエリ生成       |
+----------------+     +----------+--------+     +--------+---------+
                                    |                       |
                                    v                       v
                         +----------v--------+     +--------v---------+
                         | データベース更新   |     | アプリケーション開発  |
                         | - スキーマ適用    |     | - クエリ実行        |
                         +----------+--------+     +--------+---------+
                                    |                       |
+----------------+     +------------v----------+  +---------v--------+
| Prisma Studio  |     | テスト / デバッグ      |  | デプロイメント       |
| - データベース管理 |<----+ アプリケーション検証    |  | - アプリケーション本番環境  |
+----------------+     +-----------------------+  | - データベーススキーマ  |
                                                   +------------------+

データベースを扱うアプリケーション開発者の生産性を向上させることを目的に独自の制約や抽象化を行うことによって実現。

参考資料のリンクから詳細確認可能。

Remixでの導入

bun i -D prisma
bun i @prisma/client

デフォルトではPostgreSQL、今回はSqlite。

MySQLでもPostgreSQLでもいいが今回はデータベースは不要なのでSqliteでクイックスタート。

参考資料のドキュメントから他の環境設定を確認できる。

bun prisma init --datasource-provider sqlite

Prismaフォルダとenvファイルを自動作成。

モデル定義

前述だがRemixはMVCのM（Model）の部分は選定が必要。

そこの部分をPrismaを利用していくイメージ。

prisma/schema.prisma

model Todo {
  id        Int      @id @default(autoincrement())
  text      String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  done      Boolean  @default(false)
}

のテーブル作成をアウトプットの作成。

Sqliteではファイルから読み取るので.dbファイルが作成される。

bun prisma db push

もし更新した場合にはdbファイルは変化するためignore対象。

.gitignore

/prisma/dev.db

モックデータ作成

Typescriptがコンパイラでうまく認識してくれないのでJavascriptファイルを利用する。

bun i -D @faker-js/faker ts-node

package.json

  "prisma": {
    "seed": "ts-node prisma/seed.jjs"
  },

prisma/seed.js

import { faker } from "@faker-js/faker";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

async function main() {
  console.log(`Seeding start ...`);

  for (let i = 0; i < 10; i++) {
    const todoText = faker.hacker.phrase();
    await prisma.todo.create({
      data: {
        text: todoText,
        done: faker.datatype.boolean(),
      },
    });
  }

  console.log(`Seeding done !`);
}

main()
  .catch((e) => {
    console.error(e);
    process.exit(1);
  })
  .finally(async () => {
    await prisma.$disconnect();
  });

として実際にデータを挿入。

bun prisma db seed

Running seed command `ts-node prisma/seed.js` ...
Seeding start ...
Seeding done !

🌱  The seed command has been executed.

としてモックデータの作成可能。

bun prisma studio

http://localhost:5555/ にアクセス。

挿入されたデータの確認ができる。