LoginSignup
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@softbase(FullStack ITエンジニア)

Flutterアプリ開発のための最新モダンスタックとベストプラクティス

Last updated at Posted at 2025-01-13

Flutterアプリ開発のための最新モダンスタックとベストプラクティス

1. アーキテクチャ

推奨: Clean Architecture + MVVM

  • 理由:
    • 分離された構造: プレゼンテーション層、ドメイン層、データ層を明確に分離し、変更の影響範囲を最小化。
    • 再利用性の向上: ドメインロジックをユースケースとして独立させることで、他プロジェクトにも再利用可能。
    • 長期的な保守性: スケーラブルで複雑な要件でも対応可能。
  • 構成例:
    • プレゼンテーション層: LoginViewModelが状態とUIロジックを管理。
    • ドメイン層: AuthenticateUserUseCaseでビジネスロジックを分離。
    • データ層: UserRepositoryがAPIとデータベースを統合。
  • コード例: 
    class AuthenticateUserUseCase {
  final UserRepository repository;

  AuthenticateUserUseCase(this.repository);

  Future<bool> call(String username, String password) async {
    return await repository.authenticate(username, password);
  }
}

2. 状態管理と依存性注入

推奨: Riverpod + hooks_riverpod

  • 理由:
    • 型安全性: 状態の型を厳密に管理。
    • スコープ分離: 状態をコンポーネント単位で分け、グローバルプロバイダの乱用を防ぐ。
    • 再利用性: 状態管理のロジックを簡単に再利用可能。
  • 具体例:
    • 状態管理: カウンターアプリをStateNotifierで管理。
    • コード例: 
      final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) => CounterNotifier());

class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);

  void increment() => state++;
}

3. API通信

推奨: Dio + Retrofit (REST API)

  • 理由:
    • 高いカスタマイズ性: リクエストヘッダやエラーハンドリングを柔軟に設定可能。
    • 型安全性: RetrofitでAPI呼び出し時に型を保証。
    • 効率的な開発: RetrofitのアノテーションでシンプルにAPIエンドポイントを記述。
  • 具体例:
    • REST APIクライアントとしてDioとRetrofitを組み合わせ。
    • コード例: 
      @RestApi(baseUrl: "https://api.example.com")
abstract class ApiService {
  factory ApiService(Dio dio, {String baseUrl}) = _ApiService;

  @GET("/users")
  Future<List<User>> getUsers();
}

4. ルーティング

推奨: Beamer

  • 理由:
    • カスタマイズ性: ディープリンクや動的ルートに対応。
    • 宣言型のルート定義: 明確で保守性の高い構造。
    • Nested Navigation: 複雑なナビゲーション構造を簡単に管理可能。
  • 具体例:
    • HomePageとDetailsPage間の遷移を簡潔に定義。
    • コード例: 
      final routerDelegate = BeamerDelegate(
  locationBuilder: SimpleLocationBuilder(
    routes: {
      '/': (context) => HomePage(),
      '/details': (context) => DetailsPage(),
    },
  ),
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: routerDelegate,
      routeInformationParser: BeamerParser(),
    );
  }
}

5. モデルユーティリティ

推奨: freezed + json_serializable

  • 理由:
    • データクラス生成の簡素化: freezedでモデルクラスを自動生成。
    • 型安全なJSON操作: json_serializableで安全にデータをシリアライズ/デシリアライズ。
  • 具体例:
    • モデル定義を簡略化し、JSONデータを簡単にパース可能。
    • コード例: 
      @freezed
class User with _$User {
  const factory User({
    required int id,
    required String name,
  }) = _User;

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
}

6. テスト

推奨: Mocktail + Integration Testing + Golden Tests

  • 理由:
    • モックの簡易化: Mocktailで依存関係をモック。
    • ビジュアルテスト: Golden ToolkitでUIの一致を確認。
    • 品質保証: E2Eテストでユーザーの操作を再現。
  • 具体例:
    • ゴールデンテスト例: 
      testWidgets('Golden Test Example', (tester) async {
  await tester.pumpWidget(
    GoldenToolkit.runWithConfiguration(
      MyApp(),
      configuration: GoldenToolkitConfiguration(),
    ),
  );
  await expectLater(
    find.byType(MyWidget),
    matchesGoldenFile('golden/my_widget.png'),
  );
});

7. ロギング & デバッグ

推奨: Logger + Firebase Crashlytics

  • 理由:
    • シンプルなログ: Loggerで構造化されたログ出力。
    • クラッシュ情報の収集: Firebase Crashlyticsでリアルタイムのエラーレポート。
  • 具体例:
    • Loggerを使った例: 
      final logger = Logger();

void logExample() {
  logger.i('This is an info log');
  logger.e('This is an error log');
}

8. デザインシステム

推奨: Flutter Gen + Material 3

  • 理由:
    • アセット管理の効率化: Flutter Genでコードを自動生成。
    • 最新のデザインガイドライン: Material 3に対応。
  • 具体例:
    • Flutter Genを利用した例: 
      import 'package:flutter_gen/gen/assets.gen.dart';

Widget build(BuildContext context) {
  return Image.asset(Assets.images.logo.path);
}
    • Material 3テーマ構成例: 
      ThemeData theme = ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
);

9. 開発効率向上

推奨: VSCode + Flutter DevTools

  • 理由:
    • 開発ツールの充実: DevToolsでパフォーマンスとメモリ管理を可視化。
    • 補完機能の強化: GitHub Copilotでコーディング効率を大幅に向上。
    • コード品質の向上: Dart Code Metricsでコード分析。
  • 具体例:
    • Dart Code Metrics設定例: 
      dart_code_metrics:
  metrics:
    - cyclomatic-complexity
    - number-of-parameters
  rules:
    - prefer-trailing-comma
    - avoid-returning-widgets

推奨スタック一覧

カテゴリ 推奨ツール 推奨理由
アーキテクチャ Clean Architecture + MVVM 層ごとに分離し、保守性とスケーラビリティを向上
状態管理とDI Riverpod + hooks_riverpod 型安全、スコープ分離、コード再利用性を強化
API通信 Dio + Retrofit 高カスタマイズ性と型安全性
ルーティング Beamer 柔軟なルーティングと宣言型設計
モデルユーティリティ freezed + json_serializable データモデルとJSON操作を効率化
テスト Mocktail + Golden Tests + Patrol モック、UIテスト、自動化に対応
ロギング & デバッグ Logger + Firebase Crashlytics ログ出力とクラッシュレポート
デザインシステム Flutter Gen + Material 3 アセット管理の効率化と最新デザイン対応
開発効率向上 VSCode + Flutter DevTools 開発ツールとコード品質の向上
4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?