[FlutterKaigi2024]ステートマシンで実現する高品質なFlutterアプリ開発

Transcript

1. ステートマシンで実現する 高品質なFlutterアプリ開発 チームラボ株式会社 Smartphone Team Engineer そた
2. そた • 23卒高専出身 • FlutterとKMPを書いてます • カメラにハマってます • Flutter Kaigi運営 自己紹介 𝕏: @_sotaatos
3. 会社紹介 • 会社名: チームラボ株式会社 • 主な事業内容 ◦ アート ◦ ソリューション
4. 実績 • りそなグループアプリ • ネスカフェ ドルチェ グストアプリ • スミセイ・デジタルコンシェルジュ • 三井ショッピングパークアプリ • それ以外にも多数！
5. こんなことに遭遇したことありませんか？
6. APIとの通信が完了したのに ローディングの表示が消えない
7. 異常系の実装が漏れていて表示が崩れた
8. ある程度アプリ開発の経験がある方なら 一度や二度じゃないはずです。
9. このようなバグを減らし高品質なアプリを 開発するにはどうしたら良いでしょうか？
10. 優れた状態管理の設計
11. BLoC Hooks Riverpod setState Provider GetX ChangeNotifier Signals Redux
12. 弊社がメインで使用しているのは このどれでもありません
13. ステートマシン
14. ステートマシンとは
15. ステートマシンとは • オートマトン(状態機械) • 計算理論における概念 • 有限オートマトン ◦ 有限個の状態と遷移と動作の組み合わせからなる数学的に 抽象化された「ふるまいのモデル」である　(Wikipedia)
16. • 100円と50円のみ使用可能 • 途中で返金はできない • 150円を超えたら自動でジュースが出てくる ステートマシンとは
17. ステートマシンとは
18. アプリの持つ状態も ステートマシンで表せる
19. APIを叩いて情報を表示する画面
20. RiverpodのAsyncValue
21. @riverpod Future<Configuration> configurations(Ref ref) async { final uri = Uri.parse('configs.json'); final rawJson = await File.fromUri(uri).readAsString(); return Configuration.fromJson(json.decode(rawJson)); } final configs = ref.watch(configurationsProvider); return switch (configs) { AsyncData(:final value) => Text('data: ${value.host}'), AsyncError(:final error) => Text('error: $error'), AsyncLoading() => const CircularProgressIndicator(), }; RiverpodのAsyncValue
22. RiverpodのAsyncValueの構造
23. RiverpodのAsyncValueも ステートマシン！
24. Riverpodを使いましょう！ ご清聴ありがとうございました！
25. …とはならないです！
26. 独自にステートマシンを設計することに どのような優位性が？
27. ページングのある画面の処理 • 画面表示時に一度APIを叩く • APIはコンテンツと共に追加読み込み可能かどうかを返却 • 追加読み込み可能の際は下までスクロールしたら追加読み込み • 追加読み込み不可の場合はそこでAPIの呼び出しは終了
28. ページングのある画面のステートマシン
29. ステートマシンを独自に設計することで 複雑なビジネスロジックの表現が可能！
30. ここで一旦本題に戻りましょう
31. 私たちが追い求めていたもの
32. 高品質なアプリを開発するための 優れた状態管理の設計
33. ステートマシンはどのような点が 優れている？
34. ステートマシンは 設計と実装にメリットをもたらし 保守性を向上させます
35. 設計と実装におけるメリット
36. 画面の取りうる状態を 実装前に全て考えられる
37. ロード 中 コンテンツ 表示 エラー 表示
38. 設計をそのまま実装に 落とし込むことが可能
39. 不要なnullableを排除
40. class SamplePageState { SamplePageState({ required this.isLoading, required this.data, required this.errorMessage, }); final bool isLoading; final String? data; final String? errorMessage; } 不要なnullableを排除
41. sealed class SamplePageState {} class LoadingState extends SamplePageState {} class LoadedState extends SamplePageState { LoadedState(this.data); final String data; } class ErrorState extends SamplePageState { ErrorState(this.errorMessage); final String errorMessage; } 不要なnullableを排除
42. 想定していない状態が起こらない
43. class SamplePageState { SamplePageState({ required this.isLoading, required this.data, required this.errorMessage, }); final bool isLoading; final String? data; final String? errorMessage; } 想定していない状態が起こらない final state1 = SamplePageState( isLoading: false, data: null, errorMessage: null, ); final state2 = SamplePageState( isLoading: true, data: 'data', errorMessage: 'error', );
44. final loadingState = LoadingState(); final loadedState = LoadedState('data'); final errorState = ErrorState('error'); 想定していない状態が起こらない
45. 保守性の向上
46. 実装から設計が読み取りやすい
47. 網羅的なテストの記述が簡単
48. final loadingState = LoadingState(); final loadedState = LoadedState('data'); final errorState = ErrorState('error'); 網羅的なテストの記述が簡単
49. 拡張が容易
50. 拡張が容易
51. 拡張が容易
52. ステートマシンを用いた状態管理には 多くの利点
53. Dartで実装してみましょう
54. APIを叩いて情報を表示する画面
55. sealed class SampleState {} class InitialState extends SampleState {} class LoadingState extends SampleState {} class LoadedState extends SampleState { LoadedState({required this.data}); final String data; } class ErrorState extends SampleState { ErrorState({required this.message}); final String message; } Stateの定義
56. @freezed sealed class SampleState with _$SampleState { const factory SampleState.initial() = InitialState; const factory SampleState.loading() = LoadingState; const factory SampleState.loaded({required String data}) = LoadedState; const factory SampleState.error({required String message}) = ErrorState; } Stateの定義
57. @freezed sealed class SampleAction with _$SampleAction { const factory SampleAction.fetch() = FetchAction; const factory SampleAction.success({required String newData}) = SuccessAction; const factory SampleAction.fail({required String newMessage}) = FailAction; } Actionの定義
58. class StateMachine { StateMachine(this.api); final ApiClient api; SampleState state = const SampleState.initial(); void dispatch(SampleAction action){} Future<void> _load() async {} } StateMachineの定義
59. Future<void> _load() async { try { final data = await api.getData(); dispatch(SuccessAction(newData: data)); } catch (e) { dispatch(FailAction(newMessage: e.toString())); } } _loadメソッドの実装
60. void dispatch(SampleAction action) { state = switch (state) { InitialState() => switch (action) { FetchAction() => () { _load(); return const LoadingState(); }(), _ => state, }, LoadingState() => switch (action) { SuccessAction(:final newData) => LoadedState(data: newData), FailAction(:final newMessage) => ErrorState(message: newMessage), _ => state, }, ErrorState() || LoadedState() => state, }; } dispatchの定義
61. これでステートマシンが作れました！
62. これを画面で使用してみる
63. class StateMachine { StateMachine(this.api) { _stateStreamController.add(state); } final ApiClient api; // プライベート変数の宣言 final _stateStreamController = StreamController<SampleState>.broadcast(); SampleState _state = const SampleState.initial(); // ゲッターの宣言 Stream<SampleState> get stateStream => _stateStreamController.stream; SampleState get state => _state; // セッターの宣言、stateの値を変更した際にStreamにも値を流す set state(SampleState value) { _state = value; _stateStreamController.sink.add(value); } StateをStreamに
64. return StreamBuilder<SampleState>( stream: stateMachine.stateStream, builder: (context, snapshot) { final state = snapshot.data ?? stateMachine.state return switch (state) { InitialState() => ElevatedButton( onPressed: () => stateMachine.dispatch(const FetchAction()), child: const Text('Fetch'), ), LoadingState() => const CircularProgressIndicator(), LoadedState(:final data) => Text(data), ErrorState(:final message) => Text(message), }; }, ); StateMachineを利用したWidget
65. ではこれを実際に動かしてみましょう！
66. デモ
67. ステートマシンを用いた 状態管理ができました！
68. 複雑なステートマシンを作る
69. ページングのある画面のステートマシン
70. デモ
71. ステートマシンで 複雑なロジックも実装できました！
72. ステートマシンのデメリット
73. ステートマシンのデメリット • ステートマシンの設計には経験が必要 • 実装量が多くなる ◦ 小規模なアプリだとオーバーエンジニアリングに ◦ コード量が多いので開発者によって実装が変わる
74. 弊社ではステートマシンを簡単に 実現するパッケージを開発しました！
75. dart_fsm
76. dart_fsmの思想 • 副作用の混じらない純粋なステートマシンの記述の強制 • 副作用の記述の方法を強制 • テスタビリティの高いステートマシンの実現
77. 副作用の混じらない 純粋なステートマシンの記述の強制
78. void dispatch(SampleAction action) { state = switch (state) { InitialState() => switch (action) { FetchAction() => () { _load(); return const LoadingState(); }(), _ => state, }, LoadingState() => switch (action) { SuccessAction(:final newData) => LoadedState(data: newData), FailAction(:final newMessage) => ErrorState(message: newMessage), _ => state, }, ErrorState() || LoadedState() => state, }; } 純粋なステートマシンの記述の強制
79. final sampleStateGraph = GraphBuilder<SampleState, SampleAction>() ..state<InitialState>( (b) => b ..on<FetchAction>( (state, action) => b.transitionTo(const LoadingState()), ), ) ..state<LoadingState>( (b) => b ..on<SuccessAction>( (state, action) => b.transitionTo(LoadedState(data: action.newData)), ) ..on<FailAction>( (state, action) => b.transitionTo(ErrorState(message: action.newMessage)), ), ); 純粋なステートマシンの記述の強制
80. 副作用の記述の方法を強制
81. 副作用の記述の方法を強制 • SideEffect ◦ 副作用本体 ◦ APIの呼び出しなどを行う • SideEffectCreator ◦ StateMachineの状態遷移を受けてSideEffectの実行を決定
82. class SampleSideEffect implements AfterSideEffect<SampleState, SampleAction> { SampleSideEffect(this.api); final ApiClient api; @override Future<void> execute( StateMachine<SampleState, SampleAction> stateMachine, ) async { try { final data = await api.getData(); stateMachine.dispatch(SuccessAction(newData: data)); } catch (e) { stateMachine.dispatch(FailAction(newMessage: e.toString())); } } } 副作用の記述の方法を強制
83. class SampleSideEffectCreator implements AfterSideEffectCreator<SampleState, SampleAction, SampleSideEffect> { SampleSideEffectCreator(this.api); final ApiClient api; @override SampleSideEffect? create(SampleState prevState, SampleAction action) { return switch(action) { FetchAction() => SampleSideEffect(api), _ => null, }; } } 副作用の記述の方法を強制
84. テスタビリティの高い ステートマシンの実現
85. dart_fsmを用いて実装
86. APIを叩いて情報を表示する画面
87. @freezed sealed class SampleState with _$SampleState { const factory SampleState.initial() = InitialState; const factory SampleState.loading() = LoadingState; const factory SampleState.loaded({required String data}) = LoadedState; const factory SampleState.error({required String message}) = ErrorState; } Stateの定義
88. @freezed sealed class SampleAction with _$SampleAction { const factory SampleAction.fetch() = FetchAction; const factory SampleAction.success({required String newData}) = SuccessAction; const factory SampleAction.fail({required String newMessage}) = FailAction; } Actionの定義
89. final sampleStateGraph = GraphBuilder<SampleState, SampleAction>() ..state<InitialState>( (b) => b ..on<FetchAction>( (state, action) => b.transitionTo(const LoadingState()), ), ) ..state<LoadingState>( (b) => b ..on<SuccessAction>( (state, action) => b.transitionTo(LoadedState(data: action.newData)), ) ..on<FailAction>( (state, action) => b.transitionTo(ErrorState(message: action.newMessage)), ), ); Graphの定義
90. class SampleSideEffect implements AfterSideEffect<SampleState, SampleAction> { SampleSideEffect(this.api); final ApiClient api; @override Future<void> execute( StateMachine<SampleState, SampleAction> stateMachine, ) async { try { final data = await api.getData(); stateMachine.dispatch(SuccessAction(newData: data)); } catch (e) { stateMachine.dispatch(FailAction(newMessage: e.toString())); } } } SideEffectの作成
91. class SampleSideEffectCreator implements AfterSideEffectCreator<SampleState, SampleAction, SampleSideEffect> { SampleSideEffectCreator(this.api); final ApiClient api; @override SampleSideEffect? create(SampleState prevState, SampleAction action) { return switch(action) { FetchAction() => SampleSideEffect(api), _ => null, }; } } SideEffectCreatorの作成
92. final sampleStateMachine = createStateMachine( graphBuilder: sampleStateGraph, initialState: const InitialState(), sideEffectCreators: [SampleSideEffectCreator(ApiClient())], ); StateMachineの作成
93. ステートマシンを利用する効果的な アーキテクチャについて
94. StateMachineが管理する状態
95. UIの状態とビジネスロジックの状態
96. ステートマシンは ビジネスロジックの状態管理
97. UIの状態とビジネスロジックの状態を 同時にステートマシンで管理するのは難しい
98. UIの変更に追従しやすい
99. UIの状態はどこで管理？
100. ステートマシンを用いるアーキテクチャ
101. Viewとステートマシンの間に ViewModelのような中間層を用意
102. ステートマシンを用いるアーキテクチャ
103. 最適なアーキテクチャは アプリの特性によって変わる
104. final class SamplePageViewModel extends ChangeNotifier { SamplePageViewModel(this._stateMachine) { _stateMachine.stateStream.listen((_) => notifyListeners()); } final SampleStateMachine _stateMachine; // isLoadingはstateを参照するcomputed property bool get isLoading => _stateMachine.state is LoadingState; void fetch() { _stateMachine.dispatch(const FetchAction()); } } ステートマシンを用いたViewModel
105. まとめ
106. まとめ • ステートマシンを用いる状態管理を採用すると、設計と実装に おいて様々なメリットが得られ、保守性も向上します！ • 弊社ではdart_fsmというパッケージを開発し、ステートマシン を簡単に実装できるようにしました！ • ステートマシンの利用はビジネスロジックの状態管理に留め、 Viewとの間にViewModelを配置するのがおすすめです！
107. 最後に
108. チームラボでは一緒にアプリを開発する 仲間を通年で募集しています
109. ステートマシンのような技術を用いて 高品質なアプリを開発したい方は是非！