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
670
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
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
110
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
220
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
560
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
240
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
390
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
220
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
200
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
280
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Six Lessons from altMBA
skipperchong
28
3.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
220
Building Applications with DynamoDB
mza
95
6.5k
Site-Speed That Sticks
csswizardry
10
660
Optimizing for Happiness
mojombo
379
70k
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