app/
├── components/ # 共通コンポーネント (Presentation Layer)
│ ├── layout/ # レイアウトコンポーネント (header, footer)
│ │ ├── Header.tsx # ヘッダーコンポーネント
│ │ └── Footer.tsx # フッターコンポーネント
│ └── ui/ # 純粋なUIコンポーネント (button, modal)
│ ├── Button.tsx # ボタンコンポーネント
│ └── Modal.tsx # モーダルコンポーネント
│
├── features/ # 各ページごとの機能 (Feature Element)
│ ├── home/ # ホームページ固有の機能 (Feature Element)
│ │ ├── api/ # ホームページ関連API呼び出し (Data Access Layer)
│ │ │ └── fetchHomeData.server.ts # ホームページ固有のAPI呼び出し
│ │ ├── components/ # ホームページ固有のコンポーネント (Presentation Layer)
│ │ │ ├── HomeHeader.tsx # ホームページのヘッダーコンポーネント
│ │ │ └── HomeContent.tsx # ホームページのコンテンツコンポーネント
│ │ └── hooks/ # ホームページのカスタムフック (Business Logic Layer)
│ │ └── useHomeData.ts # ホームページ用のデータ取得フック
│ │
│ └── profile/ # プロフィールページ固有の機能 (Feature Element)
│ ├── api/ # プロフィール関連API呼び出し (Data Access Layer)
│ │ └── fetchProfileData.server.ts # プロフィールページ固有のAPI呼び出し
│ ├── components/ # プロフィールページ固有のコンポーネント (Presentation Layer)
│ │ ├── ProfileHeader.tsx # プロフィールページのヘッダーコンポーネント
│ │ └── ProfileContent.tsx # プロフィールページのコンテンツコンポーネント
│ └── hooks/ # プロフィールのカスタムフック (Business Logic Layer)
│ └── useProfileData.ts # プロフィール用のデータ取得フック
│
├── hooks/ # グローバルなカスタムフック (Business Logic Layer)
│ ├── useAuth.ts # 認証に関するカスタムフック
│ └── useFetch.ts # データフェッチに関するカスタムフック
│
├── lib/ # ライブラリに依存した関数 (Business Logic Layer)
│ ├── apiClient.ts # APIクライアントの設定
│ └── dateUtils.ts # 日付処理のユーティリティ関数
│
├── routes/ # Remixのルートファイル
│ ├── index.tsx # ルートページファイル
│ ├── home.tsx # ホームページのルートファイル
│ ├── profile.tsx # プロフィールページのルートファイル
│ └── api/ # グローバルなAPIエンドポイント
│ └── sample.server.ts # サンプルAPIエンドポイント
│
├── store/ # 状態管理 (Business Logic Layer)
│ └── userStore.ts # ユーザー情報の状態管理
│
├── styles/ # 共通スタイル (Presentation Layer)
│ ├── globals.css # グローバルスタイル
│ ├── tailwind.css # Tailwind CSSのスタイル
│ ├── variables.css # CSS変数
│ └── mixins.css # ミックスイン
│
├── test/ # テストファイルディレクトリ
│ ├── e2e/ # エンドツーエンドテスト
│ │ ├── home.e2e.test.ts # ホームページのE2Eテスト
│ │ └── profile.e2e.test.ts # プロフィールページのE2Eテスト
│ │
│ ├── integration/ # 統合テスト
│ │ ├── home.integration.test.ts # ホームページの統合テスト
│ │ └── profile.integration.test.ts # プロフィールページの統合テスト
│ │
│ └── unit/ # ユニットテスト
│ ├── api.test.ts # グローバルなAPI通信ロジックのユニットテスト
│ ├── components/ # 共通コンポーネントのユニットテスト
│ │ ├── Header.test.ts # ヘッダーコンポーネントのユニットテスト
│ │ ├── Footer.test.ts # フッターコンポーネントのユニットテスト
│ │ ├── Button.test.ts # ボタンコンポーネントのユニットテスト
│ │ └── Modal.test.ts # モーダルコンポーネントのユニットテスト
│ ├── features/ # 各ページごとの機能のユニットテスト
│ │ ├── home/ # ホームページのユニットテスト
│ │ │ ├── api/ # ホームページ関連API呼び出しのユニットテスト
│ │ │ │ └── homeApi.test.ts
│ │ │ ├── components/ # ホームページ固有のコンポーネントのユニットテスト
│ │ │ │ └── homeComponent.test.ts
│ │ │ └── hooks/ # ホームページのカスタムフックのユニットテスト
│ │ │ └── homeHook.test.ts
│ │ └── profile/ # プロフィールページのユニットテスト
│ │ ├── api/ # プロフィール関連API呼び出しのユニットテスト
│ │ │ └── profileApi.test.ts
│ │ ├── components/ # プロフィールページ固有のコンポーネントのユニットテスト
│ │ │ └── profileComponent.test.ts
│ │ └── hooks/ # プロフィールのカスタムフックのユニットテスト
│ │ └── profileHook.test.ts
│ ├── hooks/ # グローバルなカスタムフックのユニットテスト
│ │ ├── useAuth.test.ts # 認証に関するカスタムフックのユニットテスト
│ │ └── useFetch.test.ts # データフェッチに関するカスタムフックのユニットテスト
│ ├── lib.test.ts # ライブラリに依存した関数のユニットテスト
│ ├── store.test.ts # 状態管理のユニットテスト
│ └── utils.test.ts # ユーティリティ関数のユニットテスト
│
├── types/ # グローバルな型定義ファイル
│ └── index.d.ts # 型定義のエントリーポイント
│
└── utils/ # ユーティリティ関数 (Business Logic Layer)
├── format.ts # 文字列フォーマットに関するユーティリティ
└── math.ts # 数値計算に関するユーティリティ
📖 See the Remix docs and the Remix Vite docs for details on supported features.
Run the Vite dev server:
pnpm dev
First, build your app for production:
pnpm buildThen run the app in production mode:
pnpm startNow you'll need to pick a host to deploy it to.
Run the vitest test runner:
pnpm test
If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
Make sure to deploy the output of npm run build
build/serverbuild/client