注意
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の関連が推測できない（ファイル名によって推測するしかない）