ディレクトリ構成

よく使う主な構成です。

src/
├── components/ ベースとなる汎用UIを管理する場所
│   ├── Button/
│   │   ├── index.tsx
│   │   └── ...
│   ├── Input/
│   │   ├── index.tsx
│   │   └── ...
│   ├── index.ts
│   └── ...
├── features/ 機能ごとの関数を管理する場所
│   ├── auth/
│   │   ├── components/
│   │   │   └── ...
│   │   ├── hooks/
│   │   │   └── ...
│   │   ├── utils/
│   │   │   └── ...
│   │   └── index.ts
│   └── ...
├── hooks/ ReactのHooksを管理する場所
│   ├── useFetch.ts
│   ├── useInput.ts
│   └── ...
├── pages/ URLに沿ったページをまとめる場所
│   ├── home/
│   │   ├── index.tsx
│   │   └── ...
│   ├── about/
│   │   ├── index.tsx
│   │   └── ...
│   └── ...
├── styles/ tailwind-variantsなどでまとめたStyleを管理する場所
│   ├── Button.ts
│   ├── Input.ts
│   ├── index.ts
│   └── ...
├── themes/ テーマに関連したStyleを管理する場所
│   ├── tailwind.css
│   ├── blog.css
│   ├── tokens.css
│   └── ...
└── utils/ 汎用的なロジックを管理する場所
    ├── helpers.js
    ├── api.js
    ├── index.ts
    └── ...

共通ルール

• 推奨していること
  • components、features、hooks、utils以下で作成されたものはimport先をまとめるためにindex.tsを作成する。
  • UIとして使用するものは大文字の関数,ディレクトリ名にする
  • ロジック、ページとして使用するものは小文字の関数,ディレクトリ名にする
  • 関連するファイルは別にディレクトリを作成して同じディレクトリで管理する（例：.story.tsx,.test.tsxなど）

components配下のルール

• 推奨していること
  • src直下のcomponents、hooks、utilsをimportして利用する
• 禁止していること
  • src直下のfeatures以下のものをimportして利用する
  • src直下のpages以下のものをimportして利用する

features配下のルール

• 推奨していること
  • src直下のcomponents、features、hooks、utilsをimportして利用する
• 禁止していること
  • pages以下のものをimportして利用する

pages配下のルール

• 推奨していること
  • src直下のcomponents、features、hooks、utilsをimportして利用する
  • URLに相当するものはディレクトリを作成して配下にindex.tsxを作成する
• 禁止していること
  • src直下のcomponents、features、hooks、utilsに相当する関数をimportせずに直接実装する
  • index.tsx以外のファイルを作成する

参考

• プロジェクトガイドライン