前提

Angular v15.x
- standalone をベースにする
状態管理に ngrx/component-store

アプリケーションの第 1 階層

src/app/
├── app.component.html
├── app.component.scss
├── app.component.spec.ts
├── app.component.ts
├── core
├── domain
├── features
├── infrastructures
├── routes.ts
└── shared

core
- アプリケーションに必要な初期化処理などを置く
- 例えば、必ず必要なユーザー情報の管理や必ず表示する Header component など
domain
- 型情報を管理する
- バリューオブジェクトを作るならここに置く(が、あまり必要としたことはない)
features
- feature ごとにこの下にディレクトリをつくる
- 例えば Tour of Heros なら dashboard, hero-detail, heros で分けるイメージ
infrastructures
- 外部とやりとりをするための処理を置く
- api call をするためのファイルを置く api/ を用意したりする
shared
- 複数の feature が必要とする処理やコンポーネントを置く

kasaharu

features/ の詳細

src/app/features/xxxx/
├── containers
├── pages
├── routes.ts
└── views

pages
- routing で表示する component を配置する
- 1 ページに 1 つ
- もし URL の情報から管理したい状態がある場合は page component 用に component-store を用意し、ここに置く
- template にはそこに表示する container を配置するだけになるのでスタイルファイルはなし
views
- UI を作るための component を配置する
- スタイルを管理
- 画面に表示するためのデータは基本的に @Input() で受け取る
containers
- usecase, store およびそことやり取りをする component を管理する
- ここでいう store は component-store となる
- UI を作るのは views だが、そこに渡すデータの取得などを担う
- 1 page component につき 1 container component とは限らない
- usecase にはその container component や配下の views を表示するために必要な処理を管理する