# Model — ビジネスロジックとデータアクセス
# app/models/user.rb
class User < ApplicationRecord
  has_many :posts, dependent: :destroy
  has_many :comments
  belongs_to :organization, optional: true
 
  validates :email, presence: true, uniqueness: { case_sensitive: false }
  validates :name, presence: true, length: { maximum: 100 }
  validates :age, numericality: { greater_than: 0, less_than: 150 }, allow_nil: true
 
  scope :active, -> { where(active: true) }
  scope :recent, -> { order(created_at: :desc).limit(10) }
  scope :with_posts, -> { includes(:posts).where.not(posts: { id: nil }) }
 
  # ビジネスロジックは Model に置く
  def full_name
    "#{first_name} #{last_name}"
  end
 
  def deactivate!
    update!(active: false, deactivated_at: Time.current)
  end
 
  def can_post?
    active? && posts.where("created_at > ?", 1.day.ago).count < 10
  end
end

# Controller — リクエスト処理とレスポンス制御
# app/controllers/users_controller.rb
class UsersController < ApplicationController
  before_action :authenticate_user!
  before_action :set_user, only: [:show, :edit, :update, :destroy]
 
  def index
    @users = User.active.recent
    respond_to do |format|
      format.html                    # View テンプレートを描画
      format.json { render json: @users }
    end
  end
 
  def show
    @posts = @user.posts.recent
  end
 
  def create
    @user = User.new(user_params)
    if @user.save
      UserMailer.welcome(@user).deliver_later
      redirect_to @user, notice: "ユーザーを作成しました"
    else
      render :new, status: :unprocessable_entity
    end
  end
 
  def update
    if @user.update(user_params)
      redirect_to @user, notice: "ユーザー情報を更新しました"
    else
      render :edit, status: :unprocessable_entity
    end
  end
 
  def destroy
    @user.deactivate!
    redirect_to users_path, notice: "ユーザーを無効化しました"
  end
 
  private
 
  def set_user
    @user = User.find(params[:id])
  end
 
  def user_params
    params.require(:user).permit(:name, :email, :first_name, :last_name, :age)
  end
end

<!-- View — プレゼンテーション -->
<!-- app/views/users/index.html.erb -->
<h1>ユーザー一覧</h1>
 
<div class="search-bar">
  <%= form_tag users_path, method: :get do %>
    <%= text_field_tag :q, params[:q], placeholder: "名前で検索..." %>
    <%= submit_tag "検索" %>
  <% end %>
</div>
 
<% if @users.any? %>
  <div class="user-list">
    <% @users.each do |user| %>
      <div class="user-card">
        <h2><%= user.full_name %></h2>
        <p class="email"><%= user.email %></p>
        <p class="stats">投稿数: <%= user.posts.count %></p>
        <%= link_to "詳細", user_path(user), class: "btn" %>
      </div>
    <% end %>
  </div>
  <%= paginate @users %>
<% else %>
  <p class="empty-state">ユーザーが見つかりませんでした</p>
<% end %>

// ============================================================
// Model — ビジネスロジックとデータアクセス
// ============================================================
interface User {
  id: string;
  name: string;
  email: string;
  role: "admin" | "user" | "moderator";
  active: boolean;
  createdAt: Date;
}
 
interface CreateUserDTO {
  name: string;
  email: string;
  role?: "admin" | "user" | "moderator";
}
 
class UserModel {
  constructor(private db: Database) {}
 
  async findAll(options?: {
    page?: number;
    limit?: number;
    active?: boolean;
  }): Promise<{ users: User[]; total: number }> {
    const page = options?.page ?? 1;
    const limit = options?.limit ?? 20;
    const offset = (page - 1) * limit;
 
    const whereClause = options?.active !== undefined
      ? "WHERE active = $3"
      : "";
 
    const params = options?.active !== undefined
      ? [limit, offset, options.active]
      : [limit, offset];
 
    const [rows, countResult] = await Promise.all([
      this.db.query(
        `SELECT * FROM users ${whereClause} ORDER BY created_at DESC LIMIT $1 OFFSET $2`,
        params
      ),
      this.db.query(`SELECT COUNT(*) as total FROM users ${whereClause}`),
    ]);
 
    return { users: rows, total: countResult[0].total };
  }
 
  async findById(id: string): Promise<User | null> {
    const rows = await this.db.query(
      "SELECT * FROM users WHERE id = $1",
      [id]
    );
    return rows[0] ?? null;
  }
 
  async findByEmail(email: string): Promise<User | null> {
    const rows = await this.db.query(
      "SELECT * FROM users WHERE email = $1",
      [id]
    );
    return rows[0] ?? null;
  }
 
  async create(data: CreateUserDTO): Promise<User> {
    const id = crypto.randomUUID();
    const rows = await this.db.query(
      `INSERT INTO users (id, name, email, role, active, created_at)
       VALUES ($1, $2, $3, $4, true, NOW()) RETURNING *`,
      [id, data.name, data.email, data.role ?? "user"]
    );
    return rows[0];
  }
 
  async update(id: string, data: Partial<CreateUserDTO>): Promise<User | null> {
    const sets: string[] = [];
    const params: unknown[] = [];
    let paramIndex = 1;
 
    for (const [key, value] of Object.entries(data)) {
      if (value !== undefined) {
        sets.push(`${key} = $${paramIndex}`);
        params.push(value);
        paramIndex++;
      }
    }
 
    if (sets.length === 0) return this.findById(id);
 
    params.push(id);
    const rows = await this.db.query(
      `UPDATE users SET ${sets.join(", ")} WHERE id = $${paramIndex} RETURNING *`,
      params
    );
    return rows[0] ?? null;
  }
}
 
// ============================================================
// Controller — リクエスト処理とレスポンス制御
// ============================================================
class UserController {
  constructor(private model: UserModel) {}
 
  async index(req: Request, res: Response): Promise<void> {
    const page = parseInt(req.query.page as string) || 1;
    const { users, total } = await this.model.findAll({ page, active: true });
 
    // Content Negotiation
    if (req.accepts("json")) {
      res.json({ data: users, total, page });
    } else {
      res.render("users/index", { users, total, page });
    }
  }
 
  async show(req: Request, res: Response): Promise<void> {
    const user = await this.model.findById(req.params.id);
    if (!user) {
      res.status(404).render("errors/404", { message: "ユーザーが見つかりません" });
      return;
    }
    res.render("users/show", { user });
  }
 
  async create(req: Request, res: Response): Promise<void> {
    try {
      // バリデーション
      const { name, email, role } = req.body;
      if (!name || !email) {
        res.status(422).render("users/new", {
          errors: ["名前とメールアドレスは必須です"],
        });
        return;
      }
 
      // 重複チェック
      const existing = await this.model.findByEmail(email);
      if (existing) {
        res.status(422).render("users/new", {
          errors: ["このメールアドレスは既に登録されています"],
        });
        return;
      }
 
      const user = await this.model.create({ name, email, role });
      res.redirect(`/users/${user.id}`);
    } catch (error) {
      res.status(500).render("errors/500", {
        message: "ユーザー作成に失敗しました",
      });
    }
  }
}
 
// ============================================================
// Router (ルーティング定義)
// ============================================================
const userModel = new UserModel(database);
const userController = new UserController(userModel);
 
router.get("/users", (req, res) => userController.index(req, res));
router.get("/users/:id", (req, res) => userController.show(req, res));
router.post("/users", (req, res) => userController.create(req, res));

# ============================================================
# Model — Django ORM
# ============================================================
# models.py
from django.db import models
from django.core.validators import MinValueValidator
 
class User(models.Model):
    """ユーザーモデル — ビジネスロジックをモデルに集約"""
 
    class Role(models.TextChoices):
        ADMIN = "admin", "管理者"
        USER = "user", "一般ユーザー"
        MODERATOR = "moderator", "モデレーター"
 
    name = models.CharField(max_length=100)
    email = models.EmailField(unique=True)
    role = models.CharField(max_length=20, choices=Role.choices, default=Role.USER)
    active = models.BooleanField(default=True)
    created_at = models.DateTimeField(auto_now_add=True)
 
    class Meta:
        ordering = ["-created_at"]
 
    def __str__(self):
        return f"{self.name} ({self.email})"
 
    @property
    def is_admin(self):
        return self.role == self.Role.ADMIN
 
    def deactivate(self):
        """ユーザーを無効化（ソフトデリート）"""
        self.active = False
        self.save(update_fields=["active"])
 
 
# ============================================================
# View (Django では View が Controller の役割)
# ============================================================
# views.py
from django.views.generic import ListView, DetailView, CreateView
from django.contrib.auth.mixins import LoginRequiredMixin
 
class UserListView(LoginRequiredMixin, ListView):
    """ユーザー一覧表示"""
    model = User
    template_name = "users/list.html"
    context_object_name = "users"
    paginate_by = 20
 
    def get_queryset(self):
        qs = super().get_queryset().filter(active=True)
        query = self.request.GET.get("q")
        if query:
            qs = qs.filter(name__icontains=query)
        return qs
 
 
class UserDetailView(LoginRequiredMixin, DetailView):
    """ユーザー詳細表示"""
    model = User
    template_name = "users/detail.html"
    context_object_name = "user"
 
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context["posts"] = self.object.posts.all()[:10]
        return context
 
 
class UserCreateView(LoginRequiredMixin, CreateView):
    """ユーザー作成"""
    model = User
    template_name = "users/form.html"
    fields = ["name", "email", "role"]
    success_url = "/users/"
 
    def form_valid(self, form):
        # 追加のビジネスロジック
        response = super().form_valid(form)
        send_welcome_email.delay(self.object.id)  # 非同期タスク
        return response

// ============================================================
// Contract — View と Presenter のインターフェースを定義
// ============================================================
interface UserListContract {
    interface View {
        fun showUsers(users: List<UserUiModel>)
        fun showLoading()
        fun hideLoading()
        fun showError(message: String)
        fun navigateToDetail(userId: String)
    }
 
    interface Presenter {
        fun loadUsers()
        fun onUserClicked(userId: String)
        fun onSearchQueryChanged(query: String)
        fun onDestroy()
    }
}
 
// ============================================================
// Model — データアクセスとビジネスロジック
// ============================================================
data class User(
    val id: String,
    val name: String,
    val email: String,
    val active: Boolean
)
 
data class UserUiModel(
    val id: String,
    val displayName: String,
    val email: String,
    val statusBadge: String
)
 
interface UserRepository {
    suspend fun getUsers(): Result<List<User>>
    suspend fun searchUsers(query: String): Result<List<User>>
}
 
// ============================================================
// Presenter — ロジックの中心
// ============================================================
class UserListPresenter(
    private val view: UserListContract.View,
    private val repository: UserRepository,
    private val dispatcher: CoroutineDispatcher = Dispatchers.Main
) : UserListContract.Presenter {
 
    private val scope = CoroutineScope(dispatcher + SupervisorJob())
 
    override fun loadUsers() {
        view.showLoading()
        scope.launch {
            repository.getUsers()
                .onSuccess { users ->
                    val uiModels = users.map { it.toUiModel() }
                    view.hideLoading()
                    view.showUsers(uiModels)
                }
                .onFailure { error ->
                    view.hideLoading()
                    view.showError("ユーザーの読み込みに失敗しました: ${error.message}")
                }
        }
    }
 
    override fun onUserClicked(userId: String) {
        view.navigateToDetail(userId)
    }
 
    override fun onSearchQueryChanged(query: String) {
        scope.launch {
            repository.searchUsers(query)
                .onSuccess { users ->
                    view.showUsers(users.map { it.toUiModel() })
                }
        }
    }
 
    override fun onDestroy() {
        scope.cancel()
    }
 
    private fun User.toUiModel() = UserUiModel(
        id = id,
        displayName = name,
        email = email,
        statusBadge = if (active) "Active" else "Inactive"
    )
}
 
// ============================================================
// View (Activity) — 描画のみ
// ============================================================
class UserListActivity : AppCompatActivity(), UserListContract.View {
 
    private lateinit var presenter: UserListContract.Presenter
    private lateinit var adapter: UserListAdapter
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_user_list)
 
        adapter = UserListAdapter { userId ->
            presenter.onUserClicked(userId)
        }
        recyclerView.adapter = adapter
 
        presenter = UserListPresenter(
            view = this,
            repository = UserRepositoryImpl(apiService)
        )
        presenter.loadUsers()
    }
 
    override fun showUsers(users: List<UserUiModel>) {
        adapter.submitList(users)
    }
 
    override fun showLoading() {
        progressBar.visibility = View.VISIBLE
    }
 
    override fun hideLoading() {
        progressBar.visibility = View.GONE
    }
 
    override fun showError(message: String) {
        Snackbar.make(rootView, message, Snackbar.LENGTH_LONG).show()
    }
 
    override fun navigateToDetail(userId: String) {
        startActivity(UserDetailActivity.intent(this, userId))
    }
 
    override fun onDestroy() {
        super.onDestroy()
        presenter.onDestroy()
    }
}

// ============================================================
// Presenter のテスト — View のモック
// ============================================================
class UserListPresenterTest {
 
    private lateinit var view: UserListContract.View
    private lateinit var repository: UserRepository
    private lateinit var presenter: UserListPresenter
 
    @Before
    fun setup() {
        view = mock()
        repository = mock()
        // テスト用ディスパッチャーで同期実行
        presenter = UserListPresenter(view, repository, Dispatchers.Unconfined)
    }
 
    @Test
    fun `loadUsers - 成功時にユーザーリストを表示する`() = runTest {
        // Arrange
        val users = listOf(
            User("1", "Alice", "alice@example.com", true),
            User("2", "Bob", "bob@example.com", false),
        )
        whenever(repository.getUsers()).thenReturn(Result.success(users))
 
        // Act
        presenter.loadUsers()
 
        // Assert
        verify(view).showLoading()
        verify(view).hideLoading()
        verify(view).showUsers(argThat { size == 2 })
        verify(view, never()).showError(any())
    }
 
    @Test
    fun `loadUsers - 失敗時にエラーメッセージを表示する`() = runTest {
        // Arrange
        whenever(repository.getUsers()).thenReturn(
            Result.failure(IOException("Network error"))
        )
 
        // Act
        presenter.loadUsers()
 
        // Assert
        verify(view).showLoading()
        verify(view).hideLoading()
        verify(view).showError(contains("ユーザーの読み込みに失敗しました"))
        verify(view, never()).showUsers(any())
    }
 
    @Test
    fun `onUserClicked - 詳細画面に遷移する`() {
        // Act
        presenter.onUserClicked("user-123")
 
        // Assert
        verify(view).navigateToDetail("user-123")
    }
}

// ============================================================
// Model — API クライアントとドメインロジック
// ============================================================
interface User {
  id: string;
  name: string;
  email: string;
  role: "admin" | "user";
  createdAt: string;
}
 
interface CreateUserInput {
  name: string;
  email: string;
}
 
// API クライアント（Model 層）
class UserApiClient {
  private baseUrl: string;
 
  constructor(baseUrl: string = "/api") {
    this.baseUrl = baseUrl;
  }
 
  async fetchAll(params?: { search?: string; page?: number }): Promise<{
    users: User[];
    total: number;
  }> {
    const query = new URLSearchParams();
    if (params?.search) query.set("q", params.search);
    if (params?.page) query.set("page", String(params.page));
 
    const res = await fetch(`${this.baseUrl}/users?${query}`);
    if (!res.ok) throw new ApiError("Failed to fetch users", res.status);
    return res.json();
  }
 
  async create(data: CreateUserInput): Promise<User> {
    const res = await fetch(`${this.baseUrl}/users`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });
    if (!res.ok) {
      const error = await res.json();
      throw new ApiError(error.message ?? "Failed to create user", res.status);
    }
    return res.json();
  }
 
  async delete(id: string): Promise<void> {
    const res = await fetch(`${this.baseUrl}/users/${id}`, {
      method: "DELETE",
    });
    if (!res.ok) throw new ApiError("Failed to delete user", res.status);
  }
}
 
class ApiError extends Error {
  constructor(message: string, public statusCode: number) {
    super(message);
    this.name = "ApiError";
  }
}
 
// ドメインロジック（Model 層）
function sortUsers(users: User[], sortBy: "name" | "createdAt"): User[] {
  return [...users].sort((a, b) => {
    if (sortBy === "name") return a.name.localeCompare(b.name);
    return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
  });
}
 
function filterUsers(users: User[], query: string): User[] {
  const lower = query.toLowerCase();
  return users.filter(
    (u) =>
      u.name.toLowerCase().includes(lower) ||
      u.email.toLowerCase().includes(lower)
  );
}
 
// ============================================================
// ViewModel — Custom Hook
// ============================================================
interface UserListState {
  users: User[];
  total: number;
  loading: boolean;
  error: string | null;
  searchQuery: string;
  sortBy: "name" | "createdAt";
  page: number;
}
 
function useUserList(apiClient: UserApiClient = new UserApiClient()) {
  const [state, setState] = useState<UserListState>({
    users: [],
    total: 0,
    loading: true,
    error: null,
    searchQuery: "",
    sortBy: "createdAt",
    page: 1,
  });
 
  // データ取得
  const loadUsers = useCallback(async () => {
    setState((prev) => ({ ...prev, loading: true, error: null }));
    try {
      const { users, total } = await apiClient.fetchAll({
        search: state.searchQuery,
        page: state.page,
      });
      setState((prev) => ({ ...prev, users, total, loading: false }));
    } catch (e) {
      setState((prev) => ({
        ...prev,
        loading: false,
        error: e instanceof Error ? e.message : "Unknown error",
      }));
    }
  }, [apiClient, state.searchQuery, state.page]);
 
  useEffect(() => {
    loadUsers();
  }, [loadUsers]);
 
  // アクション
  const setSearchQuery = useCallback((query: string) => {
    setState((prev) => ({ ...prev, searchQuery: query, page: 1 }));
  }, []);
 
  const setSortBy = useCallback((sortBy: "name" | "createdAt") => {
    setState((prev) => ({ ...prev, sortBy }));
  }, []);
 
  const setPage = useCallback((page: number) => {
    setState((prev) => ({ ...prev, page }));
  }, []);
 
  const addUser = useCallback(
    async (input: CreateUserInput) => {
      const newUser = await apiClient.create(input);
      setState((prev) => ({
        ...prev,
        users: [newUser, ...prev.users],
        total: prev.total + 1,
      }));
    },
    [apiClient]
  );
 
  const deleteUser = useCallback(
    async (id: string) => {
      await apiClient.delete(id);
      setState((prev) => ({
        ...prev,
        users: prev.users.filter((u) => u.id !== id),
        total: prev.total - 1,
      }));
    },
    [apiClient]
  );
 
  // 算出プロパティ（ViewModel のロジック）
  const sortedUsers = useMemo(
    () => sortUsers(state.users, state.sortBy),
    [state.users, state.sortBy]
  );
 
  const hasNextPage = state.page * 20 < state.total;
  const hasPrevPage = state.page > 1;
 
  return {
    // 状態
    users: sortedUsers,
    total: state.total,
    loading: state.loading,
    error: state.error,
    searchQuery: state.searchQuery,
    sortBy: state.sortBy,
    page: state.page,
    hasNextPage,
    hasPrevPage,
    // アクション
    setSearchQuery,
    setSortBy,
    setPage,
    addUser,
    deleteUser,
    reload: loadUsers,
  };
}
 
// ============================================================
// View — 純粋な表示コンポーネント
// ============================================================
function UserListPage() {
  const {
    users,
    loading,
    error,
    searchQuery,
    setSearchQuery,
    sortBy,
    setSortBy,
    page,
    setPage,
    hasNextPage,
    hasPrevPage,
    deleteUser,
    reload,
  } = useUserList();
 
  if (loading) return <LoadingSpinner />;
  if (error) return <ErrorMessage message={error} onRetry={reload} />;
 
  return (
    <div className="user-list-page">
      <h1>ユーザー一覧</h1>
 
      {/* 検索 + ソート */}
      <div className="controls">
        <SearchInput
          value={searchQuery}
          onChange={setSearchQuery}
          placeholder="名前 or メールで検索"
        />
        <SortSelect
          value={sortBy}
          onChange={setSortBy}
          options={[
            { value: "createdAt", label: "登録日順" },
            { value: "name", label: "名前順" },
          ]}
        />
      </div>
 
      {/* ユーザーリスト */}
      <ul className="user-list">
        {users.map((user) => (
          <UserCard
            key={user.id}
            user={user}
            onDelete={() => deleteUser(user.id)}
          />
        ))}
      </ul>
 
      {/* ページネーション */}
      <Pagination
        page={page}
        onPrev={() => setPage(page - 1)}
        onNext={() => setPage(page + 1)}
        hasPrev={hasPrevPage}
        hasNext={hasNextPage}
      />
    </div>
  );
}

import SwiftUI
import Combine
 
// ============================================================
// Model — データ構造とビジネスロジック
// ============================================================
struct User: Identifiable, Codable, Equatable {
    let id: UUID
    var name: String
    var email: String
    let role: Role
    let createdAt: Date
 
    enum Role: String, Codable {
        case admin, user, moderator
    }
 
    var isAdmin: Bool { role == .admin }
}
 
// API クライアント（Model 層）
protocol UserServiceProtocol {
    func fetchUsers() async throws -> [User]
    func createUser(name: String, email: String) async throws -> User
    func deleteUser(id: UUID) async throws
}
 
class UserService: UserServiceProtocol {
    private let session: URLSession
    private let baseURL: URL
 
    init(baseURL: URL = URL(string: "https://api.example.com")!,
         session: URLSession = .shared) {
        self.baseURL = baseURL
        self.session = session
    }
 
    func fetchUsers() async throws -> [User] {
        let url = baseURL.appendingPathComponent("users")
        let (data, response) = try await session.data(from: url)
        guard let httpResponse = response as? HTTPURLResponse,
              (200...299).contains(httpResponse.statusCode) else {
            throw APIError.invalidResponse
        }
        let decoder = JSONDecoder()
        decoder.dateDecodingStrategy = .iso8601
        return try decoder.decode([User].self, from: data)
    }
 
    func createUser(name: String, email: String) async throws -> User {
        var request = URLRequest(url: baseURL.appendingPathComponent("users"))
        request.httpMethod = "POST"
        request.setValue("application/json", forHTTPHeaderField: "Content-Type")
        request.httpBody = try JSONEncoder().encode(["name": name, "email": email])
 
        let (data, _) = try await session.data(for: request)
        return try JSONDecoder().decode(User.self, from: data)
    }
 
    func deleteUser(id: UUID) async throws {
        var request = URLRequest(
            url: baseURL.appendingPathComponent("users/\(id.uuidString)")
        )
        request.httpMethod = "DELETE"
        let (_, _) = try await session.data(for: request)
    }
}
 
enum APIError: LocalizedError {
    case invalidResponse
    case networkError(Error)
 
    var errorDescription: String? {
        switch self {
        case .invalidResponse: return "サーバーからの応答が不正です"
        case .networkError(let error): return error.localizedDescription
        }
    }
}
 
// ============================================================
// ViewModel — UIの状態とロジック
// ============================================================
@MainActor
class UserListViewModel: ObservableObject {
    // Published = データバインディング対象
    @Published var users: [User] = []
    @Published var isLoading = false
    @Published var errorMessage: String?
    @Published var searchText = ""
    @Published var showingAddSheet = false
 
    private let service: UserServiceProtocol
 
    init(service: UserServiceProtocol = UserService()) {
        self.service = service
    }
 
    // 算出プロパティ — View が参照する表示用データ
    var filteredUsers: [User] {
        guard !searchText.isEmpty else { return users }
        return users.filter {
            $0.name.localizedCaseInsensitiveContains(searchText) ||
            $0.email.localizedCaseInsensitiveContains(searchText)
        }
    }
 
    var userCount: String {
        let count = filteredUsers.count
        return "\(count)件のユーザー"
    }
 
    var hasUsers: Bool { !filteredUsers.isEmpty }
 
    // アクション
    func loadUsers() async {
        isLoading = true
        errorMessage = nil
        do {
            users = try await service.fetchUsers()
        } catch {
            errorMessage = error.localizedDescription
        }
        isLoading = false
    }
 
    func addUser(name: String, email: String) async {
        do {
            let newUser = try await service.createUser(name: name, email: email)
            users.insert(newUser, at: 0)
        } catch {
            errorMessage = "ユーザーの追加に失敗しました: \(error.localizedDescription)"
        }
    }
 
    func deleteUser(at offsets: IndexSet) async {
        let usersToDelete = offsets.map { filteredUsers[$0] }
        for user in usersToDelete {
            do {
                try await service.deleteUser(id: user.id)
                users.removeAll { $0.id == user.id }
            } catch {
                errorMessage = "削除に失敗しました"
            }
        }
    }
}
 
// ============================================================
// View — 宣言的 UI
// ============================================================
struct UserListView: View {
    @StateObject private var viewModel = UserListViewModel()
 
    var body: some View {
        NavigationStack {
            Group {
                if viewModel.isLoading {
                    ProgressView("読み込み中...")
                } else if let error = viewModel.errorMessage {
                    ContentUnavailableView(
                        "エラー",
                        systemImage: "exclamationmark.triangle",
                        description: Text(error)
                    )
                } else if viewModel.hasUsers {
                    userList
                } else {
                    ContentUnavailableView.search
                }
            }
            .navigationTitle("ユーザー一覧")
            .searchable(text: $viewModel.searchText, prompt: "名前 or メールで検索")
            .toolbar {
                ToolbarItem(placement: .primaryAction) {
                    Button("追加") { viewModel.showingAddSheet = true }
                }
                ToolbarItem(placement: .status) {
                    Text(viewModel.userCount)
                        .font(.caption)
                        .foregroundStyle(.secondary)
                }
            }
            .sheet(isPresented: $viewModel.showingAddSheet) {
                AddUserSheet(viewModel: viewModel)
            }
            .refreshable {
                await viewModel.loadUsers()
            }
            .task {
                await viewModel.loadUsers()
            }
        }
    }
 
    private var userList: some View {
        List {
            ForEach(viewModel.filteredUsers) { user in
                NavigationLink(value: user) {
                    UserRow(user: user)
                }
            }
            .onDelete { offsets in
                Task { await viewModel.deleteUser(at: offsets) }
            }
        }
    }
}
 
struct UserRow: View {
    let user: User
 
    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            HStack {
                Text(user.name).font(.headline)
                if user.isAdmin {
                    Text("Admin")
                        .font(.caption2)
                        .padding(.horizontal, 6)
                        .padding(.vertical, 2)
                        .background(.blue.opacity(0.2))
                        .cornerRadius(4)
                }
            }
            Text(user.email)
                .font(.subheadline)
                .foregroundStyle(.secondary)
        }
    }
}

// ============================================================
// Model — API クライアント
// ============================================================
// api/userApi.ts
import type { User, CreateUserInput } from '@/types'
 
export const userApi = {
  async fetchAll(params?: { search?: string; page?: number }): Promise<{
    users: User[];
    total: number;
  }> {
    const query = new URLSearchParams()
    if (params?.search) query.set('q', params.search)
    if (params?.page) query.set('page', String(params.page))
    const res = await fetch(`/api/users?${query}`)
    if (!res.ok) throw new Error('Failed to fetch users')
    return res.json()
  },
 
  async create(data: CreateUserInput): Promise<User> {
    const res = await fetch('/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    })
    if (!res.ok) throw new Error('Failed to create user')
    return res.json()
  },
}
 
// ============================================================
// ViewModel — Composable
// ============================================================
// composables/useUserList.ts
import { ref, computed, watch } from 'vue'
import { userApi } from '@/api/userApi'
import type { User } from '@/types'
 
export function useUserList() {
  // リアクティブ状態
  const users = ref<User[]>([])
  const total = ref(0)
  const loading = ref(false)
  const error = ref<string | null>(null)
  const searchQuery = ref('')
  const sortBy = ref<'name' | 'createdAt'>('createdAt')
 
  // 算出プロパティ（リアクティブに自動更新）
  const sortedUsers = computed(() => {
    return [...users.value].sort((a, b) => {
      if (sortBy.value === 'name') return a.name.localeCompare(b.name)
      return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
    })
  })
 
  const isEmpty = computed(() => users.value.length === 0 && !loading.value)
 
  // アクション
  async function loadUsers() {
    loading.value = true
    error.value = null
    try {
      const result = await userApi.fetchAll({ search: searchQuery.value })
      users.value = result.users
      total.value = result.total
    } catch (e) {
      error.value = e instanceof Error ? e.message : 'Unknown error'
    } finally {
      loading.value = false
    }
  }
 
  async function addUser(name: string, email: string) {
    const newUser = await userApi.create({ name, email })
    users.value.unshift(newUser)
    total.value++
  }
 
  // searchQuery の変更を監視して自動検索
  watch(searchQuery, () => {
    loadUsers()
  }, { debounce: 300 } as any)
 
  // 初期ロード
  loadUsers()
 
  return {
    users: sortedUsers,
    total,
    loading,
    error,
    searchQuery,
    sortBy,
    isEmpty,
    loadUsers,
    addUser,
  }
}
 
// ============================================================
// View — テンプレート
// ============================================================
// components/UserListPage.vue
// <script setup lang="ts">
// import { useUserList } from '@/composables/useUserList'
//
// const {
//   users, loading, error, searchQuery, sortBy, isEmpty, addUser, loadUsers
// } = useUserList()
// </script>
//
// <template>
//   <div class="user-list-page">
//     <h1>ユーザー一覧</h1>
//     <input v-model="searchQuery" placeholder="検索..." />
//     <select v-model="sortBy">
//       <option value="createdAt">登録日順</option>
//       <option value="name">名前順</option>
//     </select>
//     <div v-if="loading">読み込み中...</div>
//     <div v-else-if="error">{{ error }}</div>
//     <div v-else-if="isEmpty">ユーザーが見つかりません</div>
//     <ul v-else>
//       <li v-for="user in users" :key="user.id">
//         {{ user.name }} ({{ user.email }})
//       </li>
//     </ul>
//   </div>
// </template>

// ============================================================
// ViewModel (Custom Hook) のテスト
// ============================================================
import { renderHook, act, waitFor } from "@testing-library/react";
import { useUserList } from "./useUserList";
 
// Mock API Client
const mockApiClient = {
  fetchAll: jest.fn(),
  create: jest.fn(),
  delete: jest.fn(),
} as unknown as UserApiClient;
 
describe("useUserList (ViewModel)", () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });
 
  test("初期ロードでユーザー一覧を取得する", async () => {
    const mockUsers = [
      { id: "1", name: "Alice", email: "alice@example.com", role: "user", createdAt: "2024-01-01" },
      { id: "2", name: "Bob", email: "bob@example.com", role: "admin", createdAt: "2024-01-02" },
    ];
    (mockApiClient.fetchAll as jest.Mock).mockResolvedValue({
      users: mockUsers,
      total: 2,
    });
 
    const { result } = renderHook(() => useUserList(mockApiClient));
 
    // 初期状態: ローディング中
    expect(result.current.loading).toBe(true);
 
    // データ取得完了を待つ
    await waitFor(() => {
      expect(result.current.loading).toBe(false);
    });
 
    // 検証
    expect(result.current.users).toHaveLength(2);
    expect(result.current.total).toBe(2);
    expect(result.current.error).toBeNull();
  });
 
  test("検索クエリを変更するとページがリセットされる", async () => {
    (mockApiClient.fetchAll as jest.Mock).mockResolvedValue({
      users: [],
      total: 0,
    });
 
    const { result } = renderHook(() => useUserList(mockApiClient));
 
    await waitFor(() => {
      expect(result.current.loading).toBe(false);
    });
 
    // ページを2に設定
    act(() => {
      result.current.setPage(2);
    });
    expect(result.current.page).toBe(2);
 
    // 検索すると page が 1 にリセットされる
    act(() => {
      result.current.setSearchQuery("Alice");
    });
    expect(result.current.page).toBe(1);
    expect(result.current.searchQuery).toBe("Alice");
  });
 
  test("ユーザー追加で楽観的更新される", async () => {
    const initialUsers = [
      { id: "1", name: "Alice", email: "alice@example.com", role: "user", createdAt: "2024-01-01" },
    ];
    (mockApiClient.fetchAll as jest.Mock).mockResolvedValue({
      users: initialUsers,
      total: 1,
    });
 
    const newUser = {
      id: "2",
      name: "Bob",
      email: "bob@example.com",
      role: "user",
      createdAt: "2024-01-02",
    };
    (mockApiClient.create as jest.Mock).mockResolvedValue(newUser);
 
    const { result } = renderHook(() => useUserList(mockApiClient));
 
    await waitFor(() => {
      expect(result.current.loading).toBe(false);
    });
 
    // ユーザー追加
    await act(async () => {
      await result.current.addUser({ name: "Bob", email: "bob@example.com" });
    });
 
    // 楽観的更新の検証
    expect(result.current.users).toHaveLength(2);
    expect(result.current.total).toBe(2);
  });
 
  test("API エラー時にエラーメッセージが設定される", async () => {
    (mockApiClient.fetchAll as jest.Mock).mockRejectedValue(
      new Error("Network error")
    );
 
    const { result } = renderHook(() => useUserList(mockApiClient));
 
    await waitFor(() => {
      expect(result.current.loading).toBe(false);
    });
 
    expect(result.current.error).toBe("Network error");
    expect(result.current.users).toHaveLength(0);
  });
});

# NG: Controller にビジネスロジックを詰め込む
class OrdersController < ApplicationController
  def create
    user = User.find(params[:user_id])
    items = params[:items].map { |i| Product.find(i[:product_id]) }
 
    # ビジネスロジックが Controller に...
    total = items.sum(&:price)
    tax = total * 0.10
    discount = user.vip? ? total * 0.05 : 0
    final_total = total + tax - discount
 
    order = Order.create!(user: user, total: final_total, tax: tax)
    items.each { |item| order.order_items.create!(product: item) }
 
    # 通知も Controller で...
    OrderMailer.confirmation(order).deliver_later
    SlackNotifier.new_order(order)
 
    redirect_to order
  end
end
 
# OK: Service Object に分離
# app/services/create_order_service.rb
class CreateOrderService
  def initialize(user_id:, items:)
    @user = User.find(user_id)
    @items = items.map { |i| Product.find(i[:product_id]) }
  end
 
  def call
    order = build_order
    persist_order(order)
    send_notifications(order)
    Result.success(order)
  rescue => e
    Result.failure(e.message)
  end
 
  private
 
  def build_order
    calculator = PriceCalculator.new(@items, @user)
    Order.new(
      user: @user,
      total: calculator.final_total,
      tax: calculator.tax
    )
  end
 
  def persist_order(order)
    ActiveRecord::Base.transaction do
      order.save!
      @items.each { |item| order.order_items.create!(product: item) }
    end
  end
 
  def send_notifications(order)
    OrderMailer.confirmation(order).deliver_later
    SlackNotifier.new_order(order)
  end
end
 
# Controller は薄く
class OrdersController < ApplicationController
  def create
    result = CreateOrderService.new(
      user_id: params[:user_id],
      items: params[:items]
    ).call
 
    if result.success?
      redirect_to result.order
    else
      render :new, status: :unprocessable_entity
    end
  end
end

// NG: 1つの ViewModel に全ロジックを詰め込む
function useDashboardGodViewModel() {
  // ユーザー管理
  const [users, setUsers] = useState([]);
  const [userSearch, setUserSearch] = useState("");
  // 注文管理
  const [orders, setOrders] = useState([]);
  const [orderFilter, setOrderFilter] = useState("all");
  // 通知管理
  const [notifications, setNotifications] = useState([]);
  const [unreadCount, setUnreadCount] = useState(0);
  // 設定管理
  const [settings, setSettings] = useState({});
  const [theme, setTheme] = useState("light");
  // 分析ダッシュボード
  const [analytics, setAnalytics] = useState({});
  const [dateRange, setDateRange] = useState({ from: null, to: null });
  // ... 200行以上のロジック
 
  return { /* 50+ のプロパティとメソッド */ };
}
 
// OK: 責務ごとに ViewModel を分割
function useUserList() {
  const [users, setUsers] = useState<User[]>([]);
  const [search, setSearch] = useState("");
  // ユーザー一覧に関するロジックのみ（30行以内）
  return { users, search, setSearch, loadUsers, addUser };
}
 
function useOrderManagement() {
  const [orders, setOrders] = useState<Order[]>([]);
  const [filter, setFilter] = useState<OrderFilter>("all");
  // 注文管理に関するロジックのみ
  return { orders, filter, setFilter, loadOrders };
}
 
function useNotifications() {
  const [notifications, setNotifications] = useState<Notification[]>([]);
  // 通知に関するロジックのみ
  return { notifications, unreadCount, markAsRead };
}
 
// コンポーネントで必要なものだけ組み合わせ
function DashboardPage() {
  const userList = useUserList();
  const orders = useOrderManagement();
  const notifications = useNotifications();
 
  return (
    <Dashboard>
      <UserSection {...userList} />
      <OrderSection {...orders} />
      <NotificationBell {...notifications} />
    </Dashboard>
  );
}