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
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
800
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
140
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.4k
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
120
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
330
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Statistics for Hackers
jakevdp
799
220k
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