【React】ディレクトリ構造の作成方法について

Reactでプロジェクトを構築する際、ディレクトリ構造をわかりやすく設計することは開発の効率化にとても重要です。

今回は家計簿アプリを例にとり、ディレクトリ構造の設計について気をつけなければいけないことを自分の学習も兼ねて執筆していきます。

📦 my-budget-app
├── 📂 public               
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── 📂 src                   
│   ├── 📂 assets           
│   │   ├── images
│   │   ├── styles
│   │   └── fonts
│   ├── 📂 components       
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   ├── Header.tsx
│   │   ├── Sidebar.tsx
│   │   └── ExpenseList.tsx
│   ├── 📂 features         
│   │   ├── expenses        
│   │   │   ├── Expenses.tsx
│   │   │   ├── ExpensesForm.tsx
│   │   │   ├── ExpensesList.tsx
│   │   │   ├── expensesSlice.ts  
│   │   │   └── expensesAPI.ts
│   │   ├── income          
│   │   │   ├── Income.tsx
│   │   │   ├── IncomeForm.tsx
│   │   │   ├── IncomeList.tsx
│   │   │   ├── incomeSlice.ts
│   │   │   └── incomeAPI.ts
│   │   ├── auth             
│   │   │   ├── Login.tsx
│   │   │   ├── Register.tsx
│   │   │   ├── authSlice.ts
│   │   │   ├── authAPI.ts
│   │   │   └── ProtectedRoute.tsx
│   ├── 📂 hooks            
│   │   ├── useAuth.ts
│   │   ├── useExpenses.ts
│   │   ├── useIncome.ts
│   │   └── useFetchData.ts
│   ├── 📂 pages            
│   │   ├── Home.tsx
│   │   ├── Dashboard.tsx
│   │   ├── Expenses.tsx
│   │   ├── Income.tsx
│   │   ├── Login.tsx
│   │   ├── Register.tsx
│   │   ├── NotFound.tsx
│   │   └── Settings.tsx
│   ├── 📂 context          
│   │   ├── ExpensesContext.tsx
│   │   ├── IncomeContext.tsx
│   │   └── AuthContext.tsx
│   ├── 📂 store            
│   │   ├── store.ts
│   │   ├── rootReducer.ts
│   │   ├── expensesSlice.ts
│   │   ├── incomeSlice.ts
│   │   ├── authSlice.ts
│   │   └── api.ts
│   ├── 📂 utils            
│   │   ├── formatCurrency.ts
│   │   ├── dateUtils.ts
│   │   ├── localStorage.ts
│   │   ├── apiClient.ts
│   │   └── constants.ts
│   ├── 📂 types            
│   │   ├── expenseTypes.ts
│   │   ├── incomeTypes.ts
│   │   ├── authTypes.ts
│   │   └── index.ts
│   ├── 📂 routes           
│   │   ├── routes.tsx
│   │   └── PrivateRoute.tsx
│   ├── App.tsx             
│   ├── index.tsx            
└── 📂 node_modules 

このディレクトリに関する説明

1. components/（再利用可能なUIコンポーネント）

ボタンやカードなどのアプリ全体で使うコンポーネントをここに配置します。

2. features/（機能ごとのコンポーネント）

features/ ディレクトリには、アプリの各機能（ドメイン）ごとにコンポーネントや状態管理のロジックをまとめます。
ここでは支出管理の機能、収入管理の機能、残高管理の機能を小分けしています。

3. hooks/（カスタムフック）

カスタムフックとは、Reactのフック（Hooks）を再利用可能な形にまとめたものです。
seState、useEffect、useContextなどのReactフックを組み合わせて、特定の機能をカプセル化し、複数のコンポーネントで再利用できるようにしています。
このカスタムフックをhooks/ ディレクトリに置きます。

4. pages/（ページごとのコンポーネント）

pages/ ディレクトリには、アプリケーション内の各ページを構成するコンポーネントを配置します。
pages/ にあるコンポーネントはページ単位のものとし、再利用しないことがポイント

5. store/（Redux や Zustand などの状態管理）

store/ ディレクトリには、アプリケーションの状態を管理するファイルを配置します。
これは、アプリ全体で共有するデータ（例えば、ユーザー情報や支出データ）を効率的に管理するために使用されます。

React では、各コンポーネントが独自の状態（useState など）を持つことができますが、異なるコンポーネント間でデータを共有する場合、グローバルな状態管理が必要になります。そのために、Redux Toolkit や Zustand のようなライブラリを利用します。

設計のポイント

• グローバルな状態を store/ で管理し、コンポーネント間のデータ共有を簡単にする
• features/ 内のコンポーネントが必要に応じて store/ からデータを取得できるようにする
• API通信を含むデータの取得・更新ロジックを整理し、一貫性を持たせる

6. utils/（ユーティリティ関数）

通貨フォーマットや日付変換などの便利な関数をまとめる。

ユーティリティ関数とは？

ユーティリティ関数は、特定の機能に依存せず、再利用性の高いシンプルな処理を行う関数のことを指します。

配置するファイル例

1. データフォーマット関連

• formatCurrency.ts：金額を通貨フォーマットに変換
• dateUtils.ts：日付フォーマットの変換や比較処理

2. ローカルストレージ管理

• localStorage.ts：ローカルストレージのデータ保存・取得

3. API 通信関連

• apiClient.ts：API リクエストの基本設定（エラーハンドリング、リトライなど）

4. その他の便利関数

• constants.ts：アプリ全体で使う定数を管理