Rork アプリ設計パターン — MVVM・Clean Architecture・依存性注入で保守性の高いアプリを作る

// models/Task.ts
export interface Task {
  id: string;
  title: string;
  completed: boolean;
  createdAt: Date;
  priority: "low" | "medium" | "high";
}
 
export interface TaskFilter {
  status: "all" | "active" | "completed";
  priority?: Task["priority"];
}

// viewmodels/useTaskListViewModel.ts
import { useState, useMemo, useCallback } from "react";
import { Task, TaskFilter } from "../models/Task";
 
export function useTaskListViewModel(initialTasks: Task[]) {
  const [tasks, setTasks] = useState<Task[]>(initialTasks);
  const [filter, setFilter] = useState<TaskFilter>({ status: "all" });
 
  // フィルタリングされたタスク一覧（メモ化）
  const filteredTasks = useMemo(() => {
    return tasks.filter((task) => {
      if (filter.status === "active" && task.completed) return false;
      if (filter.status === "completed" && !task.completed) return false;
      if (filter.priority && task.priority !== filter.priority) return false;
      return true;
    });
  }, [tasks, filter]);
 
  // タスク完了のトグル
  const toggleTask = useCallback((id: string) => {
    setTasks((prev) =>
      prev.map((t) =>
        t.id === id ? { ...t, completed: !t.completed } : t
      )
    );
  }, []);
 
  // タスクの追加
  const addTask = useCallback(
    (title: string, priority: Task["priority"] = "medium") => {
      const newTask: Task = {
        id: Date.now().toString(),
        title,
        completed: false,
        createdAt: new Date(),
        priority,
      };
      setTasks((prev) => [newTask, ...prev]);
    },
    []
  );
 
  // 統計情報
  const stats = useMemo(
    () => ({
      total: tasks.length,
      active: tasks.filter((t) => !t.completed).length,
      completed: tasks.filter((t) => t.completed).length,
    }),
    [tasks]
  );
 
  return {
    filteredTasks,
    filter,
    setFilter,
    toggleTask,
    addTask,
    stats,
  };
}

// screens/TaskListScreen.tsx
import React from "react";
import { View, Text, FlatList, TouchableOpacity } from "react-native";
import { useTaskListViewModel } from "../viewmodels/useTaskListViewModel";
 
export function TaskListScreen({ initialTasks }) {
  const { filteredTasks, toggleTask, stats } =
    useTaskListViewModel(initialTasks);
 
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text style={{ fontSize: 18, fontWeight: "bold" }}>
        タスク: {stats.active}件 / {stats.total}件
      </Text>
      <FlatList
        data={filteredTasks}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => toggleTask(item.id)}>
            <Text
              style={{
                textDecorationLine: item.completed
                  ? "line-through"
                  : "none",
                padding: 12,
              }}
            >
              {item.title}
            </Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

// domain/usecases/GetTasksUseCase.ts
import { Task, TaskFilter } from "../entities/Task";
import { ITaskRepository } from "../repositories/ITaskRepository";
 
export class GetTasksUseCase {
  constructor(private taskRepository: ITaskRepository) {}
 
  async execute(filter: TaskFilter): Promise<Task[]> {
    const tasks = await this.taskRepository.getAll();
 
    return tasks.filter((task) => {
      if (filter.status === "active" && task.completed) return false;
      if (filter.status === "completed" && !task.completed) return false;
      return true;
    });
  }
}

// domain/repositories/ITaskRepository.ts
import { Task } from "../entities/Task";
 
export interface ITaskRepository {
  getAll(): Promise<Task[]>;
  getById(id: string): Promise<Task | null>;
  create(task: Omit<Task, "id" | "createdAt">): Promise<Task>;
  update(id: string, data: Partial<Task>): Promise<Task>;
  delete(id: string): Promise<void>;
}

// data/repositories/TaskRepository.ts
import { Task } from "../../domain/entities/Task";
import { ITaskRepository } from "../../domain/repositories/ITaskRepository";
import { taskApi } from "../api/taskApi";
 
export class TaskRepository implements ITaskRepository {
  async getAll(): Promise<Task[]> {
    const response = await taskApi.fetchTasks();
    return response.map(this.mapToEntity);
  }
 
  async getById(id: string): Promise<Task | null> {
    const response = await taskApi.fetchTask(id);
    return response ? this.mapToEntity(response) : null;
  }
 
  async create(
    data: Omit<Task, "id" | "createdAt">
  ): Promise<Task> {
    const response = await taskApi.createTask(data);
    return this.mapToEntity(response);
  }
 
  async update(id: string, data: Partial<Task>): Promise<Task> {
    const response = await taskApi.updateTask(id, data);
    return this.mapToEntity(response);
  }
 
  async delete(id: string): Promise<void> {
    await taskApi.deleteTask(id);
  }
 
  // APIレスポンスからドメインエンティティへの変換
  private mapToEntity(raw: any): Task {
    return {
      id: raw.id,
      title: raw.title,
      completed: raw.completed,
      createdAt: new Date(raw.created_at),
      priority: raw.priority,
    };
  }
}

// di/ServiceContainer.ts
import React, { createContext, useContext } from "react";
import { ITaskRepository } from "../domain/repositories/ITaskRepository";
import { GetTasksUseCase } from "../domain/usecases/GetTasksUseCase";
import { CreateTaskUseCase } from "../domain/usecases/CreateTaskUseCase";
 
export interface ServiceContainer {
  taskRepository: ITaskRepository;
  getTasksUseCase: GetTasksUseCase;
  createTaskUseCase: CreateTaskUseCase;
}
 
const ServiceContext = createContext<ServiceContainer | null>(null);
 
export function ServiceProvider({
  container,
  children,
}: {
  container: ServiceContainer;
  children: React.ReactNode;
}) {
  return (
    <ServiceContext.Provider value={container}>
      {children}
    </ServiceContext.Provider>
  );
}
 
export function useService(): ServiceContainer {
  const context = useContext(ServiceContext);
  if (!context) {
    throw new Error(
      "useService must be used within a ServiceProvider"
    );
  }
  return context;
}

// __tests__/GetTasksUseCase.test.ts
import { GetTasksUseCase } from "../domain/usecases/GetTasksUseCase";
import { ITaskRepository } from "../domain/repositories/ITaskRepository";
 
// モックリポジトリ
const mockRepository: ITaskRepository = {
  getAll: async () => [
    {
      id: "1",
      title: "テストタスク",
      completed: false,
      createdAt: new Date(),
      priority: "medium",
    },
    {
      id: "2",
      title: "完了タスク",
      completed: true,
      createdAt: new Date(),
      priority: "high",
    },
  ],
  getById: async () => null,
  create: async (data) => ({
    ...data,
    id: "new",
    createdAt: new Date(),
  }),
  update: async (id, data) => ({} as any),
  delete: async () => {},
};
 
describe("GetTasksUseCase", () => {
  it("should filter active tasks", async () => {
    const useCase = new GetTasksUseCase(mockRepository);
    const result = await useCase.execute({ status: "active" });
    // completed: true のタスクが除外されていることを検証
    expect(result).toHaveLength(1);
    expect(result[0].title).toBe("テストタスク");
  });
});