Flutter アプリケーションのアーキテクチャ設計

Contents

• Architectural Layers
• Project Structure
• ワークフロー: 新機能の実装
• Examples

Architectural Layers

関心の厳密な分離を実施することにより、アプリケーションを異なるレイヤーに分割します。UI レンダリングをビジネスロジックやデータ取得と混在させないでください。

UI Layer (Presentation)

MVVM (Model-View-ViewModel) パターンを実装して UI 状態とロジックを管理します。

• Views: 再利用可能でシンプルなウィジェットを作成します。Views のロジックを UI 固有の操作 (例: アニメーション、レイアウト制約、簡単なルーティング) に制限します。必要なデータはすべて ViewModel から渡します。
• ViewModels: UI 状態を管理し、ユーザーインタラクションを処理します。ChangeNotifier (または Listenable) を拡張して状態を公開します。イミュータブルな状態スナップショットを View に公開します。コンストラクタを使用して Repository を ViewModel にインジェクトします。

Data Layer

Repository パターンを実装して、データアクセスロジックを分離し、単一の情報源を作成します。

• Services: 外部 API (HTTP クライアント、ローカルデータベース、プラットフォームプラグイン) をラップするステートレスクラスを作成します。raw API モデルまたは Result ラッパーを返します。
• Repositories: 1 つ以上の Services を使用します。raw API モデルをクリーンな Domain Model に変換します。キャッシング、オフライン同期、リトライロジックを処理します。Domain Model を ViewModels に公開します。

Logic Layer (Domain - Optional)

• Use Cases: このレイヤーはアプリケーションに ViewModel を散らかすような複雑なビジネスロジックが含まれている場合、または複数の ViewModels 全体でロジックを再利用する必要がある場合に限り実装します。このロジックを ViewModels と Repositories の間に配置される専用の Use Case (interactor) クラスに抽出します。

Project Structure

ハイブリッドアプローチを使用してコードベースを整理します: UI コンポーネントを機能ごとにグループ化し、Data/Domain コンポーネントを種類ごとにグループ化します。

lib/
├── data/
│   ├── models/         # API models
│   ├── repositories/   # Repository implementations
│   └── services/       # API clients, local storage wrappers
├── domain/
│   ├── models/         # Clean domain models
│   └── use_cases/      # Optional business logic classes
└── ui/
    ├── core/           # Shared widgets, themes, typography
    └── features/
        └── [feature_name]/
            ├── view_models/
            └── views/

ワークフロー: 新機能の実装

アプリケーションに新機能を追加する際は、この順序付きワークフローに従います。チェックリストをコピーして進捗を追跡します。

Task Progress

• Step 1: Domain Models を定義します。 freezed または built_value を使用して、機能のためのイミュータブルなデータクラスを作成します。
• Step 2: Services を実装します。 外部 API 通信を処理するための Service クラスを作成または更新します。
• Step 3: Repositories を実装します。 Services を使用して Domain Models を返す Repository を作成します。
• Step 4: 条件付きロジックを適用します (Domain Layer)。
  • 機能が複雑なデータ変換またはクロスリポジトリロジックを必要とする場合: Use Case クラスを作成します。
  • 機能がシンプルな CRUD 操作である場合: Step 5 にスキップします。
• Step 5: ViewModel を実装します。 ChangeNotifier を拡張する ViewModel を作成します。必要な Repositories/Use Cases をインジェクトします。イミュータブルな状態とコマンドメソッドを公開します。
• Step 6: View を実装します。 UI ウィジェットを作成します。ListenableBuilder または AnimatedBuilder を使用して ViewModel の変更をリッスンします。
• Step 7: 依存関係をインジェクトします。 新しい Service、Repository、ViewModel を依存性注入コンテナ (例: provider または get_it) に登録します。
• Step 8: Validator を実行します。 ViewModel と Repository のユニットテストを実行します。
  • フィードバックループ: テストを実行 -> 失敗をレビュー -> ロジックを修正 -> 合格するまで再実行します。

Examples

Data Layer: Service と Repository

// 1. Service (Raw API interaction)
class ApiClient {
  Future<UserApiModel> fetchUser(String id) async {
    // HTTP GET implementation...
  }
}

// 2. Repository (Single source of truth, returns Domain Model)
class UserRepository {
  UserRepository({required ApiClient apiClient}) : _apiClient = apiClient;
  
  final ApiClient _apiClient;
  User? _cachedUser;

  Future<User> getUser(String id) async {
    if (_cachedUser != null) return _cachedUser!;
    
    final apiModel = await _apiClient.fetchUser(id);
    _cachedUser = User(id: apiModel.id, name: apiModel.fullName); // Transform to Domain Model
    return _cachedUser!;
  }
}

UI Layer: ViewModel と View

// 3. ViewModel (State management and presentation logic)
class ProfileViewModel extends ChangeNotifier {
  ProfileViewModel({required UserRepository userRepository}) 
      : _userRepository = userRepository;

  final UserRepository _userRepository;

  User? _user;
  User? get user => _user;

  bool _isLoading = false;
  bool get isLoading => _isLoading;

  Future<void> loadProfile(String id) async {
    _isLoading = true;
    notifyListeners();

    try {
      _user = await _userRepository.getUser(id);
    } finally {
      _isLoading = false;
      notifyListeners();
    }
  }
}

// 4. View (Dumb UI component)
class ProfileView extends StatelessWidget {
  const ProfileView({super.key, required this.viewModel});

  final ProfileViewModel viewModel;

  @override
  Widget build(BuildContext context) {
    return ListenableBuilder(
      listenable: viewModel,
      builder: (context, _) {
        if (viewModel.isLoading) {
          return const Center(child: CircularProgressIndicator());
        }
        
        final user = viewModel.user;
        if (user == null) {
          return const Center(child: Text('User not found'));
        }

        return Column(
          children: [
            Text(user.name),
            ElevatedButton(
              onPressed: () => viewModel.loadProfile(user.id),
              child: const Text('Refresh'),
            ),
          ],
        );
      },
    );
  }
}