flutter/flutter-apply-architecture-best-practices

flutter-apply-architecture-best-practices は何をしますか？

Flutterアプリケーションを推奨される階層化アプローチ（UI、ロジック、データ）で設計します。新規プロジェクトの構造化や、スケーラビリティのためのリファクタリング時に使用します。

概要

このスキルは、Flutterアプリケーションにクリーンアーキテクチャの原則を適用するためのガイドラインを提供します。主な層は次の3つです：

• UI層: ウィジェット、画面、ルーティングを担当
• ロジック層: 状態管理、ビジネスロジック、ユースケース
• データ層: リポジトリ、データソース（API、ローカルDB）

使用方法

新規プロジェクトの作成

flutter create --org com.example my_app

推奨ディレクトリ構造

lib/
├── app/          # アプリ設定、テーマ、ルーティング
├── ui/           # 画面、ウィジェット
│   ├── screens/
│   └── widgets/
├── logic/        # 状態管理、プロバイダー
│   └── providers/
└── data/         # モデル、リポジトリ、データソース
    ├── models/
    ├── repositories/
    └── datasources/

主要なベストプラクティス

1. 依存性注入: RiverpodまたはProviderを使用して依存性を管理します。
2. 状態管理: 複雑な状態にはRiverpod、単純な状態にはProviderを使用します。
3. レポジトリパターン: データ取得ロジックをリポジトリにカプセル化します。
4. テスト容易性: 各層を独立してテストできるように設計します。

実装例

リポジトリの定義

abstract class UserRepository {
  Future<User> getUser(String id);
}

class UserRepositoryImpl implements UserRepository {
  final UserRemoteDataSource remoteDataSource;
  final UserLocalDataSource localDataSource;

  UserRepositoryImpl(this.remoteDataSource, this.localDataSource);

  @override
  Future<User> getUser(String id) async {
    try {
      final user = await remoteDataSource.fetchUser(id);
      await localDataSource.cacheUser(user);
      return user;
    } catch (e) {
      return await localDataSource.getUser(id);
    }
  }
}

プロバイダーの使用例

final userRepositoryProvider = Provider<UserRepository>((ref) {
  return UserRepositoryImpl(
    UserRemoteDataSource(),
    UserLocalDataSource(),
  );
});

final userProvider = FutureProvider.family<User, String>((ref, id) {
  final repository = ref.watch(userRepositoryProvider);
  return repository.getUser(id);
});

注意事項

• このスキルは既存のFlutterプロジェクトに対しても安全に適用できます。
• コミット前には必ずflutter analyzeを実行し、コード品質を確認してください。
• 大規模なリファクタリングは段階的に行うことを推奨します。