※ 開発中なので README.md にも足りない項目があります
ウマ娘のサポカ編成にてレスボ等のステータス一覧を表示する Web アプリ
yarn dev今回は下記の記事を参考に構成を決定した
私の推しフロントエンドディレクトリ構成と気をつけたいポイント
src/
├─ features/ // 機能毎にディレクトリを切る
│ ├─ Profile/
│ │ ├─ components/ // 子コンポーネントを入れ子で配置
│ │ │ ├─ UserInfo/
│ │ │ ├─ Sponsoring/
│ │ │ ├─ Achievements/
│ │ │ ├─ Organizations/
│ │ ├─ hooks/
│ │ ├─ functions/
│ │ ├─ api/
│ │ ├─ test/ // 必須
│ │ ├─ stories/ // 必須
│ │ ├─ index.tsx
│ ├─ Repositories/
│ ├─ Overview/
│ ├─ Header/
├─ components/ // 共通コンポーネントを配置
│ ├─ Button/
│ ├─ Icon/
├─ hooks/ // 共通の hooks を配置
├─ functions/ // 共通の関数を配置、libs や utils に相当ここに機能ごとにコンポーネントを分けて設置
上のコード例だと、Profile / Repositories / Overview / Header に分かれている
以前作ったプロジェクトでも似たような構成にしていたが、hooks や test も機能ごとに内包しているのが新しい点
以前のプロジェクトでは小規模ということで src/hooks に全ての hooks とその test を配置していたが、後半になると見通しが悪くなっていた
feature 単位で分けることでだいぶ見通しが良くなりそう
hooks / functions / api は任意で配置するが、test / stories は必須とのこと
参照先の記事では統合テストのみ書くと書いているので、試してみて良さそうなら採用する
hooks の単体テスト書かないのが少々不安点
プロダクト共通のコンポーネントを配置する
これは無くても良さげ
プロダクト共通の hooks や ロジックを置く
functions は従来の libs/ や utils/ に相当?
この部分はしっかり単体テストを書く
定数を配置する src/constants、レイアウトを配置する src/layouts などを任意で追加しても良い