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
AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点
Search
Ken Miyao
December 18, 2024
Programming
1
750
AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点
Think! Frontend #7 の登壇資料です。
Ken Miyao
December 18, 2024
Tweet
Share
More Decks by Ken Miyao
See All by Ken Miyao
大規模サービス開発のアルバイトで得た学びと成長
eiganken
0
44
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
120
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
Navigating Dependency Injection with Metro
zacsweers
3
3.5k
AI Agents: How Do They Work and How to Build Them @ Shift 2025
slobodan
0
110
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
OSS開発者という働き方
andpad
5
1.7k
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
350
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
570
Improving my own Ruby thereafter
sisshiki1969
1
160
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Documentation Writing (for coders)
carmenintech
74
5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Context Engineering - Making Every Token Count
addyosmani
3
62
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Statistics for Hackers
jakevdp
799
220k
Done Done
chrislema
185
16k
Transcript
© DMM.com AppRouterを用いた 大規模サービス開発における ディレクトリ構成の変遷と問題点 eiganken 1
© DMM.com 自己紹介 eiganken 動画配信開発部 Webコアサポートグループ 動画サービスのフロントエンド開発をしている
24卒フロントエンドエンジニア アニメ・漫画が趣味 ポケポケ がマイブーム (ポケモンカードスマホゲーム) 2
© DMM.com ターゲット と 目的 AppRouterで大規模サービス開発している際に発生した ディレクトリ構成の問題点を共有する ディレクトリ構成について 考えている方 大規模サービス開発
を行う方 Next.js AppRouter を使う方 3 など
© DMM.com アジェンダ 1. 開発要件と技術選定 2. 開発当初のディレクトリ構成と問題点 3. 変更後のディレクトリ構成と問題点 4.
まとめ 4
© DMM.com アジェンダ 1. 開発要件と技術選定 2. 開発当初のディレクトリ構成と問題点 3. 変更後のディレクトリ構成と問題点 4.
まとめ 5
© DMM.com 大規模サービスの開発について 大規模サービスの 新規開発 ➜ 開発人数 (FE以外も込み) ➜ 50人以上
➜ ページ数 ➜ 約30ページ ✖ クエリパラメータのパターン数 ➜ 現時点でのコンポーネント数 ➜ 100個以上 6
© DMM.com 開発要件について サーバー費用 (サーバー負荷) SEO対策 大規模サービスの 新規開発 解決したいこと 7
© DMM.com 開発要件を考慮した技術選定 サーバー負荷の軽減 Client Side Rendering SEO対策 Server Side
Rendering Next.js App Router 8
© DMM.com Client Side Rendering と Server Side Rendering Client
Side Rendering (CSR) ブラウザ上で計算・レンダリング Server Side Rendering (SSR) サーバー上で計算・レンダリング 9 サーバー負荷を軽減 SEO対策になる
© DMM.com CSR と SSR の切り分け方 CSR SSR UserAgent
による判定 アクセス Google Bot など クローラー 一般ユーザー 10
© DMM.com アジェンダ 1. 開発要件と技術選定 2. 開発当初のディレクトリ構成と問題点 3. 変更後のディレクトリ構成と問題点 4.
まとめ 11
© DMM.com チームでディレクトリ構成を考えるにあたって 1. CSR・SSRの差分をできるだけなくしたい ➜ CSR・SSRさせるコンポーネントをうまく共通化させたい 2. page.tsx
がデータリクエストを行う ➜ コンポーネント単位でリクエストを行わない ➜ まとめてリクエストを行うことで通信回数を減らす 12
© DMM.com 開発当初のディレクトリ構成 共通範囲によってcomponentsやtypesなどを分ける方法 https://dir-maker.netlify.app/ 13
© DMM.com 開発当初のディレクトリ構成で発生した問題点 1. Client / Server Component の切り分け 2.
ルールの非制定による複雑化 14
© DMM.com Client Component と Server Component 15 Client Component
クライアントでレンダリングされる コンポーネント Server Component サーバーでレンダリングされる コンポーネント
© DMM.com 問題点:Client / Server Component の切り分け ➜ Server Component
は Client Component から利用する時は 気をつける必要がある ➜ 正しくBot向け(SSR)にレンダリングされない可能性がある ➜ SEOに影響がでてしまう可能性がでてくる ➜ コンポーネントを追加する際に、常にServerかClientかを意識する必要があり、 コストがかかる 16
© DMM.com 問題点:ルールの非制定による複雑化 ➜ ディレクトリ構造に関する軽いルールだけでもっと細かいルールを制定 しなかった ➜ 開発者がさらに増えると、より複雑性が増す ➜
1ディレクトリ内でばらつきが出てしまう ➜ 依存関係が複雑化してしまい、共通化がしにくくなる 17
© DMM.com アジェンダ 1. 開発要件と技術選定 2. 開発当初のディレクトリ構成と問題点 3. 変更後のディレクトリ構成と問題点 4.
まとめ 18
© DMM.com 改善案:Monorepoによるディレクトリ構成 責務を分類し、Monorepo化によってディレクトリを構成する方針に変更 19
© DMM.com apps packages apps と packages の依存関係について ui infra
domain utils bot user ➔ apps は packages を利用 ➔ packages 内でもそれぞれの 依存関係を制定 20
© DMM.com 改善後のディレクトリ構成で発生した問題点 1. hooksによる Client Component化 2. propsのバケツリレー 21
© DMM.com 問題点:hooksによるClient Component化 ➜ インタラクティブなUIは useState, useEffect を使うため “use
client” が 必要になる ➜ 適当に “use client” を付けると、コンポーネント内全体が Client Component になっ てしまう ➜ Server Component で良い部分も無駄に Client Component になってしまう 22
© DMM.com CSR/SSR共通のUIコンポーネントの適切な管理 ➜ CSR, SSR 共通の UIコンポーネントでは、適切な管理を検討したい 23 イメージ
© DMM.com 問題点:props のバケツリレー ➜ ページで取得した値をバケツリレーでコンポーネントに渡している ➜ 末端の子コンポーネントに必要な props を追加すると、依存しているコン
ポーネントのpropsの修正が必要になる 24
© DMM.com Storesの追加 ➜ 以下を担う stores を追加する ➜ 状態管理 ➜
React Provider 25
© DMM.com アジェンダ 1. 開発要件と技術選定 2. 開発当初のディレクトリ構成と問題点 3. 変更後のディレクトリ構成と問題点 4.
まとめ 26
© DMM.com まとめ ➜ 以下の課題も見えてきたが、 Monorepo化によるディレクトリ 構成・依存関係の整理により複雑にはならなくなった ➜ “use
client” を用いた ClientComponent化や useState, useEffectに関するエ ラーに気を付ける ➜ ページでデータ取得をprops の受け渡しが 状態管理やReact Provider を活用 して複雑性を下げる 上記の問題は改善ができそうなので改善していきたい 💪 27
© DMM.com ご清聴ありがとうございました🙌 懇親会もぜひお楽しみ下さい! 28