MVVM から MVVM-C に変えてみた話 〜画面遷移どうしてる？〜

Transcript

1. MVVM から MVVM-C に変えてみた話 〜 画面遷移どうしてる？〜
2. 1. MVVMのおさらい 2. 実際どんな構成になったか 3. 事例の紹介 4. なぜCoordinatorがいるのか？ 5. 導入に当たって検討すべきこと
3. 自己紹介 - iOSエンジニア-> 現在Flutterエンジニア　株式会社Linc’well - 前職iOS開発経験では（MVC→VIPER への移行経験あり） - Flutterの個人開発でも仕事でもMVVMアーキテクチャ 陳　信瑜 GitHub ID: Ricky-yu
4. MVVM構成の復習 ・UIロジックとビジネスロジックを分離できるメ リット ・ただし「画面遷移の責務」はどこに置くかが 曖昧になりがち Model データ構造とビジネスロジックを担当 アプリケーションのデータ操作と永続化を処理 View UIコンポーネントとユーザー操作の受付 Flutter Widgetとして実装 ViewModel ビューの状態管理とビジネスロジック連携 Riverpodプロバイダーとして実装
5. MVVM課題の整理（責務が混在／テスト困難） ・ViewModelがUI遷移まで担当してしまう ・画面遷移は Viewにあるとテストしづらい ・画面遷移が増えるほどメンテナンスコスト増 ・外部リンク遷移がビジネスロジックに混ざり、保守性低下
6. MVVM-Cの導入アイデア ・iOS開発でMVC→VIPERへ移行した際も「遷移の責務分離」は共通課題 ・Flutterにも同じ思想を応用できるのでは？ ・MVVMにCoordinatorを追加して遷移を一元管理できるのでは？（ MVVM-C）
7. MVVM-C フレームワークの基本構造 MVVMCはModel-View-ViewModel-Coordinatorの略で、 従来のMVVMパターンにCoordinatorレイヤーを追加したアーキテクチャです。 View Coordinator 画面遷移とアプリフロー制御 ナビゲーション責務の一元管理 ViewModel Model
8. 取り組んだ事例
9. 実例１：画面遷移テストの実施が困難 class _HomeViewState extends State<HomeView> { onTap: () async { // ❌ 問題:onTap 内で非同期処理＋画面遷移を直接実装 // 処理状態のダイアログを表示。 CommonUtils.showProgressDialog(context); // 2秒待機、ダイヤログを消す。 await Future<dynamic>.delayed(Duration(seconds: 2)); Navigator.of(context).pop(); // 次の画面へ遷移する。 Get.to(BirthdayTestView(), }, }
10. 画面遷移テスト（Before） testWidgets('HomeView Test', (WidgetTester tester) async { getPages: [ // ❌ ルーティング設定 が必要です。 GetPage(name: '/birthday', page: () => BirthdayTestView()), GetPage(name: '/fingerprint', page: () => FingerPrintTestView()), ], await tester.tap(find.text('Date_Fortune_Tell'.tr)); await tester.pump(Duration(seconds: 2));　// ❌ 2秒を待つ必要。 await tester.pumpAndSettle(); //❌ アニメーション完了を 待つ必要。 // ❌ 正しいページに遷移したかどうかを検証するのが難しい。 expect(find.byType(BirthdayTestView), findsOneWidget); }
11. 画面遷移テスト（After）画面遷移テストがシンプル・高速・安定に testWidgets('HomeView Test（Mock Coordinator）', (WidgetTester tester) async { final mockCoordinator = MockHomeCoordinator(); Get.put<HomeCoordinator>(mockCoordinator); // ✅ View 本体だけをテストすればよい await tester.pumpWidget( GetMaterialApp(home: HomeView()), ); // ✅ ボタンをタップするだけに await tester.tap(find.text('Date_Fortune_Tell'.tr)); // ✅ 正しい Coordinator のメソッドが呼び出されたかを検証する verify(mockCoordinator.navigateToBirthdayTest()).called(1); }
12. 実例2：同一フロー内で遷移管理が分散 HomeView TestList View TestList DetailView TestResult View 画面遷移 テスト 画面遷移 テスト 画面遷移 テスト 画面遷移 テスト
13. 実例2：同一フロー内で遷移管理が分散（After） HomeView TestList View TestList Detail View TestResul tView 画面遷移テスト TestFlowCoordinator
14. なぜCoordinatorがいるのか？ ・UIに依存しない、遷移ロジックの検証が可能。 ・遷移ロジックを集中管理できます。 ・遷移の追跡がしやすくなります。
15. 導入にあたって検討すべきポイント • 画面遷移の依存関係 現在の画面遷移は View または ViewModel のどちらに依存しているかを確認する。 （View に依存している → Coordinator 導入の効果が大きい） • 遷移経路の複数性 複数のフローからその画面に遷移される可能性があるかを確認する。 （例：通知／ディープリンク／通常遷移など） • 遷移ロジックの複雑さ 条件分岐や状態管理を伴う遷移ロジックが複雑になっていないかを確認する。 • チーム方針 アーキテクチャは「正解」ではなく「哲学」。 チームの開発方針・保守性・テスト戦略に合わせて実装方針を検討する。
16. 16 ©Linc' well inc. クリフォアアプリについて クリフォアアプリ • Linc’wellが提供するサービスをまとめたアプリ • オンライン・オフラインの診療予約 • ヘルスケア製品の購入 • 服薬管理機能 • 体重管理サポート • MVVM+Coordinator導入中 • Flutterエンジニア採用中 • FlutterKaigi 2025 出展中
17. 以上 ありがとうございました。