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
Feature driven folder structureは何を解決する?
Search
eraser5th
October 15, 2022
Programming
0
390
Feature driven folder structureは何を解決する?
eraser5th
October 15, 2022
Tweet
Share
More Decks by eraser5th
See All by eraser5th
Vanilla-extractで タイプセーフに始める Utility first CSS
eraser5th
0
270
Other Decks in Programming
See All in Programming
AIともっと楽するE2Eテスト
myohei
6
2.6k
Goで作る、開発・CI環境
sin392
0
230
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
120
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
Porting a visionOS App to Android XR
akkeylab
0
460
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.6k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.4k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Practical Orchestrator
shlominoach
189
11k
Automating Front-end Workflow
addyosmani
1370
200k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Done Done
chrislema
184
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Adopting Sorbet at Scale
ufuk
77
9.5k
Designing for humans not robots
tammielis
253
25k
4 Signs Your Business is Dying
shpigford
184
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
Feature driven folder structure は何を解決する? 2023 春大LT 学部 3 年
ERASER (加藤 豪) Press Space for next page
ERASER 加藤 豪 会津大学 学部3年 Twitter, GitHub ポートフォリオ 技術 言語:JS
・TS 、CSS 、HTML 、Lua 、Rust( 簡単な競プロ) 、Haskell( 勉強中) Web フロント:React.js 、Next.js 、GraphQL(Apollo Client) 、CSS-in-JS バックエンド:Node.js 、Prisma(ORM) 、 ツール:Git ・GitHub 、Figma 好きなもの Neovim 、Wezterm 、綺麗なコードを考える Vtuber 、スプラ、EGOIST
前置き 今回のお話はマサカリの飛びやすい分野だと思います。 もし適当なことを言っていたりしたら、シメていただけると泣いて喜びます。
Feature driven folder structure ってなんぞ? 機能駆動のフォルダ構造です(翻訳しただけ)。 src/ └ features/ ├
login/ ├ use-login.ts ├ login-page.tsx └ login-form.tsx ├ ui/ ├ button.tsx ├ card.tsx └ ... └ ... ...
Feature driven folder structure は何を解決する? これが何を解決するのか? それについて考えていくのが今回のお話です。
こんなReact のコードベース、見たことない? よくある、かは知らないが、僕がこれまでよくやっていたReact のコードベース src/ ├ components/ ├ context/ ├
hooks/ ├ pages/ ├ lib/ └ App.ts
こんなReact のコードベース、見たことない? これはアンチパターン「技術駆動パッケージング」 の一例です src/ ├ components/ ├ context/ ├
hooks/ ├ pages/ ├ lib/ └ App.ts
技術駆動パッケージングというアンチパターン
技術駆動パッケージングというアンチパターン 技術駆動のどこが良くないのでしょうか? 先程のディレクトリ構成の内の一部を中身が見えるようにしてみましょう。 src/ ├ components/ ├ login-form.tsx └ ...
├ hooks/ ├ use-login.tsx └ ... └ pages/ ├ login-page.tsx └ ... ...
技術駆動パッケージングというアンチパターン 今度は全体ではなく components の中を見てみます。 今回は簡単と誇張のために components 内部は全てフラットであるものとしました。 ` ` src/
├ components/ ├ button.tsx ├ card.tsx ├ login-form.tsx ├ user-profile-card.tsx └ ... ... ` `
技術駆動パッケージングの問題点 まずはこちらから。 ログインのフックとコンポーネントとページがバラバラの場所にあり、把握がしずらい src/ ├ components/ ├ login-form.tsx └ ...
├ hooks/ ├ use-login.tsx └ ... └ pages/ ├ login-page.tsx └ ... ...
技術駆動パッケージングの問題点 そして次にこちら。 button と login-form が同じレイヤにいるなど、 components の抽象度がバラバラ 用途の全く違う login-form
と user-profile-card が同じパッケージ(ディレクトリ)にいる src/ ├ components/ ├ button.tsx ├ card.tsx ├ login-form.tsx ├ user-profile-card.tsx └ ... ... ` ` ` ` ` ` ` ` ` `
技術駆動パッケージングの問題点 これらの問題を生み出すものの名前なんというか、我々は知っています。 凝集度です。 となると components の凝集度はどれに当たるでしょう? おそらくは最低最悪の偶発的凝集です。 凝集度については説明は省きます(一人大LT になってしまう) `
`
技術駆動パッケージングの改善 技術駆動パッケージングの問題点が、 ある機能の低凝集と、それぞれのディレクトリ内部の偶発的凝集だと分かったので これらを機能的凝集へと改善しましょう
技術駆動パッケージングの改善 段階的にやるのは面倒なので結果をドン! src/ └ features/ ├ login/ ├ use-login.ts ├
login-page.tsx └ login-form.tsx ├ ui/ ├ button.tsx ├ card.tsx └ ... └ ... ...
技術駆動パッケージングの改善 やったことは二つ。 偶発的凝集を起こしていたパッケージ、components ・hooks ・pages を削除 その中身を機能ごとにパッケージング src/ └ features/
├ login/ ├ use-login.ts ├ login-page.tsx └ login-form.tsx ├ ui/ ├ button.tsx ├ card.tsx └ ... └ ... ...
Re: Feature driven folder structure は何を解決する?
最後に
「銀の弾などない」(戒め)
fin ご清聴ありがとうございました!
参考記事 Screaming Architecture - Evolution of a React folder structure
Screaming Architecture