// Step 1: shared/ ディレクトリを作成し、汎用コードを移動
// 移行前
// src/components/Button.tsx → src/shared/components/ui/Button.tsx
// src/hooks/useLocalStorage.ts → src/shared/hooks/useLocalStorage.ts
 
// Step 2: 最もまとまりのある機能から features/ に切り出す
// src/components/UserList.tsx → src/features/users/components/UserList.tsx
// src/hooks/useUsers.ts → src/features/users/hooks/useUsers.ts
// src/api/users.ts → src/features/users/api/queries.ts
// src/types/user.ts → src/features/users/types/user.ts
 
// Step 3: index.ts を作成して公開APIを定義
// src/features/users/index.ts
export { UserList } from './components/UserList';
export { useUsers } from './hooks/useUsers';
export type { User } from './types/user';
 
// Step 4: 既存のimportを更新
// Before
import { UserList } from '@/components/UserList';
import { useUsers } from '@/hooks/useUsers';
 
// After
import { UserList, useUsers } from '@/features/users';
 
// Step 5: 残りの機能を順次移行
// orders, auth, notifications, ...

// --- layout.tsx ---
// ページ間で共有されるレイアウト。子ルートがnavigation しても再レンダリングされない
// src/app/(app)/layout.tsx
import { redirect } from 'next/navigation';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/shared/lib/auth';
import { Sidebar } from '@/shared/components/layout/Sidebar';
import { Header } from '@/shared/components/layout/Header';
 
export default async function AppLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await getServerSession(authOptions);
 
  if (!session) {
    redirect('/login');
  }
 
  return (
    <div className="flex h-screen">
      <Sidebar user={session.user} />
      <div className="flex-1 flex flex-col">
        <Header user={session.user} />
        <main className="flex-1 overflow-auto p-6">
          {children}
        </main>
      </div>
    </div>
  );
}
 
// --- page.tsx ---
// ルートのUIを定義。このファイルがあるディレクトリがURLに対応
// src/app/(app)/dashboard/page.tsx
import { Suspense } from 'react';
import { DashboardStats } from '@/features/dashboard/components/DashboardStats';
import { RecentActivity } from '@/features/dashboard/components/RecentActivity';
import { DashboardSkeleton } from '@/features/dashboard/components/DashboardSkeleton';
 
export const metadata = {
  title: 'Dashboard | MyApp',
  description: 'Your dashboard overview',
};
 
export default function DashboardPage() {
  return (
    <div className="space-y-6">
      <h1 className="text-3xl font-bold">Dashboard</h1>
      <Suspense fallback={<DashboardSkeleton />}>
        <DashboardStats />
      </Suspense>
      <Suspense fallback={<div>Loading activity...</div>}>
        <RecentActivity />
      </Suspense>
    </div>
  );
}
 
// --- error.tsx ---
// エラーバウンダリ。実行時エラーをキャッチして fallback UI を表示
// src/app/(app)/dashboard/error.tsx
'use client'; // Error components must be Client Components
 
import { useEffect } from 'react';
import { Button } from '@/shared/components/ui/Button';
 
export default function DashboardError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // エラー報告サービスにログ送信
    console.error('Dashboard error:', error);
  }, [error]);
 
  return (
    <div className="flex flex-col items-center justify-center gap-4 py-12">
      <h2 className="text-xl font-semibold">Something went wrong!</h2>
      <p className="text-muted-foreground">{error.message}</p>
      <Button onClick={() => reset()}>Try again</Button>
    </div>
  );
}
 
// --- loading.tsx ---
// Suspense 境界のフォールバックUI。ストリーミングSSRで活用
// src/app/(app)/dashboard/loading.tsx
import { Skeleton } from '@/shared/components/ui/Skeleton';
 
export default function DashboardLoading() {
  return (
    <div className="space-y-6">
      <Skeleton className="h-10 w-48" />
      <div className="grid grid-cols-3 gap-4">
        <Skeleton className="h-32" />
        <Skeleton className="h-32" />
        <Skeleton className="h-32" />
      </div>
      <Skeleton className="h-64" />
    </div>
  );
}
 
// --- not-found.tsx ---
// カスタム404ページ
// src/app/not-found.tsx
import Link from 'next/link';
import { Button } from '@/shared/components/ui/Button';
 
export default function NotFound() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen gap-4">
      <h1 className="text-6xl font-bold">404</h1>
      <p className="text-xl text-muted-foreground">Page not found</p>
      <Button asChild>
        <Link href="/">Go Home</Link>
      </Button>
    </div>
  );
}
 
// --- route.ts ---
// API Route Handler。RESTful なAPIエンドポイントを定義
// src/app/api/webhooks/stripe/route.ts
import { headers } from 'next/headers';
import { NextResponse } from 'next/server';
import Stripe from 'stripe';
 
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
 
export async function POST(request: Request) {
  const body = await request.text();
  const signature = headers().get('stripe-signature')!;
 
  try {
    const event = stripe.webhooks.constructEvent(
      body,
      signature,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
 
    switch (event.type) {
      case 'checkout.session.completed':
        // 支払い完了処理
        break;
      case 'customer.subscription.updated':
        // サブスクリプション更新処理
        break;
    }
 
    return NextResponse.json({ received: true });
  } catch (err) {
    return NextResponse.json(
      { error: 'Webhook signature verification failed' },
      { status: 400 }
    );
  }
}

// src/app/(auth)/layout.tsx — 認証ページ用のミニマルレイアウト
export default function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="max-w-md w-full">
        {children}
      </div>
    </div>
  );
}
 
// src/app/(marketing)/layout.tsx — マーケティング用レイアウト
import { MarketingHeader } from '@/shared/components/layout/MarketingHeader';
import { Footer } from '@/shared/components/layout/Footer';
 
export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <MarketingHeader />
      <main>{children}</main>
      <Footer />
    </>
  );
}

// ルール違反の例（BAD）
// src/app/(app)/dashboard/page.tsx
import { prisma } from '@/shared/lib/db';  // ← ページ内でDB直接アクセス
 
export default async function DashboardPage() {
  const users = await prisma.user.findMany();  // ← ビジネスロジックがページに混入
  const orders = await prisma.order.findMany({
    where: { status: 'pending' },
    include: { user: true },
  });
 
  return (
    <div>
      <h1>Dashboard</h1>
      {/* 直接データを表示 */}
      <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>
    </div>
  );
}
 
// ルール準拠の例（GOOD）
// src/app/(app)/dashboard/page.tsx
import { DashboardStats } from '@/features/dashboard/components/DashboardStats';
import { RecentOrders } from '@/features/orders/components/RecentOrders';
import { ActiveUsers } from '@/features/users/components/ActiveUsers';
 
export default function DashboardPage() {
  return (
    <div className="space-y-6">
      <h1 className="text-3xl font-bold">Dashboard</h1>
      <DashboardStats />
      <div className="grid grid-cols-2 gap-6">
        <RecentOrders />
        <ActiveUsers />
      </div>
    </div>
  );
}
 
// データ取得は features/ 内で行う
// src/features/dashboard/components/DashboardStats.tsx
import { getDashboardStats } from '../api/queries';
 
export async function DashboardStats() {
  const stats = await getDashboardStats();
 
  return (
    <div className="grid grid-cols-4 gap-4">
      <StatCard title="Total Users" value={stats.totalUsers} />
      <StatCard title="Active Orders" value={stats.activeOrders} />
      <StatCard title="Revenue" value={`$${stats.revenue}`} />
      <StatCard title="Conversion" value={`${stats.conversionRate}%`} />
    </div>
  );
}

// features/users/ の内部構造
// features/users/
// ├── components/           ← UIコンポーネント
// │   ├── UserList.tsx      ← Server Component（データフェッチ含む）
// │   ├── UserCard.tsx      ← Server Component
// │   ├── UserAvatar.tsx    ← Server Component
// │   ├── UserSearchInput.tsx ← Client Component（インタラクティブ）
// │   └── UserForm.tsx      ← Client Component（フォーム）
// ├── hooks/                ← カスタムhooks
// │   ├── useUsers.ts       ← ユーザー一覧取得
// │   ├── useUser.ts        ← 個別ユーザー取得
// │   └── useUserForm.ts    ← フォームロジック
// ├── api/                  ← データ取得・更新
// │   ├── queries.ts        ← サーバーサイドクエリ / TanStack Query
// │   └── actions.ts        ← Server Actions
// ├── types/                ← 型定義
// │   └── user.ts
// ├── utils/                ← feature固有のユーティリティ
// │   ├── format.ts         ← ユーザー名フォーマット等
// │   └── validation.ts     ← バリデーションスキーマ
// ├── constants/            ← feature固有の定数
// │   └── roles.ts
// ├── __tests__/            ← テスト
// │   ├── UserList.test.tsx
// │   ├── useUsers.test.ts
// │   └── actions.test.ts
// └── index.ts              ← 公開API
 
// features/users/index.ts — 公開API定義
// このファイルからのみ外部アクセスが可能
 
// Components（外部から使用を許可するもののみ）
export { UserList } from './components/UserList';
export { UserCard } from './components/UserCard';
export { UserAvatar } from './components/UserAvatar';
 
// Hooks
export { useUsers } from './hooks/useUsers';
export { useUser } from './hooks/useUser';
 
// Types
export type { User, CreateUserInput, UpdateUserInput } from './types/user';
 
// Actions
export { createUser, updateUser, deleteUser } from './api/actions';
 
// 注意: 内部実装は export しない
// UserSearchInput, UserForm は内部コンポーネントとして扱う
// format.ts, validation.ts も外部には公開しない

// features/users/api/queries.ts
// サーバーサイドでのデータ取得（Server Components から呼び出す）
import { prisma } from '@/shared/lib/db';
import { cache } from 'react';
 
// React の cache() で同一レンダリング内の重複リクエストを排除
export const getUsers = cache(async (params?: {
  page?: number;
  limit?: number;
  search?: string;
  role?: string;
}) => {
  const { page = 1, limit = 20, search, role } = params ?? {};
 
  const where = {
    ...(search && {
      OR: [
        { name: { contains: search, mode: 'insensitive' as const } },
        { email: { contains: search, mode: 'insensitive' as const } },
      ],
    }),
    ...(role && { role }),
  };
 
  const [users, total] = await Promise.all([
    prisma.user.findMany({
      where,
      skip: (page - 1) * limit,
      take: limit,
      orderBy: { createdAt: 'desc' },
      select: {
        id: true,
        name: true,
        email: true,
        role: true,
        avatarUrl: true,
        createdAt: true,
      },
    }),
    prisma.user.count({ where }),
  ]);
 
  return {
    users,
    pagination: {
      page,
      limit,
      total,
      totalPages: Math.ceil(total / limit),
    },
  };
});
 
export const getUser = cache(async (id: string) => {
  const user = await prisma.user.findUnique({
    where: { id },
    include: {
      orders: {
        orderBy: { createdAt: 'desc' },
        take: 10,
      },
      _count: {
        select: { orders: true },
      },
    },
  });
 
  if (!user) {
    throw new Error(`User not found: ${id}`);
  }
 
  return user;
});
 
// features/users/api/actions.ts
// Server Actions（フォームやクライアントからの mutation）
'use server';
 
import { revalidatePath } from 'next/cache';
import { prisma } from '@/shared/lib/db';
import { z } from 'zod';
import { CreateUserInput, UpdateUserInput } from '../types/user';
 
const createUserSchema = z.object({
  name: z.string().min(1, 'Name is required').max(100),
  email: z.string().email('Invalid email address'),
  role: z.enum(['admin', 'member', 'viewer']).default('member'),
});
 
export async function createUser(input: CreateUserInput) {
  const validated = createUserSchema.parse(input);
 
  const existingUser = await prisma.user.findUnique({
    where: { email: validated.email },
  });
 
  if (existingUser) {
    return { error: 'A user with this email already exists' };
  }
 
  const user = await prisma.user.create({
    data: validated,
  });
 
  revalidatePath('/dashboard');
  revalidatePath('/users');
 
  return { data: user };
}
 
export async function updateUser(id: string, input: UpdateUserInput) {
  const user = await prisma.user.update({
    where: { id },
    data: input,
  });
 
  revalidatePath('/dashboard');
  revalidatePath(`/users/${id}`);
  revalidatePath('/users');
 
  return { data: user };
}
 
export async function deleteUser(id: string) {
  await prisma.user.delete({ where: { id } });
 
  revalidatePath('/dashboard');
  revalidatePath('/users');
 
  return { success: true };
}

// features/users/types/user.ts
// feature 内で使用する型定義
 
export interface User {
  id: string;
  name: string;
  email: string;
  role: UserRole;
  avatarUrl: string | null;
  createdAt: Date;
  updatedAt: Date;
}
 
export type UserRole = 'admin' | 'member' | 'viewer';
 
// API リクエスト用の型
export interface CreateUserInput {
  name: string;
  email: string;
  role?: UserRole;
}
 
export interface UpdateUserInput {
  name?: string;
  email?: string;
  role?: UserRole;
  avatarUrl?: string | null;
}
 
// ページネーション付きレスポンス
export interface UsersResponse {
  users: User[];
  pagination: {
    page: number;
    limit: number;
    total: number;
    totalPages: number;
  };
}
 
// フィルター条件
export interface UserFilters {
  search?: string;
  role?: UserRole;
  page?: number;
  limit?: number;
}
 
// ユーザー詳細（リレーション含む）
export interface UserDetail extends User {
  orders: {
    id: string;
    total: number;
    status: string;
    createdAt: Date;
  }[];
  _count: {
    orders: number;
  };
}

// shared/lib/event-bus.ts — feature間連携のためのイベントバス
type EventHandler<T = unknown> = (data: T) => void;
 
class EventBus {
  private handlers = new Map<string, Set<EventHandler>>();
 
  on<T>(event: string, handler: EventHandler<T>): () => void {
    if (!this.handlers.has(event)) {
      this.handlers.set(event, new Set());
    }
    this.handlers.get(event)!.add(handler as EventHandler);
 
    // unsubscribe 関数を返す
    return () => {
      this.handlers.get(event)?.delete(handler as EventHandler);
    };
  }
 
  emit<T>(event: string, data: T): void {
    this.handlers.get(event)?.forEach(handler => handler(data));
  }
}
 
export const eventBus = new EventBus();
 
// shared/types/events.ts
export interface UserCreatedEvent {
  userId: string;
  email: string;
  name: string;
}
 
export interface OrderCompletedEvent {
  orderId: string;
  userId: string;
  total: number;
}
 
// features/users/api/actions.ts — イベント発行
import { eventBus } from '@/shared/lib/event-bus';
import type { UserCreatedEvent } from '@/shared/types/events';
 
export async function createUser(input: CreateUserInput) {
  const user = await prisma.user.create({ data: input });
 
  eventBus.emit<UserCreatedEvent>('user:created', {
    userId: user.id,
    email: user.email,
    name: user.name,
  });
 
  return { data: user };
}
 
// features/notifications/hooks/useUserEvents.ts — イベント購読
import { useEffect } from 'react';
import { eventBus } from '@/shared/lib/event-bus';
import type { UserCreatedEvent } from '@/shared/types/events';
 
export function useUserEvents() {
  useEffect(() => {
    const unsubscribe = eventBus.on<UserCreatedEvent>(
      'user:created',
      (data) => {
        // 通知を表示
        showNotification(`New user: ${data.name}`);
      }
    );
 
    return unsubscribe;
  }, []);
}

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@features/*": ["./src/features/*"],
      "@shared/*": ["./src/shared/*"],
      "@app/*": ["./src/app/*"],
      "@tests/*": ["./tests/*"]
    }
  }
}

// パスエイリアスの使用例
 
// BAD: 相対パスはネストが深いと読みにくい
import { Button } from '../../../shared/components/ui/Button';
import { useUsers } from '../../users/hooks/useUsers';
import { formatDate } from '../../../shared/lib/utils';
 
// GOOD: パスエイリアスで明確
import { Button } from '@/shared/components/ui/Button';
import { useUsers } from '@/features/users';
import { formatDate } from '@/shared/lib/utils';
 
// さらに良い: feature の index.ts 経由
import { UserList, useUsers, type User } from '@features/users';
import { Button, Modal, Table } from '@shared/components/ui';

// .eslintrc.js
module.exports = {
  plugins: ['import', 'boundaries'],
  settings: {
    'import/resolver': {
      typescript: {
        alwaysTryTypes: true,
      },
    },
    // boundaries プラグインの設定
    'boundaries/elements': [
      { type: 'app', pattern: 'src/app/*' },
      { type: 'features', pattern: 'src/features/*' },
      { type: 'shared', pattern: 'src/shared/*' },
    ],
    'boundaries/ignore': ['**/*.test.*', '**/*.spec.*'],
  },
  rules: {
    // features 間の直接 import を禁止
    'import/no-restricted-paths': [
      'error',
      {
        zones: [
          // features/users/ から features/orders/ への import を禁止
          {
            target: './src/features/users/**',
            from: './src/features/orders/**',
            message: 'Feature modules cannot import from other features directly. Use shared/ instead.',
          },
          {
            target: './src/features/orders/**',
            from: './src/features/users/**',
            message: 'Feature modules cannot import from other features directly. Use shared/ instead.',
          },
          // shared/ から features/ への import を禁止
          {
            target: './src/shared/**',
            from: './src/features/**',
            message: 'Shared modules cannot depend on feature modules.',
          },
        ],
      },
    ],
 
    // import の順序を統一
    'import/order': [
      'error',
      {
        groups: [
          'builtin',       // Node.js 組み込みモジュール
          'external',      // npm パッケージ
          'internal',      // パスエイリアス
          'parent',        // 親ディレクトリ
          'sibling',       // 同階層
          'index',         // index ファイル
          'type',          // 型 import
        ],
        pathGroups: [
          { pattern: 'react', group: 'builtin', position: 'before' },
          { pattern: 'next/**', group: 'builtin', position: 'before' },
          { pattern: '@/features/**', group: 'internal', position: 'before' },
          { pattern: '@/shared/**', group: 'internal', position: 'after' },
        ],
        'newlines-between': 'always',
        alphabetize: { order: 'asc', caseInsensitive: true },
      },
    ],
 
    // feature 内部ファイルへの直接アクセスを禁止
    'no-restricted-imports': [
      'error',
      {
        patterns: [
          {
            group: ['@/features/*/components/*', '@/features/*/hooks/*', '@/features/*/api/*'],
            message: 'Import from the feature index file instead: @/features/<name>',
          },
        ],
      },
    ],
  },
};

// Barrel Export（index.ts からの再 export）
// src/shared/components/ui/index.ts
export { Button } from './Button';
export { Input } from './Input';
export { Modal } from './Modal';
export { Table } from './Table';
export { Select } from './Select';
export { Checkbox } from './Checkbox';
export { Skeleton } from './Skeleton';
export { Badge } from './Badge';
export { Card, CardHeader, CardContent, CardFooter } from './Card';
export { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs';
 
// 使用側
import { Button, Modal, Table } from '@/shared/components/ui';

// next.config.js — modularizeImports で barrel export の問題を回避
/** @type {import('next').NextConfig} */
const nextConfig = {
  modularizeImports: {
    // lodash の個別インポートに自動変換
    'lodash': {
      transform: 'lodash/{{member}}',
    },
    // @/shared/components/ui の個別インポートに自動変換
    '@/shared/components/ui': {
      transform: '@/shared/components/ui/{{member}}',
    },
  },
};
 
module.exports = nextConfig;

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**", "dist/**"],
      "env": ["DATABASE_URL", "NEXT_PUBLIC_*"]
    },
    "dev": {
      "dependsOn": ["^build"],
      "cache": false,
      "persistent": true
    },
    "lint": {
      "dependsOn": ["^build"]
    },
    "test": {
      "dependsOn": ["^build"],
      "outputs": ["coverage/**"]
    },
    "test:e2e": {
      "dependsOn": ["^build"],
      "outputs": [],
      "cache": false
    },
    "type-check": {
      "dependsOn": ["^build"]
    },
    "clean": {
      "cache": false
    }
  }
}

# pnpm-workspace.yaml
packages:
  - "apps/*"
  - "packages/*"
  - "tooling/*"

// package.json（ルート）
{
  "name": "my-monorepo",
  "private": true,
  "scripts": {
    "dev": "turbo dev",
    "build": "turbo build",
    "lint": "turbo lint",
    "test": "turbo test",
    "type-check": "turbo type-check",
    "clean": "turbo clean",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
    "db:push": "pnpm --filter @repo/db db:push",
    "db:studio": "pnpm --filter @repo/db db:studio",
    "db:generate": "pnpm --filter @repo/db db:generate"
  },
  "devDependencies": {
    "prettier": "^3.2.0",
    "turbo": "^2.0.0"
  },
  "packageManager": "pnpm@9.0.0"
}

// packages/ui/package.json
{
  "name": "@repo/ui",
  "version": "0.0.0",
  "private": true,
  "main": "./src/index.ts",
  "types": "./src/index.ts",
  "exports": {
    ".": "./src/index.ts",
    "./*": "./src/*.tsx"
  },
  "dependencies": {
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "tailwind-merge": "^2.2.0"
  },
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@repo/typescript-config": "workspace:*",
    "typescript": "^5.3.0"
  }
}

// packages/ui/src/Button.tsx
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from './utils';
import { forwardRef } from 'react';
 
const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        outline: 'border border-input bg-background hover:bg-accent',
        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-10 px-4 py-2',
        sm: 'h-9 rounded-md px-3',
        lg: 'h-11 rounded-md px-8',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  }
);
 
export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}
 
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <button
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    );
  }
);
Button.displayName = 'Button';
 
export { Button, buttonVariants };
 
// packages/ui/src/index.ts
export { Button, type ButtonProps, buttonVariants } from './Button';
export { Input, type InputProps } from './Input';
export { Modal, type ModalProps } from './Modal';
export { Table } from './Table';

// apps/web/src/app/page.tsx — 共有パッケージの使用
import { Button } from '@repo/ui';
import { formatDate } from '@repo/utils';
import type { User } from '@repo/types';
 
export default function HomePage() {
  return (
    <div>
      <h1>Welcome</h1>
      <Button variant="default" size="lg">
        Get Started
      </Button>
    </div>
  );
}

# .github/workflows/ci.yml
name: CI
on:
  pull_request:
    branches: [main]
  push:
    branches: [main]
 
env:
  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
  TURBO_TEAM: ${{ vars.TURBO_TEAM }}
 
jobs:
  lint-and-type-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
      - run: pnpm install --frozen-lockfile
      - run: pnpm lint
      - run: pnpm type-check
 
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
      - run: pnpm install --frozen-lockfile
      - run: pnpm test
 
  build:
    runs-on: ubuntu-latest
    needs: [lint-and-type-check, test]
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
      - run: pnpm install --frozen-lockfile
      - run: pnpm build
        env:
          DATABASE_URL: ${{ secrets.DATABASE_URL }}
 
  # 影響を受けたパッケージのみデプロイ
  deploy:
    runs-on: ubuntu-latest
    needs: build
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 2  # turbo の変更検出に必要
      - uses: pnpm/action-setup@v3
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
      - run: pnpm install --frozen-lockfile
      # 変更があった app のみをデプロイ
      - run: pnpm turbo build --filter=...[HEAD~1]

// vitest.config.ts — ユニットテスト設定
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
import path from 'path';
 
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./tests/setup.ts'],
    include: [
      'src/**/*.test.{ts,tsx}',
      'src/**/*.spec.{ts,tsx}',
    ],
    exclude: [
      'node_modules',
      'tests/e2e/**',
    ],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      include: ['src/**/*.{ts,tsx}'],
      exclude: [
        'src/**/*.test.{ts,tsx}',
        'src/**/*.d.ts',
        'src/**/index.ts',    // barrel files
        'src/app/**',          // ルーティングファイル
      ],
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@features': path.resolve(__dirname, './src/features'),
      '@shared': path.resolve(__dirname, './src/shared'),
    },
  },
});
 
// playwright.config.ts — E2Eテスト設定
import { defineConfig, devices } from '@playwright/test';
 
export default defineConfig({
  testDir: './tests/e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: process.env.CI ? 'github' : 'html',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'mobile-chrome', use: { ...devices['Pixel 5'] } },
  ],
  webServer: {
    command: 'pnpm dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

// features/users/components/UserList.test.tsx
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi } from 'vitest';
import { UserList } from './UserList';
 
// Server Component のテスト（async component）
describe('UserList', () => {
  it('ユーザー一覧を表示する', async () => {
    // Server Component は直接レンダリングをテスト
    const result = await UserList({ page: 1 });
    render(result);
 
    expect(screen.getByRole('table')).toBeInTheDocument();
    expect(screen.getAllByRole('row')).toHaveLength(21); // header + 20 rows
  });
 
  it('ユーザーが0件の場合、空状態メッセージを表示する', async () => {
    vi.mocked(getUsers).mockResolvedValueOnce({
      users: [],
      pagination: { page: 1, limit: 20, total: 0, totalPages: 0 },
    });
 
    const result = await UserList({ page: 1 });
    render(result);
 
    expect(screen.getByText('No users found')).toBeInTheDocument();
  });
});
 
// features/users/hooks/useUsers.test.ts
import { renderHook, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { describe, it, expect, vi } from 'vitest';
import { useUsers } from './useUsers';
 
function createWrapper() {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: { retry: false },
    },
  });
 
  return ({ children }: { children: React.ReactNode }) => (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}
 
describe('useUsers', () => {
  it('ユーザー一覧を取得できる', async () => {
    const { result } = renderHook(() => useUsers(), {
      wrapper: createWrapper(),
    });
 
    await waitFor(() => {
      expect(result.current.isSuccess).toBe(true);
    });
 
    expect(result.current.data?.users).toHaveLength(20);
  });
 
  it('検索フィルターを適用できる', async () => {
    const { result } = renderHook(
      () => useUsers({ search: 'John' }),
      { wrapper: createWrapper() }
    );
 
    await waitFor(() => {
      expect(result.current.isSuccess).toBe(true);
    });
 
    expect(result.current.data?.users).toEqual(
      expect.arrayContaining([
        expect.objectContaining({ name: expect.stringContaining('John') }),
      ])
    );
  });
});
 
// features/users/api/actions.test.ts — Server Actions のテスト
import { describe, it, expect, beforeEach } from 'vitest';
import { createUser, updateUser, deleteUser } from './actions';
import { prisma } from '@/shared/lib/db';
 
// Prisma のモック
vi.mock('@/shared/lib/db', () => ({
  prisma: {
    user: {
      create: vi.fn(),
      findUnique: vi.fn(),
      update: vi.fn(),
      delete: vi.fn(),
    },
  },
}));
 
describe('createUser', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });
 
  it('有効な入力でユーザーを作成できる', async () => {
    vi.mocked(prisma.user.findUnique).mockResolvedValue(null);
    vi.mocked(prisma.user.create).mockResolvedValue({
      id: '1',
      name: 'John Doe',
      email: 'john@example.com',
      role: 'member',
      avatarUrl: null,
      createdAt: new Date(),
      updatedAt: new Date(),
    });
 
    const result = await createUser({
      name: 'John Doe',
      email: 'john@example.com',
    });
 
    expect(result.data).toBeDefined();
    expect(result.data?.name).toBe('John Doe');
    expect(prisma.user.create).toHaveBeenCalledOnce();
  });
 
  it('既存メールアドレスの場合エラーを返す', async () => {
    vi.mocked(prisma.user.findUnique).mockResolvedValue({
      id: '1',
      name: 'Existing',
      email: 'john@example.com',
      role: 'member',
      avatarUrl: null,
      createdAt: new Date(),
      updatedAt: new Date(),
    });
 
    const result = await createUser({
      name: 'John Doe',
      email: 'john@example.com',
    });
 
    expect(result.error).toBe('A user with this email already exists');
    expect(prisma.user.create).not.toHaveBeenCalled();
  });
 
  it('バリデーション違反の場合エラーをスローする', async () => {
    await expect(
      createUser({ name: '', email: 'invalid' })
    ).rejects.toThrow();
  });
});

// ディレクトリ名は kebab-case を使用
// GOOD
src/features/user-management/
src/features/order-processing/
src/shared/components/data-table/
 
// BAD
src/features/UserManagement/    // PascalCase はコンポーネント名に予約
src/features/userManagement/    // camelCase はファイル名に予約
src/features/user_management/   // snake_case は使わない
 
// 例外: Next.js の動的ルートとルートグループ
src/app/[slug]/                 // 動的セグメント
src/app/(marketing)/            // ルートグループ
src/app/[...catchAll]/          // キャッチオールセグメント
src/app/@modal/                 // Parallel Routes（Named Slot）
src/app/(.)photo/               // Intercepting Routes

// コンポーネント: PascalCase の名前付き export
// features/users/components/UserList.tsx
export function UserList({ users }: UserListProps) { ... }
 
// BAD: default export（名前の一貫性が保てない）
export default function UserList() { ... }
// 別ファイルで import するとき任意の名前にできてしまう:
// import UsersList from './UserList';  // 異なる名前でも動く
 
// hooks: camelCase の名前付き export
// features/users/hooks/useUsers.ts
export function useUsers(filters?: UserFilters) { ... }
 
// 型: PascalCase の名前付き export（type キーワード付き）
// features/users/types/user.ts
export interface User { ... }
export type UserRole = 'admin' | 'member' | 'viewer';
 
// 定数: UPPER_SNAKE_CASE
// shared/constants/config.ts
export const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
export const SUPPORTED_FORMATS = ['image/jpeg', 'image/png', 'image/webp'] as const;
export const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:3001';
 
// enum の代替: as const オブジェクト
export const USER_ROLES = {
  ADMIN: 'admin',
  MEMBER: 'member',
  VIEWER: 'viewer',
} as const;
 
export type UserRole = typeof USER_ROLES[keyof typeof USER_ROLES];

# Architecture
 
## ディレクトリ構成
 
このプロジェクトは Feature-based 構成を採用しています。
 
### ルール
1. `app/` にはルーティングとページコンポーネントのみ配置
2. ビジネスロジックは `features/` に配置
3. 2つ以上の feature で使うものは `shared/` に配置
4. features 間の直接 import は禁止
 
### 新しい feature の追加手順
1. `src/features/<feature-name>/` ディレクトリを作成
2. components/, hooks/, api/, types/ サブディレクトリを作成
3. index.ts で公開APIを定義
4. テストを追加
5. ESLint ルールに新しい feature を追加
 
### 依存関係図
app/ → features/ → shared/
app/ → shared/
 
### ADR
決定記録は docs/adr/ に保管しています。

// 問題: barrel export による不要なモジュール読み込み
// BAD: shared/components/ui/index.ts から1つだけ使う場合でも
// 全コンポーネントが読み込まれる可能性がある
import { Button } from '@/shared/components/ui';
 
// GOOD: 直接インポート（Tree-shaking に確実に効く）
import { Button } from '@/shared/components/ui/Button';
 
// GOOD: next.config.js で modularizeImports を設定（前述）
 
// 問題: 大きな feature モジュールの動的インポート
// クライアントサイドで重い feature を遅延読み込み
import dynamic from 'next/dynamic';
 
const HeavyChart = dynamic(
  () => import('@/features/analytics/components/HeavyChart'),
  {
    loading: () => <Skeleton className="h-64" />,
    ssr: false, // クライアントサイドのみ
  }
);
 
// 問題: Server Components でのデータプリフェッチ
// features/users/components/UserList.tsx
import { Suspense } from 'react';
import { getUsers } from '../api/queries';
 
// Streaming SSR でデータ取得を並列化
export async function UserList() {
  const { users } = await getUsers();
 
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

# Step 1: パスエイリアス導入（影響範囲: 低）
# tsconfig.json に paths 設定を追加
# 相対パス → @/features/xxx に置換
 
# Step 2: shared/ ディレクトリ作成（影響範囲: 中）
# 共通コンポーネントを shared/components/ に移動
# 共通hooks を shared/hooks/ に移動
 
# Step 3: features/ ディレクトリ作成（影響範囲: 高）
# 機能ごとにディレクトリを作成
# 関連ファイルを機能ディレクトリに移動
# index.ts で公開APIを定義
 
# Step 4: ESLint ルール追加（影響範囲: 低）
# no-restricted-imports で依存ルールを強制
 
# Step 5: モノレポ化（影響範囲: 最高）
# Turborepo 導入、パッケージ分割