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
690
AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点
Think! Frontend #7 の登壇資料です。
Ken Miyao
December 18, 2024
Tweet
Share
More Decks by Ken Miyao
See All by Ken Miyao
大規模サービス開発のアルバイトで得た学びと成長
eiganken
0
41
Other Decks in Programming
See All in Programming
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
710
コーディングエージェント概観(2025/07)
itsuki_t88
0
440
What's new in Adaptive Android development
fornewid
0
120
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
370
階層化自動テストで開発に機動力を
ickx
1
440
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
650
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
710
Go製CLIツールをnpmで配布するには
syumai
0
760
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
810
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
110
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Making Projects Easy
brettharned
117
6.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
4 Signs Your Business is Dying
shpigford
184
22k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Gamification - CAS2011
davidbonilla
81
5.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
GitHub's CSS Performance
jonrohan
1031
460k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
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