主要コンテンツへスキップ

SvelteKitでPrisma ORMを使用する方法

15分

はじめに​

Prisma ORMはタイプセーフなクエリでデータベースアクセスを簡素化し、SvelteKitと組み合わせることで、堅牢でスケーラブルなフルスタックアーキテクチャを構築できます。

このガイドでは、SvelteKitプロジェクトにPrisma ORMとPrisma Postgresデータベースをゼロから統合する方法を学びます。このガイドの完全な例はGitHubで確認できます。

前提条件​

1. プロジェクトをセットアップする​

npx create svelte@latestの代わりにSvelte CLIを使用します。このCLIは、よりインタラクティブなセットアップと、ESLintやPrettierなどの人気のあるツールへの組み込みサポートを提供します。

新しいSvelteプロジェクトを作成する

npx sv create sveltekit-prisma

セットアップをカスタマイズするように促されます。ここで選択するオプションは次のとおりです。

情報
  • どのテンプレートを使用しますか？ SvelteKit minimal
  • TypeScriptで型チェックを追加しますか？ はい、TypeScript構文を使用します
  • プロジェクトに何を追加しますか？
    • prettier
    • eslint
  • 依存関係のインストールに使用するパッケージマネージャーはどれですか？ npm

セットアップが完了したら、プロジェクトに移動して開発サーバーを起動します

cd sveltekit-prisma
npm run dev

以上です！Svelteは、起動と実行を非常に簡単なプロセスにします。この時点で、プロジェクトはPrismaを統合し、Prisma Postgresデータベースに接続する準備ができています。

2. Prismaのインストールと設定​

2.1. 依存関係のインストール​

Prismaを始めるには、いくつかの依存関係をインストールする必要があります

npm install prisma tsx --save-dev
npm install @prisma/extension-accelerate @prisma/client

インストールが完了したら、プロジェクトでPrismaを初期化します

npx prisma init --db --output src/generated/prisma
情報

Prisma Postgresデータベースをセットアップする際に、いくつかの質問に答える必要があります。お住まいの地域に最も近いリージョンを選択し、「My SvelteKit Project」のような覚えやすいデータベース名を入力してください。

これにより、以下が作成されます

  • schema.prismaファイルを含むprismaディレクトリ。
  • Prisma Postgresデータベース。
  • プロジェクトルートにDATABASE_URLを含む.envファイル。
  • 生成されたPrisma Client用のoutputディレクトリとしてsrc/generated/prisma。

2.2. Prismaスキーマを定義する​

prisma/schema.prismaファイルに、以下のモデルを追加し、ジェネレーターをprisma-clientプロバイダーを使用するように変更します

prisma/schema.prisma
generator client {
  provider = "prisma-client"
  output   = "../src/generated/prisma"
}

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

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  posts Post[]
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  authorId  Int
  author    User    @relation(fields: [authorId], references: [id])
}

これにより、UserとPostの2つのモデルが作成され、それらの間には1対多のリレーションシップがあります。

2.3. Prisma Clientジェネレーターを設定する​

次に、以下のコマンドを実行してデータベーステーブルを作成し、Prisma Clientを生成します

npx prisma migrate dev --name init

2.4. データベースをシードする​

データベースにサンプルユーザーと投稿を投入するために、いくつかのシードデータを追加します。

prisma/ディレクトリにseed.tsという新しいファイルを作成します

prisma/seed.ts
import { PrismaClient, Prisma } from "../src/generated/prisma/client.js";

const prisma = new PrismaClient();

const userData: Prisma.UserCreateInput[] = [
  {
    name: "Alice",
    email: "alice@prisma.io",
    posts: {
      create: [
        {
          title: "Join the Prisma Discord",
          content: "https://pris.ly/discord",
          published: true,
        },
        {
          title: "Prisma on YouTube",
          content: "https://pris.ly/youtube",
        },
      ],
    },
  },
  {
    name: "Bob",
    email: "bob@prisma.io",
    posts: {
      create: [
        {
          title: "Follow Prisma on Twitter",
          content: "https://www.twitter.com/prisma",
          published: true,
        },
      ],
    },
  },
];

export async function main() {
  for (const u of userData) {
    await prisma.user.create({ data: u });
  }
}

main();

次に、package.jsonを更新して、Prismaにこのスクリプトを実行する方法を伝えます

package.json
{
	"name": "sveltekit-prisma",
	"private": true,
	"version": "0.0.1",
	"type": "module",
	"scripts": {
    // ...
	},
  "prisma": {
    "seed": "tsx prisma/seed.ts"
  }
	"devDependencies": {
    // ...
	},
	"dependencies": {
    // ...
	}
}

シードスクリプトを実行する

npx prisma db seed

そしてPrisma Studioを開いてデータを検査します

npx prisma studio

3. PrismaをSvelteKitに統合する​

3.1. Prisma Clientを作成する​

/src/libディレクトリ内で、index.tsをprisma.tsにリネームします。このファイルはPrisma Clientインスタンスを作成およびエクスポートするために使用されます。

ヒント

src/lib内のファイルは、$libエイリアスを使用してどこからでもアクセスできます。

DATABASE_URLは.envファイルに保存されています。これにアクセスするには、$env/static/private名前空間からインポートする必要があります。

Prismaクライアントを次のようにセットアップします

src/lib/prisma.ts
import { PrismaClient } from '../generated/prisma/client.js';
import { DATABASE_URL } from '$env/static/private';
import { withAccelerate } from '@prisma/extension-accelerate';

const prisma = new PrismaClient({
	datasourceUrl: DATABASE_URL
}).$extends(withAccelerate());

export default prisma;

警告

データベース接続を効率的に管理するために、接続プーラー（Prisma Accelerateなど）の使用をお勧めします。

使用しない場合、長期間稼働する環境ではPrismaClientをグローバルにインスタンス化することを避けてください。代わりに、データベース接続を使い果たさないように、リクエストごとにクライアントを作成して破棄してください。

3.2. サーバールートを作成する​

サーバー側でデータベースからデータを取得するには、routesディレクトリに+page.server.tsファイルを作成します。このファイルは、ページがレンダリングされる前にサーバーで実行されるload関数をエクスポートする必要があります。

基本的なload関数内でfindMany()メソッドを使用して、ユーザーのリストを取得します。

+page.server.tsファイルをこのように更新します

src/routes/+page.server.ts
import prisma from '$lib/prisma';

export async function load() {
	const users = await prisma.user.findMany({});
	return {
		users
	};
}

この時点では、Userモデルから直接データが取得されているだけで、投稿などの関連はまだ含まれていません。

各ユーザーの投稿も取得するには、includeオプションを使用してクエリを拡張できます。これにより、Prismaは結果に関連するPostsテーブルを結合するように指示されます。

findMany()呼び出しをこのように更新します

src/routes/+page.server.ts
import prisma from '$lib/prisma';

export async function load() {
	const users = await prisma.user.findMany({
		include: {
			posts: true
		}
	});

	return {
		users
	};
}

これで、結果のすべてのユーザーにposts配列も含まれるようになります。

3.3. ページにデータを投入する​

src/routes/+page.svelteで、ファイルを基本的な構成にし、<script>フラグメントを追加します。ファイルは次のようになります

src/routes/+page.svelte
<script lang="ts">
</script>

<h1>SvelteKit + Prisma</h1>

+page.server.tsからエクスポートされたデータを取得する必要があります

src/routes/+page.svelte
<script lang="ts">
	let { data } = $props();
</script>

<h1>SvelteKit + Prisma</h1>

データが揃ったので、Svelteのeachブロックを使用してユーザーと投稿をマップしてみましょう

src/routes/+page.svelte
<script lang="ts">
	let { data } = $props();
</script>

<h1>SvelteKit + Prisma</h1>

{#each data.users as user}
  <h2>{user.name}</h2>
  {#each user.posts as post}
    <ul>
      <li><a href={post.content}>{post.title}</a></li>
    </ul>
  {/each}
{/each}

完了です！Prisma ORMを使用してSvelteKitアプリを作成しました。以下に、さらに探索するための次のステップと、プロジェクトの拡張を開始するのに役立つその他のリソースを示します。

次のステップ​

Prisma Postgresデータベースに接続されたSvelteKitアプリが動作するようになったので、次のことができます

  • より多くのモデルとリレーションシップでPrismaスキーマを拡張する
  • 作成/更新/削除ルートとフォームを追加する
  • 認証と検証を探求する
  • パフォーマンス向上のため、Prisma Postgresでクエリキャッシングを有効にする

詳細情報​


Prismaとのつながり

Prismaの旅を続けるには、以下とつながりましょう 私たちの活発なコミュニティ。情報を入手し、参加し、他の開発者と協力しましょう

  • Xでフォローする お知らせ、ライブイベント、役立つヒントについて。
  • Discordに参加する 質問したり、コミュニティと話したり、会話を通じて活発なサポートを得たりするために。
  • YouTubeを購読する チュートリアル、デモ、ストリーミングについて。
  • GitHubで交流する リポジトリにスターを付けたり、問題を報告したり、問題に貢献したりすることで。
皆様のご参加を心より歓迎し、コミュニティの一員としてお迎えできることを楽しみにしております！

© . All rights reserved.