Fluxで複雑な状態の変化を予測可能にするiOSアプリ開発

 Fluxで複雑な状態の変化を予測可能にするiOSアプリ開発

3fe447a7f9238108e6c50e97ac12717a?s=128

Kenichi Yonekawa

April 13, 2016
Tweet

Transcript

  1. @yonekawa 'MVYͰෳࡶͳঢ়ଶͷมԽΛ ༧ଌՄೳʹ͢ΔJ04ΞϓϦ։ൃ

  2. None
  3. None
  4. GSFFFͷJ04ΞϓϦ

  5. https://itunes.apple.com/jp/app/id811207074

  6. ಛ௃తͳ՝୊ • ͋Δೖྗ΍બ୒ʹΑͬͯ௥ՃͷϑΥʔϜ͕දࣔ/ඇදࣔʹ ͳͬͨΓ͢Δέʔε͕ଟ͘ɺViewͷঢ়ଶ؅ཧ͕ෳࡶ • 1ͭͷσʔλมߋॲཧʹରͯ͠ෳ਺ͷϞσϧ͕ؔ࿈͠ɺґଘ ͠߹͏͜ͱ͕ଟ͍ • ΞϓϦͱͯ͠ͷػೳͷଟ͞ɺͦΕΒ͕૬ޓʹؔ࿈͋͠͏ը໘ ભҠͷෳࡶ͞

  7. MVVMͷ࠾༻ • ViewModelͰViewͷঢ়ଶͱϏδωεϩδοΫΛ؅ཧ • ReactiveCocoaͷRACSignalΛView͕subscribeͯ͠ঢ়ଶΛ όΠϯσΟϯά͢Δ • ViewModelʹมԽ͕ى͖Δͱ֘౰ͷϓϩύςΟͷมߋ͕ RACSignalʹΑͬͯ௨஌͞ΕɺView͕൓Ԡ͢Δ

  8. ViewController ViewModel APIClient ߏ੒ VIEW VIEW View ϝιουݺͼग़͠ RACSignal VIEW

    VIEW Model
  9. ݱঢ়ͷ՝୊ • ΞϓϦͷن໛͕େ͖͘ͳΔʹͭΕͯɺUIΠϕϯτ΍γεςϜ ΠϕϯτʹΑΔঢ়ଶͷมԽΛ؅ཧͰ͖ͳ͘ͳ͖ͬͯͨ • ViewModelͱͷ૒ํ޲όΠϯσΟϯάʹΑΔґଘؔ܎ͷ ༧ଌͷͮ͠Β͞ • ঢ়ଶͷ؅ཧͱϞσϧͷૢ࡞ͱυϝΠϯϩδοΫ͕ີ݁߹ •

    Ͳ͜Ͱ୭ʹΑͬͯԿ͕มΘͬͯࠓͲ͏ͳͬͯΔͷ͔͕௥͍͔ ͚ͮΒ͍
  10. WebϑϩϯτΤϯυ͔ΒֶͿ • JavaScriptͷੈքͰ͸MVVM (2way-binding) ͸͏·͘ड͚ ೖΕΒΕͳ͔ͬͨ • Reactͷొ৔ʹΑͬͯΞʔΩςΫνϟͷτϨϯυ͸FluxΛݩ ʹͨ͠୯ํ޲ϑϩʔ΁

  11. Flux facebook/flux: Application Architecture for Building User Interfaces

  12. ΑΓྑ͍ΞʔΩςΫνϟ΁ͷԾઆ • WebϑϩϯτΤϯυͷྺ࢙͔ΒɺfreeeΞϓϦ๊͕͍͑ͯΔ ໰୊͸૒ํ޲όΠϯσΟϯάͷຊ࣭తͳ໰୊ͳͷͰ͸ • ୯ํ޲ϑϩʔͷίϯηϓτ͸iOSʹ͓͍ͯ΋Viewͷঢ়ଶ؅ཧ Λ៉ྷʹ͢ΔͨΊʹ༗༻ͳͷͰ͸

  13. 'MVYͷ࠾༻

  14. جຊϑϩʔ • Viewͷঢ়ଶΛStore͕࣋ͪɺStore͸ActionͷൃߦΛ଴ͪड ͚Δ • StoreΛ֎෦͔Βมߋ͢Δ͜ͱ͸Ͱ͖ͣɺdispatch͞Εͨ ActionʹԠͯࣗ͡਎Ͱมߋ͢ΔͷΈ • Store͸ͦΕ͕มߋ͞Εͨ͜ͱͷΈΛViewʹ௨஌͢Δ •

    มߋ͞Εͨࠩ෼ΛૹͬͨΓ͸͠ͳ͍ • View͸ৗʹStoreͷ࠷৽ͷঢ়ଶ͔Βߏங͞ΕΔ
  15. ։ൃํ਑ • جຊతʹViewControllerͱ1:1ͰStoreΛ࡞Γঢ়ଶΛ؅ཧ͢Δ • ΞϓϦέʔγϣϯશମͷঢ়ଶʢೝূ͍ͯ͠Δͱ͔ʣΛ؅ཧ͢Δ StoreΛ࡞Γɺάϩʔόϧʹอ࣋͢Δ • APIϦΫΤετ͸ActionCreatorͰߦ͍ɺ݁ՌΛActionͷ Payloadͱͯ͠Storeʹड͚౉͢ •

    Realm(DB)΁ͷอଘ͸ΞϓϦέʔγϣϯͷঢ়ଶมԽͱΈͳ͠ StoreͰߦ͏
  16. Store ViewController Store ViewController ߏ੒ Dispatcher Action Action Store Store

    (Global) Store ViewController ActionCreator Action Action Application
  17. ϥΠϒϥϦԽ • https://github.com/yonekawa/SwiftFlux • DispatcherͱͦΕʹඥͮ͘Action/Storeͷந৅Խ • ReduceStoreͱ͔Flux Utils΋Ұ෦࣮૷ͯ͠Δ • ϓϩτίϧࢦ޲ͰSwiftΒ͠͞Λҙࣝͨ͠

  18. struct FetchTodo: Action { typealias Payload = [Todo] func invoke(dispatcher:

    Dispatcher) { Session.sendRequest(FetchTodoRequest()) { result in switch result { case .Success(let todos): dispatcher.dispatch(self, result: Result(value: todos)) case .Failure(let error): dispatcher.dispatch(self, result: Result(error: error)) } } } } Action
  19. class TodoStore: StoreBase { private(set) var todos: [Todo] private(set) var

    error: Error? func init() { register(FetchTodo.self) { (result) in switch result { case .Success(let todos): error = nil self.todos = payload emitChange() case .Failure(let error): self.error = error emitChange() } } } } Store
  20. class ViewController: UITableViewController { let store = TodoStore() func viewDidLoad()

    { super.viewDidLoad() store.subscribe { () in tableView.reloadData() } ActionCreator.invoke(FetchAction()) } } ViewController
  21. ࣮ઓ౤ೖ https://itunes.apple.com/jp/app/id1037197002

  22. ϝϦοτ • View͸ৗʹStore͔Βશͯߏங͞ΕΔͷͰɺݱࡏͷViewͷঢ় ଶ͕໌ࣔతʹͳΓݟ௨͕͠Α͘ͳΔ • StoreΛߋ৽͢Δͷ͸Storeࣗ਎͔͋͠Γಘͳ͍ͷͰɺঢ়ଶͷ มԽ͸֘౰ͷAction͕ൃߦ͞Ε͔ͨΛ௥͏͚ͩͰΑ͍ • APIϦΫΤετ౳ͷঢ়ଶΛม͑ಘΔϩδοΫͱঢ়ଶΛ؅ཧ͢ Δ৔ॴΛ໌֬ʹ෼͚ΒΕΔ

  23. Viewͷࠩ෼ߋ৽ • Swiftͷੈքʹ͸React͕ଘࡏ͠ͳ͍ɻͦΕͬΆ͍΋ͷ͸͍͘ ͔ͭ͋Δ͕Viewͷ࡞Γํ͕ಠࣗʹͳ͓ͬͯΓɺUIKit͕ఏڙ ͢Δ΋ͷ͔Β֎ΕΔͷ͸ϦεΫ͕ߴ͍ • ViewΛຖճ࠶ߏங͢Δͷ͸ίετ͕͔͔ΔͷͰࠩ෼ߋ৽͕ ඞཁɻ͔͠͠ؾΛ͚ͭͳ͍ͱঢ়ଶΛ࡞ͬͯ͠·͏ɻ • UITableViewͳͲΛ͏·ࠩ͘෼ߋ৽͢Δ൚༻తͳ࢓૊Έ͕΄

    ͍͠
  24. ίʔυྔ͸૿͑Δ • ঢ়ଶΛม͑ΔͨΊʹຖճActionͱStoreʹ࣮૷͕ඞཁ • ୯७ͳೖྗ஋ͷ൓өͳͲ΋ຖճDispatcherΛܦ༝ͯ͠Store ΁ૹΔͷͰ৑௕ʹͳΔ • ঢ়ଶΛ؅ཧ͢ΔͨΊͷखؒͱͯ͋͠Δఔ౓͸͔ͨ͠ͳ͍

  25. Τϥʔॲཧ • ActionΛ࡞Δͱ͖ʹൃੜͨ͠ΤϥʔΛͲ͏ѻ͏΂͖͔ɻࠓ ͸Τϥʔ΋ը໘ͷঢ়ଶͷ̍ͭͱͯ͠Storeʹ౉͍ͯ͠Δ • SVProgressHUDͷΑ͏ͳग़͙ͯ͢ফ͑ΔUIΛ࢖͏৔߹ɺ Store͕࣋ͭΤϥʔঢ়ଶΛஞҰϦηοτ͢Δͷ͕໘౗

  26. Ξχϝʔγϣϯ • ۪௚ʹ΍Δͱ͍͢͝ճ਺ͷϑϩʔ͕ճΔ • Ξχϝʔγϣϯͷ։࢝ͱऴྃΛঢ়ଶͱͯ͠؅ཧ͢Δ΂͖ʁ • ReactͰ΋͜Ε͸ঢ়ଶ؅ཧͷର৅֎ͱ͍ͯ͠Δ༷ࢠ

  27. 'MVYWT3FEVY

  28. Redux • ΞϓϦέʔγϣϯͷঢ়ଶ͸1ͭͷStoreΦϒδΣΫτ͕؅ཧ ͢Δ • State͸ϦʔυΦϯϦʔͰActionͷൃߦʹΑͬͯͷΈมߋ͞ ΕಘΔ • ঢ়ଶͷભҠ͸ͨͩͷؔ਺(Reducer)ʹΑͬͯߦ͏

  29. ReduxͷϝϦοτ • Store͕1͔ͭ͠ଘࡏ͠ͳ͍ͨΊɺঢ়ଶ͕มΘΔ৔ॴ͕ΑΓ ݶఆ͞Εͯݟ௨͠΍͘͢ͳΔ • ҰՕॴͰશͯͷঢ়ଶ͕มΘΔͨΊɺ׬શͳมߋͷཤྺΛอ ࣋Ͱ͖Δ͜ͱʹΑΓɺUndo/RedoͳͲ΋༰қ • Reducerؔ਺͸લͷঢ়ଶʹॲཧΛՃ͑ͯ৽͍͠ঢ়ଶΛฦͩ͢ ͚ͳͷͰςετ͠΍͍͢

  30. Redux or Flux? • جຊతʹ͸ReduxͷSingle State Tree͸ΑΓྑ͍ঢ়ଶ؅ཧͷ ࢓૊ΈΛఏڙͯ͘͠ΕΔͷͰΑ͍ • Redux͸Single

    State TreeΛલఏʹσβΠϯ͞Ε͍ͯΔͷ ͰɺΞϓϦέʔγϣϯશମΛͦΕલఏʹ࡞Βͳ͍ͱ͍͚ͳ͍ • Flux͸੍໿͕؇͍ͷͰɺෳࡶͳUIΛ෦෼తʹஔ͖׵͑ΔͳͲ طଘͷΞϓϦʹ΋ೖΕ΍͍͢
  31. ReSwift • https://github.com/ReSwift/ReSwift • ReduxͷSwift࣮૷ • ৄ͘͠͸ninjinkun͞Μ͕࿩ͯ͘͠ΕΔͱࢥ͍·͢ɻ

  32. ·ͱΊ

  33. ·ͱΊ • ୯ํ޲ϑϩʔͷΞʔΩςΫνϟ͸Viewͷঢ়ଶΛݟ௨͠΍͢ ͯ͘͘͠ΕΔͷͰiOSʹ͓͍ͯ΋ϝϦοτ͕͋Δ • React͕ແ͍ͨΊStoreͷঢ়ଶ͔Βޮ཰Α͘ViewΛ࡞Δͱ͜ Ζʹ՝୊͕͋Δ͕ɺ޻෉ͷ༨஍͸͋Γͦ͏ • ϥΠϒϥϦ͸ࠓͷͱ͜ΖReSwift͕ຊ໋͕ͩɺطଘΞϓϦʹ ద༻͢ΔͳΒγϯϓϧͳFlux΋͋Γ

  34. SwiftFluxͷࠓޙͷల๬ • ΋ͬͱܕ҆શʹͰ͖ΔΑ͏ʹΠϯλϑΣʔεΛݟ௚͍ͨ͠ • ෳ਺ͷStoreΛଋͶͯ؅ཧͰ͖ΔStoreGroupతػೳ • ൚༻తͳࠩ෼ߋ৽ͷͨΊͷUIϢʔςΟϦςΟ