Zenn
Open10

オレオレwebアプリ開発

Next.js
Storybook
Prisma
OpenAPI
torohashtorohash

Prisma

ORM。
マイグレーションもいける。
後述するsupabaseもマイグレーションの機能あるけど、個人的にはprismaでやるほうがイケてる感じになりそう

ER図の作成

prisma-erd-generatorでいける。
参考にした記事
https://zenn.dev/terrierscript/articles/2022-03-25-prisma-er-mermaid
DB定義とapi側の実装のスキーマを共通化して利用できるので熱い

torohashtorohash

Openapi

想定した開発フローは以下のような感じ

  • openapiの定義を修正
  • 型を再生成
  • 型不整合となった部分を修正

openapi-typescript

型ファイルを吐き出してもらう。
吐き出してもらった型ファイルを元にapiとclientの開発。

axiosをいい感じにする記事
https://zenn.dev/sum0/articles/8e903ed05ba681
type-festからGETがなくなったようなので、その部分の修正が必要そう。

torohashtorohash

supabase

自前でDBを持つかで迷ったけどsupabaseを使うことにした。
cloud runでデプロイしたいと考えており、その場合DBを時前で持つのは厳しいとなりsaasを使おうとなった。
catnose氏のしずかなインターネットの技術構成記事より、Planet Scale使おうと考えていたけれど、どうも無料プランが無くなったらしく、コスト的に厳しい
https://zenn.dev/catnose99/articles/f8a90a1616dfb3

色々悩んだ結果supabaseを採用することに。

supabase cli

docker in dockerでの運用を一瞬考えたりしたのだけど、自分の技術力だと運用で厳しい思いをしそうな気がしており、ホストマシンにsupabase cliを導入する形とした。

supabase start

で立ち上げたDBを開発用として進めていく気持ち。

torohashtorohash

Redoc

個人的にドキュメントは以下3点セットを自動で作りたい（メンテ大変だし、面倒くさいので）

  • ER図
  • API仕様
  • 画面見た目

ER図についてはprismaで対応したので、API仕様はRedocで対応という形にした。
Next.jsで/docsから確認できるように実装。publicにopenapiを置くとなると色々厳しいため、apiから取れるように。
openapiはファイル分割したので、json化する際にはbundle化する必要があった。
そのため取り急ぎこんな感じで実装した。

import { NextRequest, NextResponse } from 'next/server';
import SwaggerParser from '@apidevtools/swagger-parser'

export async function GET(req: NextRequest) {
  const openapi = await SwaggerParser.bundle('openapi/index.yaml', )
  return NextResponse.json(openapi);
}
torohashtorohash

bun

https://www.youtube.com/watch?v=phs29nU35OQ

友人に教えてもらった上記動画で使ってみたいなぁとなり使ってみた。かなり良い
tsファイルをそのまま実行できたりするし、とにかく速い、すごい。
testもいけるらしいので試していきたい所存です。