Open4

WIP フロントエンドのディレクトリ設計パターン

kokoro tobitakokoro tobita

基本となる考え方

2種類のディレクトリ分割パターン

  • Layer型
    • 技術によるディレクトリ分割
    • Atomic Designなど
  • Feature型
    • ドメインによるディレクトリ分割を
    • baletproof react など

■メリット・デメリット

  • Layer型
    • メリット: 階層構造を作ることで、共通化によって起こる依存の向きを整理できる
    • デメリット: (Atomic Designのように)階層の定義が曖昧になったり、必要以上の階層ができて依存が複雑になりやすい
  • Feature型
    • メリット: ドメインごとに分けられると疎結合・高凝集になり、影響範囲が限定的になることで開発しやすくなる
    • デメリット: ドメインの境界を明確にできず責務が曖昧になったり、ドメイン間で処理の重複が発生しやすい

フロントエンドでよく用いられる分割パターン

Package by Feature

Feature-Sliced Design