ディレクトリ構成

よく使う主な構成です。

src/
├── components/ ベースとなる汎用UIを管理する場所
│   ├── Button/
│   │   ├── index.tsx
│   │   └── ...
│   ├── Input/
│   │   ├── index.tsx
│   │   └── ...
│   ├── index.ts
│   └── ...
├── features/ 機能ごとの関数を管理する場所
│   ├── auth/
│   │   ├── components/
│   │   │   └── ...
│   │   ├── hooks/
│   │   │   └── ...
│   │   ├── utils/
│   │   │   └── ...
│   │   └── index.ts
│   ├── SomeComponent/ 共通コンポーネントとその特化実装を管理する場合
│   │   ├── SomeComponent.tsx
│   │   ├── SomeComponent.stories.tsx
│   │   ├── index.ts
│   │   └── patterns/ 特化実装パターン
│   │       ├── pattern-a/
│   │       │   ├── PatternAComponent.tsx
│   │       │   ├── PatternAComponent.stories.tsx
│   │       │   └── index.ts
│   │       └── pattern-b/
│   │           ├── PatternBComponent.tsx
│   │           ├── PatternBComponent.stories.tsx
│   │           └── 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して利用する

patternsパターンについて

共通コンポーネントをベースとした特化実装が複数ある場合に使用できる構造です。

• 使用場面: 1つの基底コンポーネントをベースに特化実装のcomponentを作る場合
• 構造:
  • 基底コンポーネント（例：SomeComponent.tsx）をトップレベルに配置
  • patterns/配下に用途別の特化実装を配置
  • features/**/配下にpatterns/を配置する
• 命名規則:
  • patterns/配下のディレクトリ名は機能や用途を表すケバブケース
  • 各パターンのコンポーネント名は基底コンポーネントに依存する必要はない
• インポート関係:
  • patterns内の特化実装は基底コンポーネントをインポートして利用する

pages配下のルール

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

参考

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