Prisma V7へのアップデートから学ぶ設計

React Tokyo Meet Up のLT資料

Transcript

1. React Tokyo LT  VOL. 16 2026.05.15 Prisma V7へのアップデートから学 ぶ設計 そこに意思はあるんか? 01 / 14
2. React Tokyo LT  VOL. 16 SPEAKER Maeta COMPANY 株式会社ココロザシ JOB DESCRIPTION SES事業 社内コミュニティプラットフォームの運用・保守 STACK React、Next.js、TypeScript 、Prisma、Vue.js、Nuxt.js、etc… 02 / 14
3. React Tokyo LT  VOL. 16 社内プラットフォームのアーキテクチャ CLIENT Next.js / React 19 → ORM Prisma V6 → Vercel Neon(PostgreSQL V7の評判があまり良くないのでアップデートして問題ないかも兼ねた PoCを行う 03 / 14
4. React Tokyo LT  VOL. 16 なぜV7は評判が悪いのか？ 01 遅い 公式は3倍早くなったと言っているが遅くなったなどの意見がある 02 大量のバグと安定性 V7リリース当初は大量のバグあり、テストが通らなくなったケースもあった 03 破壊的な変更 設定ファイルの作成やポストインストールフックが削除されたので今まで自動で行っていたものを手動でやる必要が出てきた 04 / 14
5. React Tokyo LT  VOL. 16 いざやってみる 05 / 14
6. React Tokyo LT  VOL. 16 色々設定していざビルド！！ ~/WEB — PNPM BUILD $ pnpm build https://nextjs.org/docs/messages/module-not-found Import trace for requested module: ./src/lib/actions/roadmap.ts ./src/components/roadmap.tsx ./node_modules/.pnpm/pg@8.20.0/node_modules/pg/lib/connection-parameters.js Module not found: Can't resolve 'fs' Module not found: Can't resolve 'dns' Module not found: Can't resolve 'net' 06 / 14
7. React Tokyo LT  VOL. 16 指摘されたファイルは何も変更していない 🤥 07 / 14
8. React Tokyo LT  VOL. 16 AI に聞いてみる Maeta このビルドエラーの原因は何ですか？ AI 問題はインポートチェーンにあります。クライアントコンポーネントからサーバー専用の prisma.ts が間接的にインポートされているた め、Webpack がクライアントバンドルに pg を含めようとしています。 V6 ではバイナリエンジンだったので問題になりませんでしたが、V7 の pg ドライバーは Node.js モジュールに依存するため破綻しま す。 問題の構造が明確です。roadmap.ts には "use server" がなく、定数とDB アクセス関数が混在しています。クライアントコンポーネン トが定数だけ欲しくても、ファイル全体（prisma インポート含む）がバンドルされます。 08 / 14
9. React Tokyo LT  VOL. 16 サーバー使用を目的とした prismaを含んだファイルから定数をクライアントコンポーネントにインポートしていた為、ビルド時にクライアントバンドルに PostgreSQLを含めようとしたけど Node.jsのモジュールを解決できなかったのが原因。 SERVER roadmap.ts CLIENT Roadmap.tsx Client Component) // クライアントコンポーネントにインポートするとビルドが失敗する import { FOO } from "@/src/lib/actions/roadmap" 09 / 14 // サーバー側で使用することを前提としている import { prisma } from "@/lib/clients/prisma" export const FOO = ‘foo’
10. React Tokyo LT  VOL. 16 V7はTypeScript製でサーバー側で動く前提ってことを理解できていたら気 づけたけど、そもそも設計ができていたら起きなかった問題 🤔 10 / 14
11. 用途に合うディレクトリが正しく運用されていない hooksディレクトリがあるのにcomponentsディレクトリ内にカスタムフックがあるなど React Tokyo LT  VOL. 16 個人的設計イマイチポイント 01 色んなファイルから定数や型がエクスポートしてある 例 : 定数はconstantディレクトリ、型はtypesディレクトリに配置 02 曖昧のファイル名 libディレクトリ内にutils.tsが存在し、utilityディレクトリとの境界が不明 03 11 / 14 • 当時設計した人は退職しており、ドキュメントも残っていないのでどう言った意図や考えを持って設計したのかが分からない… • プロダクトとしての設計が明文化されていないので個人の感覚で決まり、個人間で差があるので統制が取れない。
12. React Tokyo LT  VOL. 16 意思を持って設計し、それを残しておくことが大事！ 12 / 14
13. React Tokyo LT  VOL. 16 本日のまとめ 01 RSC を使用する場合はどの境界で使われるものかをルール化する クライアントコンポーネントにimportするとクライアントに含まれる & 露出する。 02 設計したらドキュメント化、ルール化する 自分の意思、考えをドキュメント化することでチームにも伝えることができ、ルール化することでAIにも理解させることができる。 03 振り返りを行う 定期的にどうだったかを振り返ることで改善点を出し次に繋げることができる。 13 / 14
14. React Tokyo LT  VOL. 16 Thank You. ご清聴ありがとうございました。 SPEAKER Maeta 14 / 14