MVVMって何？　というか…MV○丸ごと、何？

by takasek

Slide 1

Slide 1 text

.77.ͬͯԿʁ  ͱ͍͏͔ʜ.7˓ؙ͝ͱɺ Կʁ TIJCVZBTXJGU CZ

Slide 2

Slide 2 text

!UBLBTFL w GSFFMBODFJ04&OHJOFFS w 'J/$͞ΜͰ͓࢓ࣄ͍͍ͤͯͨͩͯ͞·͢ w ɹ!UBLBTFL w ɹUBLBTFL w ɹUBLBTFL

Slide 3

Slide 3 text

!UBLBTFL w /PUJGXJGU  IUUQTHJUIVCDPNUBLBTFL/PUJGXJGU  /4/PUJpDBUJPOͷVTFS*OGPΛ  4XJGUZʹѻ͏ϚΠΫϩϥΠϒϥϦ w "DUJPO$MPTVSBCMF  IUUQTHJUIVCDPNUBLBTFL"DUJPO$MPTVSBCMF  UBSHFUBDUJPOΛ౉͢ॲཧΛ  4XJGUZͳΫϩʔδϟͰॻ͚Δ  ϚΠΫϩϥΠϒϥϦ (JU)VCͰ  044ϥΠϒϥϦ΋࡞ͬͯ·͢

Slide 4

Slide 4 text

.7$  .71  .77.

Slide 5

Slide 5 text

.7˓͸ԿΛղܾ͠Α͏ ͱ͍ͯ͠Δ͔

Slide 6

Slide 6 text

Ϗϡʔͱ  ϏδωεϩδοΫͷ෼཭

Slide 7

Slide 7 text

.7$ ݹయత.7$   .7$.PEFM   ֦ு.7$   ͦͷଞΦϨΦϨ.7$ʜ

Slide 8

Slide 8 text

ݹయత.7$ͱ͸ ϊϧ΢ΣʔͷτΡϦάϰΟɾϦφΧ΢͞ΜʹΑͬ ͯ೥ʹߟҊ͞Εͨ $POUSPMMFSͱ7JFX͸ରԠ $POUSPMMFSͷ੹຿͸ɺ  ɾೖྗͷड͚औΓ  ɾଞͷϞδϡʔϧͷૢ࡞

Slide 9

Slide 9 text

.PEFM $POUSPMMFS 7JFX ݹయత.7$ ೖྗ Φϒβʔόಉظ 4FQBSBUFE 1SFTFOUBUJPO ❌

Slide 10

Slide 10 text

ݹయత.7$ͷ؊ w ෳ਺ͷϏϡʔ͕ΦϒβʔόɾύλʔϯͰಉ࣌ʹߋ ৽͞ΕΔ͜ͱ  ʢ'PXMFSࢯ͍Θ͘ʮΦϒβʔόಉظʯʣ w ίϯτϩʔϥ͕ϏϡʔΛઈର৮Βͳ͍͜ͱ  ʢ'PXMFSࢯ͍Θ͘ʮ෼཭ϓϨθϯςʔγϣϯʯʣ

Slide 11

Slide 11 text

.PEFM $POUSPMMFS 7JFX ͪͳΈʹ.7$.PEFM XFCΞϓϦ ϦΫΤετ DMJFOU TFSWFS 1998೥ɺJSP(JavaServer Page)ͷ  ࢓༷υϥϑτͰఏএ͞ΕͨΒ͍͠ MVCΛWebαʔϏεʹద༻ ObserverύλʔϯΛ  ࢖Θͳ͍ (࢖͑ͳ͍)

Slide 12

Slide 12 text

.7$ͷ໰୊ ϓϨθϯςʔγϣϯϩδοΫͷ ஔ͖৔͕ͳ͍  UFYU$PMPS͸.PEFMʹஔ͘ʁ7JFXʹஔ͘ʁ     7JFXͷঢ়ଶΛ؅ཧͰ͖ͳ͍  UFYUpFME͕ೖྗࡁͷͱ͖͚ͩԡͤΔϘλϯΈ͍ͨͳ     6*͕ϦονʹͳΔʹै͍ɺॏେͳ໰୊ʹʜ

Slide 13

Slide 13 text

.7$ͷ໰୊ 6*ʹ͓͚Δೖྗͱग़ྗ͸  ຊ࣭తʹ͸ෆՄ෼ʜʂ

Slide 14

Slide 14 text

7JFX .PEFM $POUSPMMFS ֦ு.7$ ೖྗ Φϒβʔόಉظ 4FQBSBUFE 1SFTFOUBUJPO ɹɹɹͱ͸ 7JFX $POUSPMMFS

Slide 15

Slide 15 text

.7$ͱݴͬͯ΋ ༷ʑ

Slide 16

Slide 16 text

.PEFM J04Ͱ͋Γ͕ͪͳ.7$ ೖྗ 7JFX $POUSPMMFS 7JFX 7JFX EFMFHBUF UPVDI &WFOU 4FFBMTP  ͜Ε͕࠷ڧͷ.7$ J04 IUUQRJJUBDPNLPJUBSPJUFNTCBGEGB

Slide 17

Slide 17 text

ͦ͜Ͱ  .71 छྨ͋Δ  ؂ࢹίϯτϩʔϥ1BTTJWF7JFX

Slide 18

Slide 18 text

5BMJHFOUͱ͍͏04Ͱ࢖ΘΕ͍ͯͨΒ͍͠ ෳࡶͩͬͨͷͰ೥ࠒɺ  %PMQIJO4NBMM5BTLνʔϜʹΑͬͯ  ੔ཧ͞ΕͨΒ͍͠ .71 ؂ࢹίϯτϩʔϥ ͷྺ࢙ ڞಉ։ൃʂ

Slide 19

Slide 19 text

7JFX .PEFM 1SFTFOUFS ೖྗ Φϒβʔόಉظ .71 ؂ࢹίϯτϩʔϥ CͰ͸ͳ͘  Vͷ੹຿ ໾ׂ  ɾೖྗΛModelʹ౉͢  ɾPresentation Logic ͜͜͸ݹయతMVCͱಉ͡  ςετͮ͠Β͍໰୊͸͋Δ 

Slide 20

Slide 20 text

.PEFM 1SFTFOUFS 7JFX .71 1BTTJWF7JFX ೖྗ JOUFSGBDF ModelͱViewΛ  ׬શʹ੾Γ཭ͨ͠ ඞͣ  interfaceΛ௨͢

Slide 21

Slide 21 text

Ҿ༻"SDIJUFDUJOH"OESPJEʜ5IFDMFBOXBZ   IUUQGFSOBOEPDFKBTDPNBSDIJUFDUJOHBOESPJEUIFDMFBOXBZ ΞʔΩςΫνϟ =֤ϨΠϠͷґଘΛ೗Կʹ੔ཧ͢Δ͔

Slide 22

Slide 22 text

.PEFM 1SFTFOUFS 7JFX .71 1BTTJWF7JFX ͸  ͲͷΑ͏ʹґଘΛ੔ཧ͔ͨ͠ JOUFSGBDF ґଘੑͷٯస %*1%FQFOEFODZ*OWFSTJPO1SJODJQMF   ʹΑͬͯґଘΛҰํ௨ߦʹ

Slide 23

Slide 23 text

.77.

Slide 24

Slide 24 text

೥ʹ+PTI4NJUIࢯ͕  .4%/ϚΨδϯͰهࣄʹͨ͜͠ͱͰ޿·ͬͨ 81' 8JOEPXT1SFTFOUBUJPO'PVOEBUJPO ͷػೳ͕  લఏͱͳ͍ͬͯΔ    ɾ7JFX͸9".-ͰςϯϓϨʔτͱͯ͠એݴͰ͖Δ  ɾ֤ίϯτϩʔϧ͸%BUB$POUFYUͱ͍͏ϓϩύςΟΛ࣋ͪ  ɹσʔλόΠϯσΟϯάΛඪ४αϙʔτ .77.ͷྺ࢙

Slide 25

Slide 25 text

.PEFM 7JFX.PEFM 7JFX %BUB #JOEJOH $PNNBOET .77. ೖྗ ɹσʔλόΠϯσΟϯάͷ࣮ݱͷͨΊʹ͸ɺJ04ͷ৔߹ ɹɹ'31ϥΠϒϥϦ 3Y4XJGU 3FBDUJWF$PDPB ΍ ɹɹσʔλόΠϯσΟϯάϥΠϒϥϦ 4XJGU#POE ͷ ɹɹαϙʔτ͕ඞཁ ɹ ˞'J/$Ͱ͸ݱࡏ4XJGU#POEΛར༻

Slide 26

Slide 26 text

όΠϯσΟϯάʹΑͬͯґଘΛҰํ௨ߦʹ 7JFXɹɹ7JFX.PEFM 7JFX.PEFMɹɹ.PEFM 7JFX.PEFM 7JFX σʔλόΠϯσΟϯά .77.͸  ͲͷΑ͏ʹґଘΛ੔ཧ͔ͨ͠

Slide 27

Slide 27 text

.77.ʹΑͬͯ  Կ͕खʹೖΔͷ͔ ɾ୯ํ޲ͷґଘؔ܎  ɾ୯ํ޲ͷॲཧϑϩʔ  ɾϏδωεϩδοΫͱ  ɹϓϨθϯςʔγϣϯͷ෼཭  ɾUFTUBCJMJUZ

Slide 28

Slide 28 text

جຊɺ  7JFXˠ7JFX.PEFM͸ίϚϯυΛୟ͚ͩ͘ 7JFX.PEFMˠ7JFX͸όΠϯυ͢Δ͚ͩ 7JFX.PEFM 7JFX %BUB #JOEJOH $PNNBOET ᶃίϚϯυ ᶄঢ়ଶมߋ ᶅঢ়ଶ൓ө †એݴతʹهड़

Slide 29

Slide 29 text

class MyViewModel { weak var view: MyView? func doSomething(fuga: Fuga) { guard let view = view else { return } if view.isHoge { view.doSomething(fuga) } } } class MyView { func awakeFromNib() { viewModel.view = self } } ୯ํ޲ͷґଘؔ܎ ❌ ϨΠϠͷґଘؔ܎͕͓͔͍͠ɻ  7.͕7JFXΛ஌ͬͯ͠·͍ͬͯΔ

Slide 30

Slide 30 text

class MyViewModel { let fuga = Observable(nil) func didReceiveFuga(fuga: Fuga) { self.fuga.value = fuga } } class MyView { func awakeFromNib() { viewModel.fuga.ignoreNil().observe { [weak self] in self?.doSomething($0) } } } ୯ํ޲ͷґଘؔ܎

Slide 31

Slide 31 text

୯ํ޲ͷॲཧϑϩʔ 7JFX.PEFM΁ͷίϚϯυ͕  ɹॲཧͷ׬ྃ࣌ʹ࣮ߦ͢ΔΫϩʔδϟΛड͚ͨΓ class MyView { func awakeFromNib() { viewModel.alertMessage.observe { [weak self] in self?.showAlert($0) // ↓Ͳ͕ͬͪຊے!? } } func didTapButton() { viewModel.doSomething(completion: { [weak self] alertMessage in self?.showAlert(alertMessage) // ↑Ͳ͕ͬͪຊے!? }) } } ˠॲཧͷྲྀΕ͕ΧΦεʹʂ BMFSU.FTTBHF 0CTFSWBCMF4USJOH͕ มߋ͞ΕͨΒൃಈ ͳΜ͔΍ͬͨ݁Ռ BMFSU.FTTBHFΛ ड͚औΔ ❌

Slide 32

Slide 32 text

class MyView { var viewType: ViewType func setup(viewType: ViewType) { self.viewType = viewType switch viewType { case .Title: viewModel.title.observe { ... } case .Image: viewModel.image.observe { ... } case .Detail: viewModel.detail.observe { ... } } } } ϏδωεϩδοΫͱϓϨθϯςʔγϣϯͷ෼཭ 7JFXଆʹঢ়ଶ΍৚݅෼ذ͕͋Δ ❌

Slide 33

Slide 33 text

ʮ7JFX͸7JFX.PEFMͷӨʯΛ పఈͤ͞Δ class MyView { func awakeFromNib() { viewModel.title.observe { ... } viewModel.image.observe { ... } viewModel.detail.observe { ... } } } 7JFX͸Կ΋൑அΛߦΘͣɺ 7JFX.PEFMͷঢ়ଶΛ ໧ʑͱ6*ʹ൓өͤ͞Δ 7JFX.PEFM͸ɺ 7JFXΛ࠶ߏ੒Ͱ͖Δ͚ͩͷ ঢ়ଶ৘ใΛอ࣋͢Δ ϏδωεϩδοΫͱϓϨθϯςʔγϣϯͷ෼཭

Slide 34

Slide 34 text

ͦ΋ͦ΋7JFX.PEFM͸.PEFMͷӨͳͷͰ͢ɻ  ͦͯ͠·ͨ7JFX͸7JFX.PEFMͷӨͰ΋͋Γ·͢ɻ Ҿ༻.77.ͷ.PEFMʹ·ͭΘΔޡղUIFTFBPGGFSUJMJUZ IUUQVHBZBIBUFCMPKQFOUSZNPEFMNJTUBLF

Slide 35

Slide 35 text

.77.ʹΑͬͯ  Կ͕खʹೖΒͳ͍ͷ͔ ɾυϝΠϯ૚Πϯϑϥ૚ͷ෼཭  ɾը໘ભҠͳͲɺෳ਺ը໘ͷڠௐ

Slide 36

Slide 36 text

;ͨͨͼҾ༻"SDIJUFDUJOH"OESPJEʜ5IFDMFBOXBZ   IUUQGFSOBOEPDFKBTDPNBSDIJUFDUJOHBOESPJEUIFDMFBOXBZ .77.͸ ΞʔΩςΫνϟશମΛΧόʔͰ͖Δ֓೦Ͱ͸ͳ͘ ද૚෦෼ͷ࣮૷ʹա͗ͳ͍

Slide 37

Slide 37 text

❌ 7JFX.PEFM͕  ɹ ɹ௨৴ॲཧ  ɹσʔλΩϟογϡ  ɹ͞·͟·ͳۀ຿ͷϋϯυϦϯά   ɹʜΛߦ͍ͬͯΔ

Slide 38

Slide 38 text

.PEFM૚Λ͔ͬ͠Γ࡞Ζ͏ .PEFM%"0 %BUB"DDFTT0CKFDU Ͱ͸ͳ͍ .PEFMۀ຿ϩδοΫ ඇ6*,JUͷผϓϥοτϑΥʔϜʹҠ২ͯ͠΋มΘΒͳ͍෦෼ Α͘7JFX$POUSPMMFSʹߦ͘Β͍ॻ͔ΕͯΔ΍ͭ ͋Ε͸΄ͱΜͲ.PEFMʹॻ͘΂͖΋ͷ

Slide 39

Slide 39 text

ΑΓΑ͍.77.ͷͨΊʹ IUUQCJUMZ1&BC,