注意

2021/1現在、本ディレクトリ構成にて運用中のため、適宜メリット・デメリットを追記してゆく。
また、本ディレクトリ構成での運用に不都合が発覚した場合、ディレクトリ構成は変更の可能性あり。

編集履歴

1/9 本記事を作成

対象のシステム

客先などに提供するため実装・試験まできちんとしなければならないが、アトミックデザインにするほどでもないな〜といった感じのシステム。
以下、作成するシステムの前提を記載。

create-react-appする
TypeScriptで実装する
Reduxは使わないがuseReducerを使う
レンダリングとロジックを分離させるため、PresentationComponentとContainerComponentは分ける
ユニットテストはjestを利用し、ContainerComponent、カスタムフックのC1カバレッジを100%にする
メッセージはcomponentとは別のファイルで定義する

ディレクトリ構成案

app/
 ┗ src/
    ┠ Components/
    ┃        ┠ Presentations/  //画面表示に関するファイル
    ┃        ┗ Containers/     //ロジックに関するファイル
    ┠ Hooks/                   //カスタムフック
    ┠ Actions/                 //useReducerで利用するAction
    ┠ Models/                  //複数のコンポーネント間で共有するinterface
    ┠ Message/                 //エラーメッセージなど
    ┠ App.tsx
    ┠ index.tsx
    ┗ Tests/                   //ユニットテストに関するファイル

メリット

ユニットテスト実行時はContainerディレクトリ、Hooksディレクトリ内のファイルを対象に行えばよい
コンポーネント間でAction、Model(interfaceなど)を共有しやすい
コンポーネント数がある程度大きくなっても対応できる

デメリット（課題）

ディレクトリ構成からはPresentationComponentとContainerComponentの関連が推測できない（ファイル名によって推測するしかない）