Zenn
🐼

faker.jsを使用して、ダミーデータを自動投入してみる

2023/12/01に公開
JavaScript
React
初心者
Prisma
faker
tech

経緯

faker.jsは大量のダミーデータを生成できるJavaScriptライブラリです。
テスト用にデータを手作成するには時間がかかり、しかも手作成のデータでは似たようなデータが多くなってしまうなど信頼性が欠けてしまいます。
ダミーデータ作成ライブラリを使うことで、実際のデータに近い値を作成することができ、自動で作成してくれるため開発効率を上げてくれるので、今後の開発では使用することとなりそうです。
https://fakerjs.dev/

概要

前回の記事では、seed.tsを使用して、作成したテーブルにデータを投入しました。
今回はfaker.jsを使用して、テスト用のダミーデータを生成してみようと思います。
https://zenn.dev/ayano_sakai/articles/df855bccebc36b

やってみる

ディレクトリ構成について

今回作成するファイル、前回記事で作成・修正するファイルについてです。

.
├── Docker-compose.yml
├── Dockerfile
・・・
├── app
・・・
├── fakes <--　新規生成
│   ├── user.ts <--　新規生成
│   └── utils <--　新規生成
│       └── faker.ts <--　新規生成
・・・
├── prisma
│   ├── dev
│   │   └── seed.ts <--　前回記事で作成したものを変更
│   ├── migrations
│   │   ├── 20231018011646_init
│   │   │   └── migration.sql
│   │   └── migration_lock.toml
│   └──  schema.prisma　<--　前回記事で作成したものを使用
├── public
│   ├── next.svg
│   └── vercel.svg
├── tailwind.config.ts
└── tsconfig.json

1. faker.jsをインストール

pnpm install @faker-js/faker --save-dev

2. Dockerコンテナを起動

以下コマンドで、Dockerコンテナを起動
※Dockerについては前に記事に記載したので参照ください。記事はこちら。

docker compose up -d

3. schema.prismaの設定

前回の記事のまま使用します

prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

// add start
model User {
  id           String    @id @default(uuid())
  username     String? 
  email        String?   @unique
  password     String
  createdAt    DateTime  @default(now()) @map("created_at")
  updatedAt    DateTime  @updatedAt @map("updated_at")
}

4. fakerJAモジュールをインポート

faker-jsパッケージ自体は多言語のテキストを生成するためのライブラリなので、日本語のテキストを生成する場合、fakerJAモジュールをインポートして、使用します。

fakes/utils/faker.ts
import { fakerJA } from '@faker-js/faker'

export const faker = fakerJA

5. ダミーデータの設定

公式ページを参考に以下のように、「schema.prisma」に設定したカラムに投入したいデータを設定します。

fakes/user
// import { faker } from '@faker-js/faker' // 多言語のテキストを使用する場合
import { faker } from './utils/faker'　// 日本語のモジュールを使用する場合
import { User } from '@prisma/client'

type FakeUserProps = {
  id?: string
}
export const fakeUser = (props?: FakeUserProps) => {
  const result: User = {
    id: props?.id ?? faker.string.uuid(),
    username: faker.person.fullName(),
    email: faker.internet.email(),
    password: faker.string.alphanumeric({length: 7, casing: 'mixed'}),
    createdAt: faker.date.between({ from: '2020-01-01T00:00:00.000Z', to: '2030-01-01T00:00:00.000Z' }),
    updatedAt: faker.date.between({ from: '2020-01-01T00:00:00.000Z', to: '2030-01-01T00:00:00.000Z' })
  }

  return result
}

6. seed.tsの設定

  • 前回の記事では手作成のデータを記載していましたが、今回は以下のように変更し、faker.jsを呼び出す処理にしました。
  • Array(10)と設定することで、10件のレコードを作成します。
seed.ts
import { PrismaClient } from '@prisma/client'
import { Prisma } from '@prisma/client'
import { fakeUser } from '../../fakes/user'

const prisma = new PrismaClient()

const main = async () => {
    await prisma.user.createMany({
      data: [...Array(10)].map(() => fakeUser()),
    })
  }
  • createManyは、Prismaが発行してくれるクエリです。
  • dataには、createManyで使用するプロパティ定義が設定されています。(Prismaの自動生成)
    ※以下「index.d.ts」の抜粋
index.d.ts
  createMany<T extends UserCreateManyArgs<ExtArgs>>(
      args?: SelectSubset<T, UserCreateManyArgs<ExtArgs>>
  ): Prisma.PrismaPromise<BatchPayload>

  export type UserCreateManyArgs<ExtArgs extends $Extensions.InternalArgs = $Extensions.DefaultArgs> = {
    /**
     * The data used to create many Users.
     */
    data: UserCreateManyInput | UserCreateManyInput[]
    skipDuplicates?: boolean
  }

  export type UserCreateManyInput = {
    id?: string
    username?: string | null
    email?: string | null
    password: string
    createdAt?: Date | string
    updatedAt?: Date | string
  }

7. 実行してみる

// マイグレーションリセット（開発時は一旦リセットしてから実行）
pnpm prisma migrate reset
// マイグレーション実行
pnpm prisma migrate dev

テーブルに10レコードのダミーデータが作成できていることを確認

おわりに

faker.jsの使い方は今回は単純なものでしたが、多岐にわたる使用方法があるようです。
ランダムに設定する値を絞ってみたり、あるカラムは一定の値を設定したり、リレーション設定のある複数テーブルの設定などなど、、今後も使用していく事となるので勉強します。

参考

https://fakerjs.dev/api/faker.html

Discussion