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
フロントエンドのディレクトリ設計思想
Search
teppeita
October 16, 2023
Programming
26
34k
フロントエンドのディレクトリ設計思想
teppeita
October 16, 2023
Tweet
Share
More Decks by teppeita
See All by teppeita
React Nativeで運用しているアプリにExpoを導入する - 計画編 -
teppeita
0
130
GraphQLの社内ドキュメントを作った話
teppeita
0
290
Other Decks in Programming
See All in Programming
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
GPUを計算資源として使おう!
primenumber
1
310
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
250
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
230
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
320
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
690
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
5
1.7k
Vibe coding コードレビュー
kinopeee
0
380
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
690
新世界の理解
koriym
0
110
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
4
540
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
1
870
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
It's Worth the Effort
3n
185
28k
Gamification - CAS2011
davidbonilla
81
5.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Six Lessons from altMBA
skipperchong
28
3.9k
RailsConf 2023
tenderlove
30
1.2k
Code Reviewing Like a Champion
maltzj
524
40k
Transcript
フロントエンドのディレクトリ設計思想 2023-10-11 ハッカー鮨 竹尾哲平(@_teppeita)
自己紹介 Index 1 ディレクトリについて 2 設計思想 3 マイベストの方針 4 まとめ
5
竹尾 哲平(@_teppeita) takeo teppei フロントエンドエンジニア デザインシステムとGraphQLに関心が有ります。 画像 自己紹介
ディレクトリ構成 どうしていますか? 画像 https://tabelog.com/tokyo/A1302/A130204/13018162/
ディレクトリ構成 どう考えるのが良いと思いますか? 画像 https://tabelog.com/tokyo/A1302/A130204/13018162/
どれを選びますか? フロントエンド界隈を見ると 世の中にはいろんなパターンが出回っています Atomic Design Features Directory App Directory Clean
Architecture Container / Presenter
アーキテクチャ全般の話から考えてみましょう 概念的な話として 設計思想:どう分けるか
どう分けるか、を キャッチーに命名 Layer型 Feature型
MVCとかも分類できますが、割愛します 先ほどあげた よくあるパターンを分類 Layer型 Feature型 Atomic Design Features Directory App
Directory Clean Architecture Container / Presenter (Micro Frontends)
よくあるパターンの導入理由や失敗事例を見ると分かりやすいです 分類ごとの Pros / Cons Layer型 Feature型 Pros ・処理の共通化がしや すい
Cons ・階層分けが難しい ・依存の管理が難しい Pros ・ドメインごとに疎結合 & 高凝集にできる Cons ・境界の定義が難しい ・処理の重複が発生
少し視点を変えて
Layer型・Feature型と似てますね 組織で考えてみると 機能別組織と事業部制組織が有ります
つまり、組み合わせて構成する 組織の場合 組織の構造は、ハイブリッドに帰結する 「共通の事業目的を持つすべての大組織は、最後にはハイブリッド組織形態に落ち着くことになる」 アンドリュー・S・グローブ. 『ハイアウトプットマネジメント』 .日経BP.2017
コンウェイの法則に従えば、 システムもハイブリッドが良い? →組み合わせ方を考える。
先ほどの Pros / Cons を再確認 Layer型 Feature型 Pros ・処理の共通化がしや すい
Cons ・階層分けが難しい ・依存の管理が難しい Pros ・ドメインごとに疎結合 & 高凝集にできる Cons ・境界の定義が難しい ・処理の重複が発生
どう組み合わせるか マイベストの方針 Layer型 Feature型 Pros ・処理の共通化がしや すい →Componentsに適用 Pros ・ドメインごとに疎結合・
高凝集にできる →Pagesに適用
Layer型を適用 Componentsディレクトリ Layer型 Pros ・処理の共通化がしや すい →Componentsに適用 ・デザインシステム構築中 ・Atomic Designをベースに議論して、独
自にカスタマイズした階層 (詳細話したいですが、今回は割愛) ・処理を共通化して複数箇所で扱いや すい
Feature型を適用 Pagesディレクトリ Feature型 Pros ・ドメインごとに疎結合・ 高凝集にできる →Pagesに適用 ・Next.jsのルーティングに合わせて機 能をまとめる ・App
Directoryに倣ってコロケーショ ン (pageExtensions optionを利用) ・境界の定義が明確で迷わない
※分かりやすさのために実際よりも簡略化しています マイベストの ディレクトリ全体像
まとめ ディレクトリ設計思想は 01 Layer型とFeature型 に分類できそう 02 2つの型の 組み合わせ を考える 03
マイベストでは componentsと pagesで組み合わせ