Skip to main content

ディレクトリ構成

よく使う主な構成である。

src/
├── components/ ベースとなる汎用UIを管理する場所（デザインシステムの「ui」層）
│   ├── Button/
│   │   ├── index.tsx
│   │   └── ...
│   ├── Input/
│   │   ├── index.tsx
│   │   └── ...
│   ├── index.ts
│   └── ...
├── layouts/ アプリケーション全体で共有する専用ウィジェットを管理する場所（Headerなど）
│   ├── GlobalHeader/
│   │   └── ...
│   └── ...
├── features/ 機能ごとの関数や固有UIを管理する場所（デザインシステムの「domain」「widgets」層）
│   ├── 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して利用する
    • アプリケーション全体で使い回せる「汎用的（ui）」なコンポーネントのみを配置する
  • 禁止していること
    • src直下のfeatures以下のものをimportして利用する（依存の逆転を防ぐため）
    • src直下のlayouts以下のものをimportして利用する（依存の逆転を防ぐため）
    • src直下のpages以下のものをimportして利用する
    • 特定の機能やデータモデルに依存するコンポーネントを配置する（これらはfeaturesに配置する）

layouts配下のルール​

  • 推奨していること
    • src直下のcomponents、hooks、utilsをimportして利用する
    • 複数機能やページ全体にまたがって使用される枠組みコンポーネント（HeaderやSidebarなど）を配置する
  • 禁止していること
    • src直下のfeatures以下のものをimportして利用する（特定の機能に依存させないため）

features配下のルール​

  • 推奨していること
    • src直下のcomponents、features、hooks、utilsをimportして利用する
    • 特定の機能（データモデル依存など）に紐づくUIコンポーネントは、各機能の components/ ディレクトリに配置する（デザインシステムの「domain」「widgets」に相当する）
  • 禁止していること
    • 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以外のファイルを作成する

参考​

Last updated on