Reactで学ぶクリーンアーキテクチャ入門

作成日 2025.03.18
React
React

クリーンアーキテクチャは、アプリケーションを保守性と拡張性に優れた構造にするための設計原則です。本記事ではReactを用いて、その基本概念と実装方法を詳しく説明します。

1. クリーンアーキテクチャの概要
2. Reactアプリでのアーキテクチャの必要性
3. レイヤーの分割と責務の明確化
4. エンティティレイヤーの設計
5. ユースケースレイヤーの実装
6. インターフェースレイヤーでReactを活用
7. 依存関係の注入
8. インフラストラクチャの具体化
9. 依存の逆転を活用したテスト可能性の向上
10. Reactコンポーネントの分離と再利用性の向上
11. モジュール間の依存管理
12. アプリケーション全体での統合
13. 課題と注意点
14. まとめ

クリーンアーキテクチャの概要

クリーンアーキテクチャの基本概念、レイヤー構造、依存関係逆転の原則を理解します。

Reactアプリでのアーキテクチャの必要性

Reactでクリーンアーキテクチャを採用する理由や、メリットを整理します。

レイヤーの分割と責務の明確化

アプリケーションを以下のようなレイヤーに分割します。

エンティティ
ユースケース
インターフェース（UI）
インフラストラクチャ

エンティティレイヤーの設計

エンティティレイヤーでは、ビジネスルールを定義します。

class User {
  constructor(id, name, email) {
    this.id = id;
    this.name = name;
    this.email = email;
  }
}

ユースケースレイヤーの実装

ユースケースレイヤーでは、アプリケーションの動作を定義します。

class GetUser {
  constructor(userRepository) {
    this.userRepository = userRepository;
  }

  execute(userId) {
    return this.userRepository.findById(userId);
  }
}

インターフェースレイヤーでReactを活用

Reactコンポーネントをインターフェースとして使用します。

function UserProfile({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

依存関係の注入

依存関係逆転の原則に従い、ユースケースにリポジトリを注入します。

const userRepository = new UserRepository();
const getUser = new GetUser(userRepository);

getUser.execute('123').then((user) => console.log(user));

インフラストラクチャの具体化

インフラストラクチャレイヤーでは、データベースやAPIとの通信を実装します。

class UserRepository {
  async findById(userId) {
    const response = await fetch(`/api/users/${userId}`);
    return response.json();
  }
}

依存の逆転を活用したテスト可能性の向上

モックを使用してユースケースをテストします。

const mockUserRepository = {
  findById: jest.fn(() => Promise.resolve({ id: '123', name: 'John', email: 'john@example.com' })),
};

const getUser = new GetUser(mockUserRepository);

test('GetUser retrieves a user by ID', async () => {
  const user = await getUser.execute('123');
  expect(user.name).toBe('John');
});