最近、X（旧Twitter）で @e_opore さんが投稿していたフロントエンド、バックエンドとフルスタックのフォルダ構造が非常に整理されており、非常に参考にできそうな内容でした。
特に個人開発のプロジェクトで、スケーラブルに開発を進める際に役立つ構成だと感じたため、元投稿を参考に自分なりの解説を加えてまとめます。
参考元ツイート
📂 フロントエンドのフォルダ構造
React + Vite を想定した構成です。
Next.js の app/ ディレクトリなどを使用する場合でも、この役割分担（関心の分離）の考え方はそのまま応用できます。
frontend/
├── public/
│ ├── index.html # メインHTMLファイル
│ ├── favicon.ico
│ └── assets/ # 画像・アイコン・フォントなど静的アセット
├── src/
│ ├── components/
│ │ ├── common/ # 再利用可能なUIコンポーネント
│ │ │ ├── Button.jsx
│ │ │ ├── Input.jsx
│ │ │ └── Modal.jsx
│ │ └── layout/ # レイアウト用コンポーネント
│ │ ├── Header.jsx
│ │ ├── Footer.jsx
│ │ └── Sidebar.jsx
│ ├── pages/ # ページ単位のコンポーネント
│ │ ├── Home.jsx
│ │ ├── Login.jsx
│ │ ├── Register.jsx
│ │ ├── Products.jsx
│ │ ├── Blog.jsx
│ │ └── Dashboard.jsx
│ ├── routes/
│ │ └── AppRoutes.jsx # ルーティング設定
│ ├── services/ # APIリクエスト処理
│ │ ├── api.service.js
│ │ ├── auth.service.js
│ │ └── payment.service.js
│ ├── hooks/ # カスタムフック
│ │ ├── useAuth.js
│ │ └── useFetch.js
│ ├── context/ # Context API（グローバル状態管理）
│ │ └── AuthContext.jsx
│ ├── utils/ # ユーティリティ関数・定数
│ │ ├── constants.js
│ │ └── helpers.js
│ ├── styles/ # グローバルスタイル
│ │ ├── globals.css
│ │ └── theme.css
│ ├── App.jsx # ルートコンポーネント
│ ├── main.jsx # エントリーポイント
│ └── index.css
├── .env # 環境変数
├── .gitignore
├── .prettierrc
├── package.json
└── vite.config.js
📂 バックエンドのフォルダ構造
Node.js + Express を想定した構成です。
MVCアーキテクチャをベースにしつつ、機能ごとに整理されています。
backend/
├── config/
│ ├── db.config.js # データベース設定
│ └── env.config.js # 環境変数設定
├── controllers/ # ビジネスロジック
│ ├── auth.controller.js
│ ├── booking.controller.js
│ ├── product.controller.js
│ ├── blog.controller.js
│ └── payment.controller.js
├── middleware/ # ミドルウェア
│ ├── auth.middleware.js # 認証処理
│ └── error.middleware.js # エラーハンドリング
├── models/ # データベーススキーマ
│ ├── user.model.js
│ ├── booking.model.js
│ ├── product.model.js
│ ├── blog.model.js
│ └── payment.model.js
├── routes/ # ルーティング
│ ├── auth.routes.js
│ ├── booking.routes.js
│ ├── product.routes.js
│ ├── blog.routes.js
│ └── payment.routes.js
├── services/ # 外部サービス連携
│ ├── email.service.js
│ └── payment.service.js
├── utils/ # ユーティリティ
│ ├── email.utils.js
│ ├── payment.utils.js
│ └── logger.js
├── views/
│ └── emails/
│ └── resetPassword.html # メールテンプレート
├── .env
├── .gitignore
├── .prettierrc
├── app.js # アプリ設定
├── server.js # サーバー起動
└── package.json
📂 フルスタックのフォルダ構造
バックエンド（Node.js/Express）とフロントエンド（React）を明確に分離しつつ、共通部分をshared/で管理する、拡張性・保守性の高い構成です。
project-root/
├── backend/
│ ├── config/
│ │ ├── db.config.js # データベース設定
│ │ └── env.config.js # 環境変数設定
│ ├── controllers/
│ │ ├── auth.controller.js # 認証コントローラー
│ │ ├── user.controller.js # ユーザー管理ロジック
│ │ ├── product.controller.js # 商品関連ロジック
│ │ ├── order.controller.js # 注文関連ロジック
│ │ └── payment.controller.js # 決済関連ロジック
│ ├── middleware/
│ │ ├── auth.middleware.js # ルート保護
│ │ ├── error.middleware.js # グローバルエラー処理
│ │ └── validate.middleware.js# リクエスト検証
│ ├── models/
│ │ ├── user.model.js # ユーザースキーマとモデル
│ │ ├── product.model.js # 商品スキーマとモデル
│ │ ├── order.model.js # 注文スキーマとモデル
│ │ └── payment.model.js # 決済スキーマとモデル
│ ├── routes/
│ │ ├── auth.routes.js # 認証ルート
│ │ ├── user.routes.js # ユーザールート
│ │ ├── product.routes.js # 商品ルート
│ │ ├── order.routes.js # 注文ルート
│ │ └── payment.routes.js # 決済ルート
│ ├── services/
│ │ ├── email.service.js # メール通知
│ │ ├── payment.service.js # 決済ゲートウェイ連携
│ │ └── storage.service.js # ファイルストレージサービス
│ ├── utils/
│ │ ├── logger.js # ロガー設定
│ │ ├── helpers.js # ヘルパー関数
│ │ └── constants.js # 共有定数
│ ├── views/
│ │ └── emails/
│ │ └── resetPassword.html # メールテンプレート
│ ├── uploads/ # アップロードファイル
│ ├── tests/ # バックエンドテスト
│ ├── app.js # Expressアプリ設定
│ ├── server.js # サーバーエントリーポイント
│ └── package.json # バックエンド依存関係
├── frontend/
│ ├── public/
│ │ ├── index.html # メインHTMLファイル
│ │ └── assets/ # 静的アセット
│ ├── src/
│ │ ├── components/
│ │ │ ├── common/ # 再利用可能UIコンポーネント
│ │ │ ├── layout/ # レイアウトコンポーネント
│ │ │ └── forms/ # フォームコンポーネント
│ │ ├── pages/
│ │ │ ├── Home.jsx # ホームページ
│ │ │ ├── Auth/ # ログイン/登録ページ
│ │ │ ├── Dashboard.jsx # ダッシュボードページ
│ │ │ ├── Products.jsx # 商品ページ
│ │ │ └── Orders.jsx # 注文ページ
│ │ ├── routes/
│ │ │ └── AppRoutes.jsx # ルーティング設定
│ │ ├── services/
│ │ │ ├── api.service.js # APIリクエストハンドラー
│ │ │ └── auth.service.js # 認証APIコール
│ │ ├── hooks/
│ │ │ ├── useAuth.js # 認証ロジック
│ │ │ └── useFetch.js # データ取得ロジック
│ │ ├── context/
│ │ │ └── AuthContext.jsx # グローバルステート
│ │ ├── store/ # Redux/Zustandストア
│ │ ├── utils/ # ヘルパーユーティリティ
│ │ ├── styles/ # グローバルスタイル
│ │ ├── App.jsx # ルートコンポーネント
│ │ ├── main.jsx # エントリーポイント
│ │ └── index.css # ベースCSS
│ ├── .env # フロントエンド環境変数
│ └── package.json # フロントエンド依存関係
├── shared/
│ ├── types/ # 共有TypeScript型/インターフェース
│ ├── constants/ # 共有定数
│ └── utils/ # 共有ユーティリティ
├── docs/ # プロジェクトドキュメント
├── .gitignore
├── prettier.config.js # Prettier設定
├── docker-compose.yml # Dockerサービス設定
├── README.md # プロジェクト概要
└── package.json # ルートスクリプト（concurrently、buildなど）