Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話

Avatar for yud0uhu yud0uhu
September 12, 2023
Technology
0
1.3k

Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話

Think ! FrontEnd by DMM #5 の登壇資料です。
https://dmm.connpass.com/event/291641/

Avatar for yud0uhu

yud0uhu

September 12, 2023
Tweet

More Decks by yud0uhu

See All by yud0uhu
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
Avatar for yud0uhu yud0uhu
0
310
早朝の渋谷の青さ、あるいは溺れた人を助ける為に飛び込んだ海の向こう側に見る、自己覚知と自己開示の尊さ
Avatar for yud0uhu yud0uhu
1
750
動画配信サービスのフロントエンド実装に学ぶ設計原則
Avatar for yud0uhu yud0uhu
1
350
非デザイナーのフロントエンドエンジニアがOOUIを考える
Avatar for yud0uhu yud0uhu
9
5.7k
2023年の ゼロランタイムCSS in JS⚡️ を考える
Avatar for yud0uhu yud0uhu
5
5k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
Avatar for yud0uhu yud0uhu
2
3k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
Avatar for yud0uhu yud0uhu
0
1k
Rustでつくって学ぶProtocol Buffers
Avatar for yud0uhu yud0uhu
1
230
ブログを自作した話
Avatar for yud0uhu yud0uhu
1
45

Other Decks in Technology

See All in Technology
Microsoft Agent Frameworkの可観測性
Avatar for tomokusaba tomokusaba
1
120
ルネサンス開発者を育てる 1on1支援AIエージェント
Avatar for Yusuke Shimizu yusukeshimizu
0
120
AWSの新機能をフル活用した「re:Inventエージェント」開発秘話
Avatar for みのるん minorun365
2
520
Oracle Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
2
510
AR Guitar: Expanding Guitar Performance from a Live House to Urban Space
Avatar for Ekito ekito_station
0
270
ECS_EKS以外の選択肢_ROSA入門_.pdf
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
120
Bedrock AgentCore Evaluationsで学ぶLLM as a judge入門
Avatar for ShichijoYuhi shichijoyuhi
2
300
Everything As Code
Avatar for わいわい yosuke_ai
0
400
MySQLのSpatial(GIS)機能をもっと充実させたい ～ MyNA望年会2025LT
Avatar for sakaik sakaik
0
170
2025年の医用画像AI/AI×medical_imaging_in_2025_generated_by_AI
Avatar for YoshihiroTodoroki tdys13
0
230
株式会社ビザスク_AI__Engineering_Summit_Tokyo_2025_登壇資料.pdf
Avatar for VISASQ eikohashiba
1
140
小さく、早く、可能性を多産する。生成AIプロジェクト / prAIrie-dog
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
220

Featured

See All Featured
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
69
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
170
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
7k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
33
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
35k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
110
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
96
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
170

Transcript

  1. Next.js×Prisma×GraphQL×Supabase (+WASM)でブログを⾃作した話 ⼤坂 友

  2. © DMM 自己紹介 • 大坂 友 • 2023年4月新卒入社 • 所属：動画配信開発部プレミアムグループブラウザチーム

    • 出身：北海道 • 趣味：映画鑑賞・旅行・アニメ・趣味開発 etc 2

  3. © DMM 今日お話すること・しないこと お話すること • なぜ自作したのか • 使用技術の紹介 ⭕フロントエンド、BFF、WASM ❌マークダウンパーサーの仕組みについて

    3

  4. © DMM 作ったもの 4

  5. © DMM ブログの機能〜inspired Zenn〜 5 できること ⭕キーワード検索 ⭕タグ検索 ⭕記事の投稿 ⭕GitHubログイン（自分のみ）

    ⭕記事の削除 ⭕ダークモード できないこと ❌アイキャッチの設定 ❌記事の公開予約 ❌画像のアップロード

  6. © DMM 6 つくったもの yud0uhu.work

  7. © DMM 使用技術 7

  8. © DMM 使用技術 8 JSフレームワーク / 言語 Next.js / Type

    Script 状態管理ライブラリ Apollo Client CSSライブラリ styled-components emotion mantine DB Supabase / Vercel postgress デプロイ先 Vercel 認証・認可 NextAuth ドメイン取得 Cloudflare Registrar

  9. © DMM なぜ自作したのか？ 9 　　車輪の再開発が好き • フレームワークは中身がブラックボックスになりがち • 自作すれば、仕組みを理解しながらものづくりができる •

    自作はロマンがある • Rustでマークダウンパーサーを自作して、 WASM+Nuxt3+Viteで動かしてみた • Rustで作るリアルタイムOS

  10. © DMM ライブラリ選定について 10 コードファースト • 言語固有のコードで SDL(schema.prisma)を書いて、 スキーマ定義ファイル (graphql.schema)を生成する方

    法 スキーマファースト • スキーマ定義ファイル (graphql.schema)から SDL(schema.prisma)を生成す る方法

  11. © DMM ライブラリ選定について 11 コードファースト • 言語固有のコードで SDL(schema.prisma)を書いて、 スキーマ定義ファイル (graphql.schema)を生成する方

    法 スキーマファースト • スキーマ定義ファイル (graphql.schema)から SDL(schema.prisma)を生成す る方法

  12. © DMM GraphQLのN+1問題 12 • サーバ実装で発生しがちなパフォーマンス上の課題 • GraphQLの強みは、クライアントが必要なデータのみをリクエスト し、一度に取得できること •

    この特性が原因で、N+1問題が発生する

  13. © DMM GraphQLのN+1問題 13 以下のようなスキーマについて考える

  14. © DMM GraphQLのN+1問題 14 以下のようなスキーマについて考える

  15. © DMM GraphQLのN+1問題 15 以下のようなSQLクエリが発行される

  16. © DMM GraphQLのN+1問題 16 • 1回のリクエストで、全ての作者を取得するクエリ（authors）が実 行される（1回のリクエスト） • 各作者ごとに、その作者が投稿した記事を取得するために個別のク エリpostsが発行される（5回のリクエスト）

    計6回のリクエストが行われる（N+1）

  17. © DMM GraphQLのN+1問題 17 • スケジューラでクエリのバッチ処理を効率化する • キャッシュを活用してデータの再取得を最小限にする • N+1問題を考慮したORMを用いて解決する

    etc

  18. © DMM GraphQLのN+1問題 18 • スケジューラでクエリのバッチ処理を効率化する • キャッシュを活用してデータの再取得を最小限にする • N+1問題を考慮したORMを用いて解決する

    etc

  19. © DMM Prismaについて 19 • Graphqlと高い親和性を持つORM

  20. © DMM Prismaについて 20 • Prismaでは、モデル間のリレーションシップを簡単に定義できる仕 組みが提供されている • Nested reads

    • Eager Loading • 一度のクエリで、全ての作者とそれぞれの作者が投稿した記事の情 報を取得できる • リレーションのネスト構造が深すぎたり、大量のバッチ処理が必要 となった場合は、N+1問題を完全に解決することが難しい

  21. © DMM Pothos（ポトス）について 21 • コードファーストにGraphQLサーバーの開発を行うためのライブラ リ • 元の名前はGiraphQL •

    視認性・検索性の問題から改名された • Prismaと互換性があり、N+1問題の対策を強化することができる

  22. © DMM supabaseについて 22 • Firebase代替として注目されているOSSのBaaS • 以下の機能を提供している • Database

    • PostgreSQLベースのRDB • Authentication • Storage • Edge Functions

  23. © DMM supabaseについて 23 • Free Plan（従量課金なし） • APIリクエストは無制限 •

    500MBまでのデータベース、1GBのファイルストレージが利用 可能 • 最大5GBの帯域幅 • 月間アクティブユーザーは最大50,000人まで • 同時リアルタイム接続の上限は200 • リアルタイムメッセージの上限は最大2,000,000件 • 7日間未利用の場合、サーバの一時停止 • 作成できるプロジェクト数は2つまで

  24. © DMM supabaseについて 24 • Vercel Postgres(hobbby plan)との比較 supabse free

    plan vercel postgres 1ヶ月のAPIリクエスト数 無制限 30,000 1ヶ月のストレージ容量 1GB 256 MB 1ヶ月のデータ転送量 5GB 256 MB 作成できるデータベース数 1 2

  25. © DMM supabaseについて 25 schema.prisma Schema Visualizer

  26. © DMM prisma+supabase所見 26 • 一つの共通言語（SDL）からGraphQLのスキーマ・DBのテーブルが 一気に生成できて、ER図のビジュアル化ができるため開発体験が良 かった • NoSQLのFirerestoreに対して、supabaseはPostgreSQLベースな

    のがうれしい • supabaseはFree planでも、個人開発の素振りに使う分にはほどよ い

  27. © DMM WASMをVercelでビルドする 27 • ビルドツールはwasm-pack を採用 • 静的アセットを生成するバンドラー •

    RustのコードからTypeScriptの型定義コードまでを吐き出 してくれる • 内部でwasm-bindgenを利用して、JavaScriptからRust APIを 呼び出すことができる

  28. © DMM WASMをVercelでビルドする 28 WASMとPrismaのビルドの設定を行う手順 1. npx prisma generateを行うビルドスクリプトを書く 2.

    vercel.jsonでそれを実行するように設定する

  29. © DMM WASMをVercelでビルドする 29 WASMとPrismaのビルドの設定を行う手順 1. npx prisma generateを行うビルドスクリプトを書く 2.

    vercel.jsonでそれを実行するように設定する

  30. © DMM WASMをVercelでビルドする 30 3. Vercelでビルドする

  31. © DMM Appendix 31

  32. © DMM アクセシビリティ対策 32 • Next.jsのHTMLタグに動的にlangを設定する

  33. © DMM アクセシビリティ対策 33 • Next.jsのpagesコンポーネントは、デフォルトで<head>タグと <body>タグを定義してくれる • そのため、_document.jsを作成し、デフォルトのDocumentをオー バーライドしてカスタマイズする

  34. © DMM アクセシビリティ対策 34 • 今回はEmotionとstyled-componentsを使用しているため、以下の ドキュメントを参考にrenderPageのカスタマイズを行う • Routing: Custom

    Document | Next.js

  35. © DMM アクセシビリティ対策 35 スコアが改善された🎉

  36. © DMM ハイドレーションエラー対策 36

  37. © DMM ハイドレーションエラー対策 37 ハイドレーションエラーはなぜ起こるのか • サーバーから事前にレンダリングされたReactツリーと、ブラウ ザーでの最初のレンダリング (Hydration/ハイドレーション) 中に

    レンダリングされたReactツリーの間に違いが生じたため • 今回のケースだと、classNameの不一致 参考記事 • hydrateRoot – React

  38. © DMM ハイドレーションエラー対策 38 ハイドレーションとは • サーバから受け取った「乾いたHTML」に、クライアントサイドの インタラクティブな機能を注ぎ込むこと ハイドレーションエラーとは •

    「サーバから受け取った初期HTML」と「クライアントサイドJSが 予期するHTML」が一致しない場合に起こるエラー 参考記事 • 7歳娘「パパ、ReactのHydration Errorってなんで起こるの？」 - Qiita

  39. © DMM ハイドレーションエラー対策 39 対策：Pre-rendering and Data Fetching | Learn

    Next.js を参考に、 フックを使用してレンダリングのタイミングを意図的に制御

  40. © DMM 40 まとめ 今後やりたいこと • LightHouseのスコア改善 • アプローチ→FirebaseやGoogle Analytics、New

    Relicなどで モニタリング&改善の試作 • 目標→スコアオール100点 • 機能拡張 • プロフィールページの作成など

  41. © DMM ご静聴ありがとうございました🎉