😛

最近やっとフロントとバックエンドのよさげなディレクトリ構成がわかった気がする

2022/10/14に公開

frontend

ディレクトリ構成

tech

最近ようやくフロントのよさげなディレクトリ構成がわかった気がする。まずは技術的関心とドメイン的関心にディレクトリを分ける。技術的関心には共通的な要素や横断的関心要素を、ドメイン的関心は画面の構成をそのままディレクトリで表現する。

デザインシステムはどちらかというと、どこでも利用できるベースのコンポーネントを作るという意味で、技術的関心ごと。

イメージ1 slackの画面

ルート
└ src
  ├ WorksSace
  │ ├ PrimaryView
  | │ ├ MessageList.tsx
  │ │ └ PrimaryView.tsx
  │ ├ SideBar
  | │ ├ ChannelList.tsx
  │ │ └ SideBar.tsx
  │ ├ TopNav
  │ │ └ TopNav.tsx
  │ └ WorkSpace.tsx
  └ share
    ├ List.tsx
    └ ListItem.tsx
...

イメージ2 複数の画面

ルート
└ src
  ├ Account
  │ └ PrimaryView.tsx
  ├ Home
  │ └ Home.tsx
  └ share
    ├ List.tsx
    └ ListItem.tsx
...

さらに、できれば、技術的関心は、クラス型言語はデコレーターやアノテーションで実装し、関数型言語は高階関数として実装すると綺麗になる。

以前こんな記事を書いたが、これは、技術的関心事とドメイン的関心ごとを混ぜていたことから起きた混乱だった。

Discussion