フロントエンドエンジニアがバックエンド側を用意する方法
フロントエンドエンジニアにおける永続層(DB層)の話
例えばフロントエンド開発するときにサーバーサイドも欲しいときCRUD処理ができるものをどうやって用意するのか
モックサーバーを使ったりYoutubeなどの既存APIでフロントの描画を確認してるがちゃんとしたサービスだとDBを用意して更新や保存できる部分まで必要になる
もし趣味でフロントエンジニアがフロントからバックエンドまでのアプリを作りたいときどういったものを使うのか?
ターゲット
Web開発の入り口がフロントでずっとフロントのみをやってるエンジニア
バックエンドの開発経験、知見のないフロントエンジニアがどうやってバックエンド環境を用意するか
フロントエンジニアでもLaravelやRailsなど使ってAPI部分だけ利用するとかドキュメントを読んだり勉強すれば習得できるけどできればフロント部分メインで書きたいってなるとそこに学習コスト割くモチベーション低下してやらなくなるパターンもある
サーバーサイドでJavaScript(TypeScript)を使うパターン
APIを作る言語をフロントと同じ言語にする
古くではMEANスタックというフルスタックJSで作る構成などがあった
https://gyazo.com/5adf7eb1d3b2d588369f1bdd0944c4e1
今でもAngularの部分をReactなど、少し変えた構成はよくみる
例
Express.js + MongoDB(mongoose)
mongooseというMongoDBのORMを使う
別にNodeでもMySQLとかのRDBMSも使えるけどSQL文ゴリゴリ描くよりはORMとかある方が毎回調べるよりは便利
モデル作成
code:model.js
const mongoose =require('mongoose');
const TaskSchema = new mongoose.Schema({
name: {
type: String,
required: true,
},
Created_date: {
type: Date,
default: Date.now
}
});
var Task = mongoose.model("Task", TaskSchema);
module.exports= Task;
コントローラー作成
code:controller.js
const Task = require('./models/task');
~~~
~~~
app.post('/task', (req, res) => {
const task = new Task(req.body)
task.save().then(() => {
res.status(201).send(task)
}).catch((e) => {
res.status(400).send(e)
})
})
Express以外では以下のようなものもあるっぽい
koa.js
2016年ごろ登場
expressの作者が開発した
expressより早い
チュートリアルの実装を見た感じmongooseと組み合わせた実装はそんなに違いはなさそう
code:javascript
var koa = require('koa');
var _ = require('koa-router')();
var app = koa();
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/my_db');
var personSchema = mongoose.Schema({
name: String,
age: Number,
nationality: String
});
var Person = mongoose.model("Person", personSchema);
_.post('/person', createPerson);
function *createPerson(next){
var self = this;
var personInfo = self.request.body; //Get the parsed information
if(!personInfo.name || !personInfo.age || !personInfo.nationality){
self.render(
'show_message', {message: "Sorry, you provided wrong info", type: "error"});
} else {
var newPerson = new Person({
name: personInfo.name,
age: personInfo.age,
nationality: personInfo.nationality
});
yield newPerson.save(function(err, res) {
if(err)
self.render('show_message',
{message: "Database error", type: "error"});
else
self.render('show_message',
{message: "New person added", type: "success", person: personInfo});
});
}
}
app.use(_.routes());
app.listen(3000);
Fastify
こちらも非同期処理ができる
各フレームワークの中では一番パフォーマンスがいいらしい
上記の中でどうしてもRDB使いたい!けどORMも使いたい!という場合以下の方法がある
Next.jsとORMを使うパターン
Next.jsにはAPi RoutesというAPIを作成できる方法がある
この機能とPrismaというORMを利用する
Prismaとは
TypeScriptと相性のいい型安全なORM
ORM経由でRDBが使える
https://gyazo.com/537e5a6bec63660f238d5d31f1ad74a2
スキーマ定義
code:prisma.schema
model Post {
id Int @default(autoincrement()) @id
title String
content String?
published Boolean @default(false)
author User? @relation(fields: authorId, references: id) authorId Int?
}
Prismaクライアントのインスタンス生成
code:prisma.ts
import { PrismaClient } from '@prisma/client';
let prisma: PrismaClient;
if (process.env.NODE_ENV === 'production') {
prisma = new PrismaClient();
} else {
if (!global.prisma) {
global.prisma = new PrismaClient();
}
prisma = global.prisma;
}
export default prisma;
Prismaクライアント経由でデータ更新
code:pages/api/post/index.ts
import { getSession } from 'next-auth/client';
import prisma from '../../../lib/prisma';
// POST /api/post
// Required fields in body: title
// Optional fields in body: content
export default async function handle(req, res) {
const { title, content } = req.body;
const session = await getSession({ req });
const result = await prisma.post.create({
data: {
title: title,
content: content,
author: { connect: { email: session?.user?.email } },
},
});
res.json(result);
}
https://gyazo.com/386d145f3e3680cc49317d2ace15a875
良い感じに型推論してくれて便利
上記のコードはVercel公式のNext + Prisma + postgresチュートリアル
NuxtだとAPiルートの機能がないので、現状Express などでやるしかなさそうだった
serverMiddleware使えばAPIルートっぽいものも作れるっぽい
BaaS(backend as a Service)を使うパターン
サービス上でデータベース作成し、データベースの情報の取得、更新などもサービス上で用意したAPI経由で行える
バックエンド実装のコードが不要なためサービスの使い方を覚えればバックエンド環境が構築できる
Firebase
サービス上で使ってるものはNoSQL
バックエンドサービス以外にも認証やホスティングなどもあってサービスが充実してて便利
無料枠がある
Firestore または Realtime Databaseがある
それぞれでデータ構造などが異なる
Realtime Database
シンプルなでかいJSONのツリー
code:json
{
"users": {
"alovelace": {
"name": "Ada Lovelace",
"contacts": { "ghopper": true },
},
"ghopper": { ... },
"eclarke": { ... }
}
"comment": {
"comment1": {
"name": "alovelace",
"comment": "comment"
},
"comment2": { ... },
}
}
データ検索が弱い(複数絞り込みできない)
データの一括更新には強い
Firestore
コレクションとドキュメント
realtime databaseと違い複雑な条件で絞り込みができる
Firebaseの代替として以下のサービスもヒットした
Firebaseよりは機能が少ないが以下が揃っている
Database
Authentication
Storage
Functions
下記の記事によると以下の点がFirebaseと異なるらしい
Firebaseとの一番の大きな違いは、Firebaseが NoSQL に対して、Supabaseは PostgreSQL を選択している点です。
上記以外にも「こういうの知ってるよ!使ってるよ!」みたいなのがあれば書いて行ってもらえると嬉しい
GraphQL
AppSync
まとめ
普段フロントエンドで使い慣れてるJSやTSでバックエンドもかける
コードを書かずにサービスを使って用意する方法もある
各自自分にあったいい感じのやり方で色々作って欲しい