MVVM for iOS MVVM for iOS @laiso @laiso 03/12/2014 03/12/2014 potatotips#5(at COOKPAD) potatotips#5(at COOKPAD) 

laiso is NOT laiso is NOT ແ৬ ແ৬ http://lai.so/ 

ΤϯλʔϓϥΠζ ΤϯλʔϓϥΠζObjective-C Objective-C ͷੈքͱ͸ ͷੈքͱ͸ 

มߋ͕πϥ͍ มߋ͕πϥ͍iOS iOSΞϓϦέʔ ΞϓϦέʔ γϣϯ γϣϯ Fat & Massive ViewController God object, Singleton UI testing is very hard 

มߋʹཱͪ޲͔͏ มߋʹཱͪ޲͔͏iOS iOSΞϓϦ ΞϓϦ έʔγϣϯ έʔγϣϯ OSΞοϓσʔτʹΑΓΫϥΠΞϯτͷ؀ڥ͕ͲΜͲΜߋ ৽͞ΕͯΏ͘ ϢʔβʔαΠυͰಈ͘ͿΜݖݶ΍Өڹ͕େ͖͘มߋʹϦε Ϋ͕͋Δ(඼࣭ཁٻ͕ߴ͍) ωΠςΟϒUIͷมߋ͸HTML+JavaScriptͳͲΑΓॏ͘ͳΓ ͕ͪ 

ઃܭվળ ઃܭվળ ίʔυΛཧղ͠΍͍ͨ͘͢͠ ςετΛॻ͖΍͍ͨ͘͢͠ มߋʹڧ͘ͳΓɺߴ଎ʹ։ൃ͍ͨ͠ 

MVVM MVVM (Model View ViewModel) (Model View ViewModel) 

MVVM MVVM Windows / .NET WPF Silverlight JavaScript Framework AngularJS KnockoutJS 

MVC MVC MVVM MVVM 

Cocoa vs MVVM Cocoa vs MVVM ϓϥοτϑΥʔϜຖʹMVCͷߟ͑ํ͸ҧ͏ (Rails,Cocoa,Smalltalk) Controller != ViewController MVVM View == View+ViewController 

ViewController ViewController Ϗϡʔͷίϯτϩʔϥʔ ΞϓϦέʔγϣϯ/Ϟδϡʔϧ"ͷ"ίϯτϩʔϥʔͰ͸ͳ ͍ ର৅ͷϏϡʔΛอ໋࣋ͯ͠ྩ͢Δ 

ViewModel ViewModel View-ModelɻϏϡʔͷͨΊͷϞσϧ σʔλόΠϯσΟϯάͷ࢓૊ΈͰσʔλΛϏϡʔͱ઀ଓ Ϗϡʔͳ͠Ͱ΋ΠϯλʔϑΣΠεΛૢ࡞Ͱ͖Δ 

MVVM MVVMͷத৺ͱͳΔߟ͑ํ ͷத৺ͱͳΔߟ͑ํ એݴతͳViewςϯϓϨʔτ σʔλόΠϯσΟϯά 

Storyboard(IB) Storyboard(IB) એݴతͳViewςϯϓϨʔτ Storyboard != View த਎͸Ξοϓϧͷಠࣗن֨ͷXMLςΩετϑΝΠϧ Xcode͕GUIσβΠϯπʔϧͱͯ͠ղऍ͢Δɻ ຊ෼͸ϏϡʔΛએݴͯ͠ΠϕϯτΛ઀ଓ͢Δ͜ͱ ʮUIύʔπΛը໘ʹදࣔͤ͞ΔͨΊͷπʔϧʯҎ্ͷ ҙຯ߹͍͕͋Δ 

σʔλόΠϯσΟϯά σʔλόΠϯσΟϯά = Co‐ = Co‐ coa coaόΠϯσΟϯά όΠϯσΟϯά? ? Mac OS X޲͚ͷσʔλόΠϯσΟϯάػߏ iOSʹ͸དྷͯͳ͍ see "Cocoa Bindings Programming Topics" http://news.mynavi.jp/special/2005/cocoamvc/menu.html 

σʔλόΠϯσΟϯά σʔλόΠϯσΟϯά = Re‐ = Re‐ activeCocoa activeCocoa https://github.com/ReactiveCocoa/ReactiveCocoa 

ReactiveCocoa ReactiveCocoa Mac/iOSͰϦΞΫςΟϒϓϩάϥϛϯάΛ࣮ݱ͢Δҝͷϥ ΠϒϥϦ ؔ਺ܕϓϩάϥϛϯά෩ͷݴޠ಺DSL 

ReactiveCocoa ReactiveCocoaͱ ͱGitHub GitHub GitHubࣾͷਓୡΛϝΠϯʹ։ൃ͞Ε͍ͯΔ GitHub͕Windows൛ΞϓϦέʔγϣϯΛ։ൃ͠ग़ͨ͋͠ ͨΓ͔Β׆ൃʹ GitHubʹC#/.NETܥͷ࣮ྗऀ͕͍ΔɻXamarin/Mono΋΍ ͬͯΔͦ͏ GitHubͷMacΞϓϦ͸ReactiveCocoaΛ࢖ͬͯMVVMΛ࣮ ݱ͍ͯ͠Δ 

ReactiveCocoa ReactiveCocoa มߋΛγάφϧͱ͍͏ΦϒδΣΫτͰදݱͰ͖ΔͷͰɺ ViewModel͸ViewͷৄࡉΛ஌Δඞཁ͕ͳ͍ ViewModelΛର৅ʹςετ͕ॻ͚Δ 

RVMViewModel RVMViewModel ReactiveCocoa/ReactiveViewModel ಛఆͷγάφϧͷΠϯλʔϑΣΠεΛఆٛͨ͠ϕʔεΫϥ ε ViewModelͰܧঝͯ͠࢖͏ 

ViewModel ViewModelΛ࢓ࠐΉ Λ࢓ࠐΉ ViewControllerͷॳظԽ࣌ʹ // TipsListViewController - (id)init { // ... self.viewModel = [[TipsListViewModel alloc] init]; return self; } 

ViewModel ViewModelΛ࢓ࠐΉ Λ࢓ࠐΉ StoryboardͷγʔέϯεͰInject // TipsListViewController - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { if ([[segue identifier] isEqualToString:@"showDetail"]) { NSIndexPath *indexPath = [self.tableView indexPathForSelectedRow]; TipsDetailViewController *viewController = segue.destinationViewController; // ભҠઌͷViewModelΛॳظԽͯ͠ฦ͢ viewController.viewModel = [self.viewModel detailViewModelForIndexPath:indexPath]; } } 

ViewModel ViewModelͷ୯ମςετ ͷ୯ମςετ it (@"ViewModelͷςετ", ^{ TipsDetailViewModel *viewModel = [[TipsDetailViewModel alloc] initWithModel:tips] expect(viewModel.title).to.equal(@"MVVM for iOS"); expect(viewModel.subTitle).to.equal(@""); expect(viewModel.author).to.equal(@"laiso"); }); 

Pros Pros UIͱϩδοΫͷ෼཭ ςετ͠΍͘͢ͳΔ ࠶ར༻͠΍͘͢ͳΔ ϦΞΫςΟϒUIԽͰͷԠ౴ੑ޲্ 

Cons Cons هड़ྔ͕૿͑Δ ReactiveCocoaͷޠኮΛशಘ͢Δඞཁ͕͋Δ ࣮ݧతͰ࣮ફ͢Δͷ͕೉͍͠ ϑϨʔϜϫʔΫଆͷڧ੍ྗ͸ͳ͍ͷͰͨͩ৑௕ʹͳͬ ͯΠϚΠνͳײ͡ͰऴΘΔՄೳੑ΋͋Δ UIʹର͢Δςετ͸ΧόʔͰ͖ͳ͍ 

͜Ε͔Β ͜Ε͔Β 1. ෳ਺ͷ։ൃऀ͕͔͔ΘΔΑ͏ͳෳࡶͰن໛ͷେ͖ͳΞϓϦ έʔγϣϯΛ͏·͘։ൃͰ͖ΔΑ͏ʹ͢Δ 2. ςετͰอޢͰ͖ΔൣғΛ૿΍ͯ͠ϦϑΝΫλϦϯάͰί ʔυͷ෗ഊΛ๷͗ߴ଎ʹϦϦʔεͰ͖ΔΑ͏ʹ͢Δ 3. ํ๏࿦ͷಋೖͰ͸ͳ͘എܠͷ՝୊ʹؔ৺Λ࣋ͪࣗ෼ͨͪͰ ߟ͑Δ͜ͱͰվળ͍ͯ͘͠ 

ࢀߟࢿྉ ࢀߟࢿྉ Code Reuse with MVVM Model-View-ViewModel for iOS | Teehan+Lax ReactiveCocoa/Documentation/FrameworkOverview.md at master · ReactiveCocoa/ReactiveCocoa GUI Architectures 

Functional Reactive Program‐ Functional Reactive Program‐ ming on iOS ming on iOS https://leanpub.com/iosfrp 

Xamarin.iOS Xamarin.iOS C#޲͚ͷMVVMαϙʔτϥΠϒϥϦ https://github.com/MvvmCross/MvvmCross https://github.com/reactiveui/ReactiveUI 

Thank You Thank You