src/
├── app/                    # ルーティング（App Router）
│   ├── (auth)/            # 認証が必要なルートグループ
│   │   ├── dashboard/
│   │   └── settings/
│   ├── (public)/          # 公開ルートグループ
│   │   ├── login/
│   │   └── register/
│   ├── api/               # API Routes
│   │   └── users/
│   │       └── route.ts
│   ├── layout.tsx         # ルートレイアウト
│   └── page.tsx           # トップページ
├── components/
│   ├── ui/                # 汎用UI（Button, Input等）
│   ├── features/          # 機能別コンポーネント
│   │   └── auth/
│   │       ├── LoginForm.tsx
│   │       └── index.ts
│   └── layouts/           # レイアウトコンポーネント
├── lib/                   # ユーティリティ、設定、クライアント
│   ├── utils.ts
│   ├── prisma.ts
│   └── auth.ts
├── hooks/                 # カスタムフック
│   └── useAuth.ts
├── services/              # APIクライアント、外部サービス連携
│   └── userService.ts
├── types/                 # 型定義
│   └── user.ts
├── constants/             # 定数
│   └── routes.ts
└── styles/                # グローバルスタイル
    └── globals.css

app/
  ↓
components/
  ↓
hooks/
  ↓
services/
  ↓
lib/
  ↓
types/ & constants/

# 1. components/ → app/ への逆依存
grep -rn "from ['\"]@/app" src/components/ --include="*.ts" --include="*.tsx"

# 2. services/ → components/ への逆依存
grep -rn "from ['\"]@/components" src/services/ --include="*.ts"

# 3. lib/ → services/ への逆依存
grep -rn "from ['\"]@/services" src/lib/ --include="*.ts"

# 4. hooks/ → components/ への逆依存
grep -rn "from ['\"]@/components" src/hooks/ --include="*.ts"

features/
└── user-profile/
    ├── UserProfileContainer.tsx  # データ取得、状態管理
    ├── UserProfileView.tsx       # 純粋なUI（props only）
    ├── useUserProfile.ts         # カスタムフック
    ├── types.ts                  # 型定義
    └── index.ts                  # 公開API（re-export）

// features/user-profile/index.ts
export { UserProfileContainer as UserProfile } from './UserProfileContainer';
export type { UserProfileProps } from './types';

// ❌ Bad: UIコンポーネント内でfetch
export function UserCard({ userId }: Props) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetch(`/api/users/${userId}`).then(/* ... */);
  }, [userId]);
  return <div>{user?.name}</div>;
}

// ✅ Good: カスタムフックに分離
export function UserCard({ userId }: Props) {
  const { user, isLoading } = useUser(userId);
  return <div>{user?.name}</div>;
}

# 検出コマンド
find src -name "*.tsx" -o -name "*.ts" | xargs wc -l | awk '$1 > 300 {print}'

# 検出コマンド
npx madge --circular src/

# 検出コマンド
npx ts-prune

// ❌ Bad: 深い相対パス
import { Button } from '../../../components/ui/Button';

// ✅ Good: エイリアス使用
import { Button } from '@/components/ui/Button';

# 全チェック実行
echo "=== 依存関係チェック ==="
grep -rn "from ['\"]@/app" src/components/ --include="*.ts" --include="*.tsx" || echo "OK: components → app 違反なし"
grep -rn "from ['\"]@/components" src/services/ --include="*.ts" || echo "OK: services → components 違反なし"

echo "=== ファイルサイズチェック ==="
find src -name "*.tsx" -o -name "*.ts" | xargs wc -l | awk '$1 > 300 {print "WARNING:", $2, "is", $1, "lines"}'

echo "=== 循環依存チェック ==="
npx madge --circular src/ 2>/dev/null || echo "madgeが未インストール"

echo "=== 未使用エクスポートチェック ==="
npx ts-prune 2>/dev/null | head -20 || echo "ts-pruneが未インストール"

## アーキテクチャ監査結果

### ✅ 準拠項目
- ディレクトリ構造: OK
- レイヤー依存関係: OK
- ファイルサイズ: OK

### ❌ 違反項目
| ファイル | 違反タイプ | 詳細 | 修正案 |
|---------|-----------|------|--------|
| UserProfile.tsx | サイズ超過 | 450行 | Container/View分割 |
| api.ts → Button | 逆依存 | services→components | インターフェース抽出 |
| A → B → A | 循環依存 | 相互参照 | 共通モジュール抽出 |

### 📝 推奨アクション
1. UserProfile.tsx を分割（優先度: 高）
2. 循環依存を解消（優先度: 高）
3. 未使用エクスポートを削除（優先度: 中）

// Before: 1ファイル400行
// UserProfile.tsx (400行)

// After: 3ファイルに分割
// UserProfileContainer.tsx (80行) - データ取得
// UserProfileView.tsx (150行) - UI
// useUserProfile.ts (50行) - ロジック
// types.ts (20行) - 型定義

// Before: A → B → A の循環
// moduleA.ts imports from moduleB.ts
// moduleB.ts imports from moduleA.ts

// After: 共通モジュール抽出
// common.ts (共通の型・関数)
// moduleA.ts imports from common.ts
// moduleB.ts imports from common.ts