BLoCパターンとflutter_bloc

SODA Flutter Talk #2 オフライン開催

Transcript

1. 2025/05/09 Hayami Shuhei (@aqhayami) BLoCύλʔϯͱ flutter_bloc SODA FLUTTER TALK #2
2. BLoC Pattern Business Logic Component
3. 2018೥ͷDartConfʹͯɺ Google Adwords (ݱGoogle޿ࠂ) ΞϓϦΛ։ൃ͍ͯͨ͠ Paolo Soares ࢯ͕ൃද MVVMʹ੍໿Λ଍ͨ͠Α͏ͳσβΠϯύλʔϯ ւ֎Ͱ͸ݱࡏ΋ࠜڧ͍ਓؾʢ೔ຊͰ͸஌໊౓௿Ίʣ BLoCύλʔϯͱ͸ https://www.youtube.com/watch?v=PLHln7wHgPE
4. 1. 2018೥൛ BLoCʢݪయʣ 2. ݱߦ൛ BLoC BLoCύλʔϯ͸ೋछྨ͋Δ
5. FlutterΞϓϦ։ൃʹ͓͚Δઃܭͷ՝୊ UI Component (Widget) Event (ϘλϯλοϓͳͲ) Business Logic (ܭࢉॲཧ) D a t a Logic (σʔλͷಡࠐͱอଘɺ௨৴) EntityͳͲ Model View ઃܭͷجຊ͸ʮViewͱModelͷ෼཭ʯ
6. FlutterΞϓϦ։ൃʹ͓͚Δઃܭͷ՝୊ UI Component (Widget) Event (ϘλϯλοϓͳͲ) UIʹؔ͢Δ Business Logic (UI Logic) Business Logic (ܭࢉॲཧ) D a t a Logic (σʔλͷಡࠐͱอଘɺ௨৴) EntityͳͲ Model View ࠷ॳ͸໰୊ͳ͍͕ɺஈʑͱViewʹLogic͕ࠞͬͯ͘͟Δ if (Pl a tform.isIOS)… if (Pl a tform.isAndroid)… if (kIsWeb)… ը໘ͷԣ෯͕ԿpxҎԼͩͬͨΒ… εΫϩʔϧ࠲ඪ͕ԿpxΛ௒͑ͨΒ…
7. FlutterΞϓϦ։ൃʹ͓͚Δઃܭͷ՝୊ View͕ෳࡶԽ͠ɺModelͷڥք͕ᐆດʹ Business Logic D a t a Logic EntityͳͲ Model View buildϝιουͷreturnͷલʹ ෳࡶͳ UI Logic ͕… UI Logic ͷॲཧʹԠͯ͡Eventൃੜ buildϝιουͷreturnதʹ΋Logic
8. 2018೥൛ BLoC ߴػೳԽͨ͠View (Page, Component) Λ UI Componentͱ Business Logic Component (BLoC)ʹ෼཭ UI Logic ViewͷEventͷॲཧ Modelͷ஋Λมܗͯ͠ ViewʹૹΔ UI Component Event View BLoC Cl a ss Model
9. 2018೥൛ BLoC ViewͱBLoCͷ΍ΓͱΓ͸ StreamͱSink͚ͩͰߦ͏ UI Logic ViewͷEventͷॲཧ Modelͷ஋Λมܗͯ͠ ViewʹૹΔ UI Component Event View BLoC Cl a ss View͸StreamͰૹΒΕ͖ͯͨ஋Λͦͷ··WidgetͷҾ਺ʹ౉ͯ͠දࣔ͢Δ͔ɺ bool஋ʹΑΔ෼ذͷΈߦ͏ͷ͕ཧ૝ (Logicͷഉআ) SinkͰૹΓ StreamͰड͚औΔ
10. 2018೥൛ BLoC BLoC ≒ ViewModel ViewͷEventͷॲཧ Modelͷ஋ΛView༻ʹม׵ UI Logic UI Component Event UI Logic View ViewModel Model ͨͩ͠MVVMʹ͸View͔ΒLogicΛഉআ͢Δͱ͍͏نଇ͸ͳ͍
11. 2018೥൛ BLoC ೥݄͕ܦͭʹͭΕ2018೥൛BLoCͷॱक͸͖ͭ͘ͳΔ (౰࣌ͷFlutterϕʔλ൛ͩ͠…) ҰͭͷViewʹҰͭͷBLoC͸ཻ౓͕ߥ͍ CQRS (ϔϧύʔؔ਺ɺNoti f ierProviderͳͲ) ͷ࣌୅ʹ sink.add͚ͩͰ΍ΓऔΓ͢Δͷ͸͖͍ͭ
12. ҰͭͷBLoCͰ୯Ұͷ஋ͷঢ়ଶ؅ཧ͕جຊʹ StreamͱSinkʹΑΔ΍ΓͱΓ͸ఫഇ ߋ৽खஈ͸ܾΊΒΕͯͳ͍ͷͰϝιουΛ࣮ߦͰ΋OK →ViewͷLogicഉআͱ͍͏ࢥ૝͸࢒ͭͭ͠ɺ ݱࡏͷओཁͳঢ়ଶ؅ཧख๏ͱࣅͨܗʹ ͦͯ͠ݱߦ൛BLoCʹ
13. https://pub.dev/packages/ f lutter_bloc
14. ݱߦ൛BLoCΛߏங͢ΔͨΊͷύοέʔδ pub.devͰ7700LikesɺFlutter Favorite ݱࡏ΋ϝϯςφϯε͞Εଓ͚͍ͯΔ ίʔυ஌ݟ͕ଟ͍ͷͰ AI Agent ΋ॻ͍ͯ͘Ε΍͍͢ f lutter_blocύοέʔδ
15. ؔ࿈ύοέʔδ΋ॆ࣮͍ͯ͠Δ bloc (Dart୯ମͰಈ࡞) bloc_lint (VSCode֦ு΋͋Γ) bloc_test bloc_tools (CLIɺ·ͩDev൛) ެࣜυΩϡϝϯτ΋͋Γ (https://bloclibrary.dev/) f lutter_blocύοέʔδ
16. return MaterialApp( home: BlocProvider( create: (context) => CounterBloc(), child: CounterPage(), ), ); // CounterPage಺ final state = context.watch<CounterBloc>().state; return Scaffold( body: Center(child: Text('Count: ${state.count}’)), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () => context.read<CounterBloc>().add(IncrementEvent()), ), ); providerύοέʔδΛ಺෦Ͱ࢖͍ͬͯΔͷͰɺ ౉͠ํ΋جຊతʹಉ͡
17. // ঢ়ଶΛఆٛ sealed class CounterState {} class CounterInitial extends CounterState {} class CounterLoaded extends CounterState { final int count; CounterLoaded(this.count); } // ΠϕϯτΛఆٛ sealed class CounterEvent {} class IncrementEvent extends CounterEvent {} BLoC͸ঢ়ଶͱΠϕϯτΛηοτͰ࣋ͭ ঢ়ଶʹԠͯ͡อ࣋͢Δ஋Λม͑ΒΕΔ
18. class CounterBloc extends Bloc<CounterEvent, CounterState> { CounterBloc() : super(CounterInitial()) { // ΠϕϯτΛొ࿥ on<IncrementEvent>(_onIncrement); } void _onIncrement(IncrementEvent event, Emitter<CounterState> emit) { final currentState = state; // ݱࡏͷঢ়ଶʹԠͯ͡෼ذ switch (currentState) { case CounterInitial(): ɹɹɹ // ঢ়ଶͷߋ৽͸emitΛ࢖͏ emit(CounterLoaded(1)); case CounterLoaded currentState: emit(CounterLoaded(currentState.count + 1)); } } } BlocΫϥε಺ͰΠϕϯτॲཧΛ࣮૷
19. ୯Ұͷঢ়ଶ͚ͩͰྑ͍ͳΒCubitͱ͍͏؆қ൛BLoC΋͋Δ class CounterCubit extends Cubit<int> { CounterCubit() : super(0); void increment() => emit(state + 1); }
20. View͔ΒLogic͕(΄΅)ഉআ͞ΕΔͷͰɺ Viewͷߏ଄͕ݟ΍͘͢ͳΓɺςετ΋͠΍͍͢ ϏϧυʹԠͯ͡ViewΛϑΝΠϧ͝ͱஔ͖׵͑Δ͜ͱ΋Մೳ ϞόΠϧͱσεΫτοϓͰUIΛେ෯ʹ੾Γସ͑ΕΔ FlutterWeb΍webύοέʔδɺJasprͰ΋༗ޮ HTMLϑΝΠϧͷ੾Γସ͑ʹ͍ۙΠϝʔδ ✅ BLoCͷར఺
21. ඞવతʹίʔυྔ͕hooks_riverpodͳͲͱൺ΂ͯ૿͑Δ ViewͷLogicഉআ͸೉қ౓͕ߴ͍ f lutter_blocͰ͸BLoCؒͷ࿈ܞ༻ͷศརͳػೳ͸ͳ͍ͷͰ ଞͷύοέʔδͱ૊Έ߹ΘͤͨΓ͢Δඞཁ͕͋Δ View͕ෳࡶԽ͢Δͷ͸࢓ํͳ͍ͷͰίʔυྔΛݮΒͦ͏೿ ͱͷٞ࿦͕ੲ͔Βଓ͍͍ͯΔײ͡ ❌ BLoCͷܽ఺
22. BLoCύλʔϯ͸ۜͷ஄ؙͰ͸ͳ͍ ར఺ͱܽ఺͕͸͖ͬΓ͍ͯ͠Δ Ͱ΋ɺઃܭΛߟ͑Δࡍͷબ୒ࢶͱ͓ͯ࣋ͬͯ͘͠ ͱ໾ཱͭ೔͕དྷΔ͔΋ ·ͱΊ
23. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ X: @aqhayami Zenn: @hyshu