ディレクトリ構造
↔ 技術駆動
とは
src/
├ components/ ... 汎用的なコンポーネント
├ consts/ ... 中央管理したい定数群
├ hooks/ ... 汎用的なカスタムフック
├ features/
│ ├ users/ ... ユーザー関連の機能
│ └ posts/ ... 投稿関連の機能
└ libs/
├ auth/ ... ページや操作の許可・不許可
+ └ toast/ ... トースト関連
+ ├ Toast.tsx
+ ├ toastContext.tsx
+ ├ ToastProvider.tsx
+ └ useToast.ts
features/
以下には、ビジネス概念・ページで区切った機能(feature)を配置して、
libs/
以下には、全体を横断して使われる、技術者視点で抜き出した個々の機能(concern)を配置しています。
探しやすくなる
これなら src/ ディレクトリを上から見ていくだけで、関係のあるファイルを一網打尽にして見つけ出すことが出来ます。
トーストに関係するコードを探すときに
トーストの機能は hook と context と component と hook にまたがってるから、それぞれのディレクトリを探したろ!
なんてことを考えるでしょうか?しませんよね?
「トーストについてのコード」なんですから、toast/
という名前のディレクトリにまとめられている方が分かりやすいに決まっています。
小さく分けるのがラクになる
features/, libs/ の各ディレクトリの中に閉じている限りは、コードが散逸しないという安心感があるため、積極的に小さな部品(コンポーネントや関数、カスタムフック)に分けることができます。