Next.js 15 Fullstack Web Apps · レッスン

Prisma ClientによるCRUD操作

型安全なPrisma Clientを使用して、作成、読み取り、更新、削除の操作を実行します。

「Prisma ClientによるCRUD操作」はCoddyKit上の無料Next.js 15 Fullstack Web Appsレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはNext.js 15 Fullstack Web Apps学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Next.js 15 Fullstack Web Appsコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Intro to CRUD with Prisma

Welcome! In this lesson, we'll master CRUD operations using Prisma Client. CRUD stands for Create, Read, Update, and Delete – the four fundamental operations for interacting with any database.

Prisma Client provides a type-safe and intuitive way to perform these actions, making your database interactions efficient and less error-prone.

Instantiating Prisma Client

Before performing any database operations, you need to instantiate the Prisma Client. This client is automatically generated based on your schema.prisma file and connects your application to the database.

You'll typically do this once in your application's entry point or a dedicated database module.

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

async function main() {
  console.log('Prisma Client initialized!');
  // Database operations go here
}

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

Create: Adding New Data

The Create operation adds new records to your database. With Prisma, you use the create method on a model to insert data.

Specify the model (e.g., prisma.user).
Provide the data for the new record in the data object.
Prisma handles the SQL insertion for you!

Remember, this assumes you have a User model defined in your schema.prisma.

Create: Adding a User Record

Let's create a new User record. Notice how Prisma Client provides autocompletion for fields like email and name, ensuring type safety.

Run this example to see a new user being added.

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

async function main() {
  console.log('Creating a new user...');
  const newUser = await prisma.user.create({
    data: {
      email: 'alice@example.com',
      name: 'Alice Smith',
    },
  });
  console.log('Created user:', newUser.name, 'with ID:', newUser.id);
}

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

Read: Fetching Multiple Records

The Read operation retrieves data. To fetch multiple records, use the findMany method. You can filter results using the where clause, order them with orderBy, or limit them with take.

For example, prisma.user.findMany({ where: { name: 'Alice Smith' } }) would find all users named Alice Smith.

Read: Fetching Single Records

To fetch a single, unique record, use findUnique. This method requires a unique identifier (like an @id or @unique field in your schema) to ensure only one record is returned.

If you need to find the first record matching a non-unique condition, use findFirst. It returns null if no record is found.

Read: Users from the Database

Let's fetch all users and then find a specific user by their email using findUnique. This demonstrates how to retrieve both lists and individual items.

Run the code to see the results of these queries.

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

async function main() {
  console.log('Fetching all users...');
  const allUsers = await prisma.user.findMany();
  console.log('All users:', allUsers.map(u => u.name).join(', '));

  console.log('Finding user by unique email...');
  const alice = await prisma.user.findUnique({
    where: {
      email: 'alice@example.com',
    },
  });
  if (alice) {
    console.log('Found Alice:', alice.name);
  } else {
    console.log('Alice not found.');
  }
}

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

Update: Modifying Existing Data

The Update operation changes existing records. The update method requires two main parts:

A where clause to identify the record(s) to update.
A data object containing the fields and new values to set.

Always ensure your where clause is specific enough to avoid unintended updates!

Update: Changing a User's Name

We'll update the user 'Alice Smith' to 'Alicia Wonderland'. Notice how we target the user with their unique email and then provide the new name.

After running, you can try fetching Alice again to see the updated name.

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

async function main() {
  console.log('Updating user Alice Smith...');
  const updatedUser = await prisma.user.update({
    where: {
      email: 'alice@example.com',
    },
    data: {
      name: 'Alicia Wonderland',
    },
  });
  console.log('Updated user:', updatedUser.email, 'now named:', updatedUser.name);
}

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

Delete: Removing Data

Finally, the Delete operation removes records from your database. The delete method, like update, requires a where clause to specify which record(s) to remove.

Be cautious with delete operations, as they are permanent! Always double-check your where condition.

CRUD Operations Check

Which Prisma Client method would you use to remove a specific user record from the database?

Recap: CRUD with Prisma

Great job! You've learned the core of database interaction using Prisma Client.

Create (C): Use prisma.model.create() to add new records.
Read (R): Use prisma.model.findMany() for lists, findUnique() or findFirst() for single records.
Update (U): Use prisma.model.update() to modify existing records.
Delete (D): Use prisma.model.delete() to remove records.

Prisma's type safety and intuitive API make these essential operations straightforward and robust in your Next.js applications.

よくある質問

「Prisma ClientによるCRUD操作」レッスンは無料ですか？

はい。「Prisma ClientによるCRUD操作」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Next.js 15 Fullstack Web Appsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Next.js 15 Fullstack Web Appsコースには全4レッスンが含まれています。

「Prisma ClientによるCRUD操作」で何を学びますか？

型安全なPrisma Clientを使用して、作成、読み取り、更新、削除の操作を実行します。ブラウザで直接実行するハンズオンコードでNext.js 15 Fullstack Web Appsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Next.js 15 Fullstack Web Appsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのNext.js 15 Fullstack Web Appsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「Prisma ClientによるCRUD操作」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このNext.js 15 Fullstack Web Appsレッスンでコードを書いて実行できますか？

はい。すべてのNext.js 15 Fullstack Web Appsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Next.js 15 Fullstack Web Appsに戻る