ディレクトリ構造

10.3.1. 標準フォルダ構造

src/
├── api/              # API 呼び出し関数
│   ├── client.ts     # Axios インスタンス設定
│   └── user.ts       # ユーザー関連 API
├── assets/           # 静的アセット（画像、フォント）
├── components/       # 共通コンポーネント
│   ├── common/       # 汎用 UI コンポーネント（Button、Modal など）
│   └── layout/       # レイアウトコンポーネント（Header、Sidebar など）
├── composables/      # Composable 関数
├── locales/          # i18n 翻訳ファイル
├── plugins/          # Vue プラグイン設定
├── router/           # Vue Router 設定
│   └── index.ts
├── stores/           # Pinia ストア
├── styles/           # グローバルスタイルおよび Tailwind 設定
├── types/            # TypeScript 型定義
├── utils/            # ユーティリティ関数
├── views/            # ページコンポーネント
│   ├── user/
│   │   ├── UserListView.vue
│   │   └── UserDetailView.vue
│   └── auth/
│       └── LoginView.vue
├── App.vue
└── main.ts

---

10.3.2. ディレクトリ原則

• views/: ルーターに直接接続されるページコンポーネントを配置します。サフィックス View を使用します。
• components/: 複数のページで再利用される共通コンポーネントを配置します。
• ページ専用コンポーネントは該当する views/ 配下に配置することができます。
• api/: 各ドメインごとにファイルを分離します。
• types/: API レスポンス型と共通型を定義します。コンポーネント専用型は該当コンポーネントファイル内に定義することができます。
• composables/: 再利用可能なロジックをカプセル化します。1つのファイルに1つの composable を定義します。

---

10.3.3. コンポーネント分類基準

分類	配置場所	基準
ページコンポーネント	views/	ルーターに直接接続、*View.vue サフィックス
共通 UI コンポーネント	components/common/	2つ以上のページで再利用
レイアウトコンポーネント	components/layout/	ページレイアウト構成要素
ページ専用コンポーネント	views/{ドメイン}/	特定ページでのみ使用

---

10.3.4. ファイル配置規則

• 1つのディレクトリに10個以上のファイルが存在する場合、サブディレクトリに分類します。
• index.ts ファイルはディレクトリのエントリーポイントとして使用し、re-export 用途にのみ使用します。
• テストファイルは元ファイルと同じディレクトリに *.spec.ts または *.test.ts として配置します。別途 __tests__/ ディレクトリも許容します。