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.2k

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

Other Decks in Technology

See All in Technology
「どこから読む？」コードとカルチャーに最速で馴染むための実践ガイド
Avatar for ZOZO Developers zozotech
PRO
0
570
現場で効くClaude Code ─ 最新動向と企業導入
Avatar for TakaakiKakei takaakikakei
1
260
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
Avatar for AEON aeonpeople
0
270
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
8.8k
Automating Web Accessibility Testing with AI Agents
Avatar for South maminami373
0
1.3k
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの？
Avatar for Makky12 smt7174
4
190
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
Avatar for ヤマダ（北野） yamada_r
2
120
Snowflake Intelligenceにはこうやって立ち向かう！クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
Avatar for harry gappy50
0
280
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
Avatar for sh_fk2 sh_fk2
3
280
なぜテストマネージャの視点が 必要なのか？ 〜 一歩先へ進むために 〜
Avatar for Sammy(MoritaMasami) moritamasami
0
240
5分でカオスエンジニアリングを分かった気になろう
Avatar for Aja9tochin pandayumi
0
260
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
Avatar for sh_fk2 sh_fk2
3
460

Featured

See All Featured
Navigating Team Friction
Avatar for Lara Hogan lara
189
15k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.4k
Code Review Best Practice
Avatar for Trisha Gee trishagee
71
19k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
131
19k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
6k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k

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 ご静聴ありがとうございました🎉