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
550
AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点
Think! Frontend #7 の登壇資料です。
Ken Miyao
December 18, 2024
Tweet
Share
More Decks by Ken Miyao
See All by Ken Miyao
大規模サービス開発のアルバイトで得た学びと成長
eiganken
0
37
Other Decks in Programming
See All in Programming
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.5k
CloudRun, Spanner に対する負荷試験の反省と オブザーバビリティによるアプローチ
oyasumipants
1
210
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
270
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
190
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
130
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.2k
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
150
AIレビュー導入によるCIツールとの共存と最適化
kamo26sima
1
1.2k
Better Code Design in PHP
afilina
0
190
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
340
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
170
やっと腹落ち「スプリント毎に動くモノをリリースする」〜ゼロから始めるメガバンクグループのアジャイル実践〜
sasakendayo
0
250
Featured
See All Featured
Facilitating Awesome Meetings
lara
53
6.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
GitHub's CSS Performance
jonrohan
1030
460k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
YesSQL, Process and Tooling at Scale
rocio
172
14k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
It's Worth the Effort
3n
184
28k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building Your Own Lightsaber
phodgson
104
6.3k
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