1
/
5

ExpressとPrismaでAPIを作ってみた

はじめに

バックエンドでLaravelを使って画面込みでシステムを作ることが多かったのですが、最近はフロントエンドはVue.js、ReactでバックエンドはAPIのみという案件も増えているのでLaravelに拘らなくてもいいかなと思うこともあり、他のフレームワークを探したところ、フロントエンドで使われるNode.jsやTypeScriptに相性の良さそうなExpressとPrismaがあったので使ってみました。
ExpressはNode.jsで動作するWebフレームワークで、PrismaはNode.jsで動作するORMです。

Prismaを入れる

ではまず、Prismaをインストールして、データベース環境を作っていきます。プロジェクトのディレクトリを作成して中で作業します。

$ mkdir api
$ cd api$ mkdir api
$ cd api

TypeScriptを初期化します。

$ npm init -y
$ npm install typescript ts-node @types/node --save-dev
$ npx tsc --init

Prismaのセットアップをします。

$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite

実行するとprisma/schema.prismaファイルが作成されます。SQLiteになっているのが確認できました。

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
provider = "prisma-client-js"
}

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

次にprisma/schema.prismaファイルへmodelを追加していきます。Userを追加します。

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

マイグレーションを実行します。

$ npx prisma migrate dev --name init
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": SQLite database "dev.db" at "file:./dev.db"

Applying migration `20240511142813_init`

The following migration(s) have been created and applied from new schema changes:

migrations/
└─ 20240511142813_init/
└─ migration.sql

Your database is now in sync with your schema.

Running generate... (Use --skip-generate to skip the generators)

added 1 package, and audited 28 packages in 6s

found 0 vulnerabilities

✔ Generated Prisma Client (v5.13.0) to ./node_modules/@prisma/client in 69ms

migration.sqlというテーブルを作成するSQLファイルが生成されてました。

-- CreateTable
CREATE TABLE "User" (
"id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
"email" TEXT NOT NULL,
"name" TEXT
);

-- CreateIndex
CREATE UNIQUE INDEX "User_email_key" ON "User"("email");

ちなみにその後カラムを追加してマイグレーションを実行した場合は、テーブルとの差分のみのSQLファイルを作成してカラムを変更してくれます!

-- CreateTable
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
address String? // 追加
}
-- AlterTable
ALTER TABLE "User" ADD COLUMN "address" TEXT;

成功したのでUserのテーブルができたはずです。
次はUserにレコードを追加します。PrismaにはGUIでレコードを編集できるツールがあります!便利ですね~

$ npx prisma studio

Userにuser1とuser2を追加しました。データベースの準備はできたので、呼び出すAPIをExpressで作成していきます。

Expressを入れる

Expressをインストールします。

$ npm install express
$ npm install -D @types/express

登録したUserを取得するAPIを書いていきます。
PrismaClientを使うことでデータベースの操作ができるようになります。Userのレコードをすべて取得してレスポンスで返すようにします。

import express from "express";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();
const app = express();
app.use(express.json());
app.use(express.urlencoded({extended: true }));

app.get('/', async (req, res) => {
const users = await prisma.user.findMany();
res.json(users);
})

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});

APIを実行する

nodemonをインストールして書いたAPIが動作するようにpackage.jsonに起動スクリプトのstartを設定します。

$ npm install nodemon --save-dev
"scripts": {
"start": "nodemon --exec ts-node src/index.ts"
},

expressを起動してcurlでAPIの応答を確認してみます。
curlでAPIにアクセスするとUserに追加したレコードが返ってきました!

$ npm start
> api@1.0.0 start
> nodemon --exec ts-node src/index.ts

[nodemon] 3.1.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node src/index.ts`
Server is running on port 3000
$ curl http://localhost:3000/
[{"id":1,"email":"user1@example.com","name":"user1"},{"id":2,"email":"user2@example.com","name":"user2"}]

おわりに

書くコード量も設定も少なくAPIのサーバーを構築することができました。今回Prismaは最低限の取得のみで使用しましたがリレーションなど機能も充実しているので扱いやすいと思います。
同じ言語を使用しているのでフロントエンドをメインまたはバックエンドをメインに仕事をしている人も互いに関わりやすいのではないでしょうか。

記事を読んで興味を持った方はぜひコチラから↓


フロントエンドエンジニア
チームと共にプロジェクトを成功へ導くテクニカルディレクターを募集!!
ロジカルスタジオは、テクノロジーとデザインの視点からクライアントの課題解決をめざす、大阪のクリエイティブプロダクションです。 クライアントの期待を超えて「もっと良くなる、を見つける」のが私たちのスタイル。企画・提案からデザイン制作・システム構築、運用、改善提案をワンストップで行えるのが一番の強みです。近年ではその実績と品質が評価され、案件も急増しています。 代表の古川が掲げる企業理念は「絆を大切に、周りの人を豊かにし、社会に貢献する」。 私たちはこのミッションを推進するため、「新しい技術へのチャレンジ精神」を軸に、「切磋琢磨する仲間」と「働きやすい職場環境」を整え、「成長と可能性を大切にする風土」を育ててきました。 2019年9月に増床し、外部向けのセミナーにも活用できるカンファレンスルームを拡充。スタッフによる公式ブログや、マスコットキャラクター「ロージー&カール」によるTwitterなど、情報発信も強化しています。 可能性の芽をすくい上げられるこの場所を、より大きくしていきたい。 私たちと一緒に、このビジョンを実現しませんか。
株式会社ロジカルスタジオ


システムエンジニア
幅広い業務に携わりたいフリーランスエンジニア募集!!
◼️システムに強いクリエイティブプロダクション  当社は、ソフトウェア開発会社として培った技術力を強みにディレクションからデザイン、システム開発、コーディング、メンテナンスまでワンストップで請け負うクリエイティブプロダクションです。 イラスト・グラフィック・動画制作などのクリエイティブから、データベースが絡むシステム構築まで幅広くカバーできる強みを生かし、さらなる業務拡大を目指しています。
株式会社ロジカルスタジオ


Invitation from 株式会社ロジカルスタジオ
If this story triggered your interest, have a chat with the team?
株式会社ロジカルスタジオ's job postings
6 Likes
6 Likes

Weekly ranking

Show other rankings
Like 松山 俊之's Story
Let 松山 俊之's company know you're interested in their content