$30 off During Our Annual Pro Sale. View Details »

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

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

Kenichi Yonekawa

April 13, 2016
Tweet

More Decks by Kenichi Yonekawa

Other Decks in Programming

Transcript

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

    View Slide

  2. View Slide

  3. View Slide

  4. GSFFFͷJ04ΞϓϦ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  13. 'MVYͷ࠾༻

    View Slide

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

    View Slide

  15. ։ൃํ਑
    • جຊతʹViewControllerͱ1:1ͰStoreΛ࡞Γঢ়ଶΛ؅ཧ͢Δ
    • ΞϓϦέʔγϣϯશମͷঢ়ଶʢೝূ͍ͯ͠Δͱ͔ʣΛ؅ཧ͢Δ
    StoreΛ࡞Γɺάϩʔόϧʹอ࣋͢Δ
    • APIϦΫΤετ͸ActionCreatorͰߦ͍ɺ݁ՌΛActionͷ
    Payloadͱͯ͠Storeʹड͚౉͢
    • Realm(DB)΁ͷอଘ͸ΞϓϦέʔγϣϯͷঢ়ଶมԽͱΈͳ͠
    StoreͰߦ͏

    View Slide

  16. Store
    ViewController
    Store
    ViewController
    ߏ੒
    Dispatcher
    Action
    Action
    Store
    Store (Global)
    Store
    ViewController
    ActionCreator
    Action
    Action
    Application

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  20. class ViewController: UITableViewController {
    let store = TodoStore()
    func viewDidLoad() {
    super.viewDidLoad()
    store.subscribe { () in
    tableView.reloadData()
    }
    ActionCreator.invoke(FetchAction())
    }
    }
    ViewController

    View Slide

  21. ࣮ઓ౤ೖ
    https://itunes.apple.com/jp/app/id1037197002

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. 'MVYWT3FEVY

    View Slide

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

    View Slide

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

    View Slide

  30. Redux or Flux?
    • جຊతʹ͸ReduxͷSingle State Tree͸ΑΓྑ͍ঢ়ଶ؅ཧͷ
    ࢓૊ΈΛఏڙͯ͘͠ΕΔͷͰΑ͍
    • Redux͸Single State TreeΛલఏʹσβΠϯ͞Ε͍ͯΔͷ
    ͰɺΞϓϦέʔγϣϯશମΛͦΕલఏʹ࡞Βͳ͍ͱ͍͚ͳ͍
    • Flux͸੍໿͕؇͍ͷͰɺෳࡶͳUIΛ෦෼తʹஔ͖׵͑ΔͳͲ
    طଘͷΞϓϦʹ΋ೖΕ΍͍͢

    View Slide

  31. ReSwift
    • https://github.com/ReSwift/ReSwift
    • ReduxͷSwift࣮૷
    • ৄ͘͠͸ninjinkun͞Μ͕࿩ͯ͘͠ΕΔͱࢥ͍·͢ɻ

    View Slide

  32. ·ͱΊ

    View Slide

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

    View Slide

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

    View Slide