Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
テーブルが200以上あるSaaSでRSCとGraphQLを併用する理由
Search
msickpaler
December 11, 2024
Technology
3
1.7k
テーブルが200以上あるSaaSでRSCとGraphQLを併用する理由
msickpaler
December 11, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
170
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
4
790
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
120
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
240
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
350
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
220
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
440
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
180
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
120
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
180
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
660
Where will it converge?
ibknadedeji
0
210
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
72
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
How STYLIGHT went responsive
nonsquared
100
5.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Making Projects Easy
brettharned
119
6.4k
A Tale of Four Properties
chriscoyier
161
23k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Rails Girls Zürich Keynote
gr2m
95
14k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Transcript
テーブルが200 以上あるSaaS で RSC とGraphQL を併用する理由 by ficilcom 株式会社 msickpaler
自己紹介 現在のポジション ficilcom 株式会社 フロントエンドエンジニア 経歴 フロントエンドエンジニア歴4 年 App Router
をstable release から使っている TypeScript の記事多め 個人開発はRemix
アジェンダ 1. プロダクト紹介 NeX-Ray 2. RSC とGraphQL のおさらい 3. RSC
とGraphQL の併用理由 4. まとめ
NeX-Ray とは あらゆるWeb データをひとつに いろんなメディア情報を一元管理 マーケティングミックスモデリング SaaS での価格モデル ワンクリックでレポート可視化 戦略的なマーケティングを支援
NeX-Ray で頻出する画面
アーキテクチャ
フロントエンドのテックスタック フレームワーク: Next.js(App Router) データフェッチ: GraphQL, Apollo Client RSC とGraphQL
を併用している
前提知識
RSC とは? サーバーで実行されるreact コンポーネント 主な特徴 サーバー側で動作するので同じネットワークやデータセンターでは高速通信できる 一度しかレンダリングされないのでパフォーマンスが良い GraphQL とは? クエリ言語の一種で、必要なデータを1
回のリクエストで取得できる 主な特徴 一度で必要なデータを取得できる 一度GraphQL のスキーマを作ってしまえば、API の変更無しでフロントエンド側で取得するデータを選べる
NeX-Ray の例を紹介していく
NeX-Ray の技術的課題 初期リリース時にテーブル数200 超え(今後も増え続ける) メンテが大変 BtoB SaaS なので会社ごとのセキュリティ担保や権限管理が必要 テナント分離 権限管理
膨大なテーブルのカラム数 MAX 300 カラム超えのテーブルもある
GraphQL の採用理由 スタートアップで200 テーブルを素直に扱うのはメンテコストが高すぎる BtoB SaaS ではテナント分離が重要なのでRLS が必須 カラムの取捨選択をしないと300 カラムすべてを取得することになる
RLS(Row-Level Security) を利用しながらDB スキーマから自動的にGraphQL のAPI を生成できるPostGraphile は 唯一無二の選択肢だった つまりGraphQL の利用はサーバーサイド都合で不可欠だった。 よって、GraphQL 採用は確定
PostGraphile の例 const app = express(); app.use(postgraphile(DATABASE_URL, schemaName)); app.listen(4000);
PostGraphile のデメリット 自動生成故に間にロジックを差し込みにくい NeX-Ray の場合だと、権限やサブスクリプション情報などで条件分岐する場合に実装が面倒くさい
RSC の採用理由 NeX-Ray での活用方法 権限管理ロジック 連携している媒体のアカウントごとのview / edit / admin
権限の制御 組織のグループやユーザーごとのview / edit / admin 権限の制御 サブスクリプションごとの権限の制御 メトリクスの計算ロジック 期間ごとに見たいデータを表示する クリック率, コンバージョン率, インプレッション単価, 成約単価, クリック単価, 予算達成率 …etc. 権限管理をRSC で実行することでPostGraphile のデメリットを補っている
まとめ: RSC とGraphQL の併用した結果 GraphQL(PostGraphile) RLS によるテナント管理のセキュリティ担保 自動生成されたAPI エンドポイント 広告モデルとの相性の良さ
RSC 権限管理をサーバーサイドで行うことでセキュリティ向上 計算をサーバーサイドで行うことでパフォーマンス向上 Nex-Ray では、GraphQL とRSC を適材適所に活用し、併用することで快適な開発 環境を実現できている