MVVMでProtocol Oriented をやってみた話

#potatotips 35 の発表資料です

Transcript

1. MVVM Ͱ Protocol Oriented Λ ΍ͬͯΈͨ࿩ ɹkumapo
2. ࣗݾ঺հ • ຊۀ͸ iOS ΤϯδχΞ • ͦͷ๣ΒͰαΠυϓϩδΣΫτΛ༑ਓͨͪͱ ΍͍ͬͯΔ
4. ͖ΐ͏࿩͢͜ͱ • αΠυϓϩδΣΫτͰॳΊͯMVVMΛ࠾༻ͯ͠Ҏདྷɺ ઃܭΛࢼߦࡨޡ͖ͯͨ͠ • ͖ΐ͏͸ ViewModelͰ Protocol Oriented ΍ͬͯΈ ͨ࿩Λ͠·͢ • Ξϓϩʔνͱͯ͠͸ ”Introduction to Protocol- Oriented MVVM by Natasha Murashev” ΛΞϨϯδ
5. MVVM Ͱࢼߦࡨޡͨ͠Օॴ • ViewModel Ͱͷ Data Formatting • σʔλʢModelͳͲʣ Λ View͕ٻΊΔܗ΁ ͱม׵͢ΔՕॴ • ViewModel ಉ࢜Ͱ ϩδοΫ͕ॏෳͯ͠͠· ͏
6. ྫ: TableViewController ͱ ViewController ͔ΒͳΔ 2ը໘
7. // ImageView΁σʔλΛఏڙ͢ΔViewModel struct ShowStickerViewModel { var model: Sticker var imageURL: URL? { return URL(string: model.imageURLString) } var placeholderImage: UIImage { return UIImage(named: “imgBlank”)! } Before: Data Formatting // TableViewCellͷImageView΁σʔλΛఏڙ͢ΔViewModel struct StickerCellViewModel { var model: Sticker var imageURL: URL? { return URL(string: model.imageURLString) } var placeholderImage: UIImage { return UIImage(named: “imgBlank”)! }
8. // ImageView΁ఏڙ͢ΔσʔλΛఆΊͨϓϩτίϧ protocol ImageURLPresentable { var imageURL: URL? { get } var placeholderImage: UIImage { get } } After: Data Formatting
9. // Protocol Extension ͯ͠ ImageURLPresentable ͷϓϩύςΟΛ࣮૷ // ܕ੍໿ͱͯ͠ Sticker Λࢦఆ extension ViewModelType where Self: ImageURLPresentable, ModelType == Sticker { // σϑΥϧτͷ࣮૷: Sticker Λ Data Formatting ͢Δ var imageURL: URL? { return URL(string: model.imageURLString)ɹ } var placeholderImage: UIImage { return UIImage(named: “imgBlank”)! } After: Data Formatting // σʔλϑΥʔϚοτͷσϑΥϧτͷ࣮૷Λఏڙ͢Δϓϩτίϧ protocol ViewModelType { associatedtype ModelType // ϑΥʔϚοτର৅ͷܕΛύϥϝʔλʔʹ var model: ModelType { get } }
10. struct ShowStickerViewModel: ViewModelType { typealias ModelType = Sticker var model: ModelType } extension ShowStickerViewModel: ImageURLPresentable {} // ϓϩτίϧʹద߹ After: Data Formatting struct StickerCellViewModel: ViewModelType { typealias ModelType = Sticker var model: ModelType } extension StickerCellViewModel: ImageURLPresentable {} // ϓϩτίϧʹద߹ // ShowStickerViewController.swift imageView!.sd_setImage(with: viewModel.imageURL, placeholderImage: viewModel.placeholderImage)
11. ·ͱΊ • ViewModel ͷ Data Formatting ͷ ϩδοΫΛ Protocol Extension Λ༻͍ͯڞ௨Խͨ͠ • ViewModel ΛܕύϥϝʔλʔΛ࣋ͭϓϩτίϧʹద ߹ͤ͞Δ • Protocol Extension Λ༻͍ͯ Data Formattingͷσ ϑΥϧτ࣮૷Λఏڙ͢Δ • σϑΥϧτͷ࣮૷͸ର৅ͷσʔλΛܕ੍໿ʹ͓ͯ͘͠
12. αϯϓϧίʔυ kumapo/ProtocolOrientedMVVM • ViewModel ϨΠϠʔͰͷData Formatting • ViewϨΠϠʔͰͷ Data Filling