Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

宣言的UI

sonatard
August 30, 2019

 宣言的UI

宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践
https://speakerdeck.com/sonatard/swiftui-graphql

sonatard

August 30, 2019
Tweet

More Decks by sonatard

Other Decks in Programming

Transcript

  1. 5 ৽͍͠ύϥμΠϜΛֶͼཧղ͢Δͱ͍͏͜ͱ w ৽͍͠πʔϧ͕ొ৔͢Δͱ͍ͭ࢖͍ͨ͘ͳΔʂ w ͔ͦ͠͠ͷπʔϧͷ໨తΛཧղ͠ͳ͍··ݕ౼͢Δͱɺద੾ͳٕज़બ୒͕ࠔ೉ ʹͳΔɻ w 3FBDU͸ɺK2VFSZͷ࣍ʹྲྀߦͬͨΈΜͳ͕࢖͍ͬͯΔྑͦ͞͏ͳϑϨʔϜϫʔΫʁ w

    4XJGU6*͸ɺ4XJGUʹରԠͨ͠৽͍͠ϑϨʔϜϫʔΫʁ w (SBQI2-͸ɺ3&45ͷ୅ସͰϨεϙϯεϑΟϧλʔͰ͖ͯɺεΩʔϚॻ͚Δ΋ͷʁ w 3Y͸ɺඇಉظ௨৴Λ͖ͬ͢Γॻ͚Δ΋ͷʁ w %PDLFS͸ɺߴ଎ʹىಈ͢Δ7.ʁ w (P͸ɺΫϩείϯύΠϧͰ͖Δ͔ΒίϚϯυϥΠϯπʔϧ࡞ΔͨΊͷ΋ͷʁ w ͜͏͍͏ཧղͩͱؒҧͬͨ··࢖͏͔ɺޡͬͨ൑அͰ࠾༻Λݟૹͬͯ͠·͏ w ࠓճ͸ɺ3FBDU΍4XJGU6*ͷϕʔεͱͳΔએݴత6*ʹֶ͍ͭͯͿ͜ͱͰɺΈͳ ͞Μ͕ٕज़બ୒Λ͢Δࡍͷ͓ख఻͍͕Ͱ͖Ε͹ͱࢥ͍·͢ɻ
  2. • ͸ ͡ Ί ʹ • એ ݴ త U

    I ͱ ͸ • એ ݴ త U I Λ ࠾ ༻ ͠ ͨ ઌ ͷ ՝ ୊ - ঢ় ଶ ؅ ཧ • R e a c t ͷ ਐ Խ • Ξ ʔ Ω ς Ϋ ν ϟ
  3. 10 ͸͡Ίʹ w ͦͷͨΊ͜͏͍͏൑அ͸ޡΓ w ʮҎલʹൺ΂ͯYYYͷ"1*͕࢖͍ͮΒ͍͔Βෆ࠾༻ʯ w ͜Ε͸0, w ʮએݴత6*ʹՁ஋Λײ͡ͳ͍͔Βෆ࠾༻ʯ

    w େ͖ͳύϥμΠϜʹରٕͯ͠ज़બ୒Λ͢Δ΂͖Ͱɺࡉ͔͍࣮૷खஈ͸ ࠣࡉͳ໰୊ w վળ΋ظ଴Ͱ͖Δ
  4. 12

  5. 13

  6. 14

  7. 15

  8. 16 એݴత6*ͷීٴ w એݴత6*͸ඞཁͰ͋Ε͹࢖͏΋ͷͰ͸ͳ͘ɺ(6*ͷ࣮૷ํ๏ͷඪ४ʹ ͳΓಘΔ w ΞϓϦͷੈքͰ͸એݴత6*Λ࣮ݱ͢ΔϑϨʔϜϫʔΫ͕ओྲྀͰ͸ͳ ͔͕ͬͨɺ4XJGU6*ͱ+FUQBDL$PNQPTF͕ެ͔ࣜΒఏڙ͞ΕΔ͜ͱͰ େ͖͘ঢ়گ͕มΘͬͨ w

    J04ɺ"OESPJEɺ'MVUUFSɺ3FBDU/BUJWFɺ8FCϑϩϯτΤϯυ 3FBDU  7VF "OHVMBS ʜ w ݱࡏओྲྀͷ(6*։ൃ؀ڥͷ͢΂͕ͯએݴత6*Λ࠾༻ w ϑϩϯτΤϯυͰ͸ɺΑ΄Ͳͷཧ༝͕ͳ͍ݶΓ৽نͰK2VFSZΛ࠾༻͢ Δ͜ͱ͸ͳ͍͕ɺJ04ͱ"OEPJSE΋ಉ͡ʹͳΔ  w େ͖ͳస׵ظͰ͋ΓΞϓϦͷੈքͰେ͖ͳύϥμΠϜγϑτ͕ى͖Δ
  9. 18 એݴత6*ʜ w ͔͠͠3FBDU͕ϦϦʔε͞Ε͔ͯΒ௕͍ظཱ͕͕ؒͭɺ͋·Γએݴత 6*ࣗମͷ࿩͸ࣖʹ͠ͳ͍ w 3FBDUΛॻ͍͍ͯͯ΋ҙࣝͯ͜͠ͳ͔ͬͨਓ΋ଟ͍  w ԿނͳΒએݴత6*Λҙࣝͤͣͱ΋ϑϨʔϜϫʔΫʹै͑͹ͦͷϝϦο

    τΛڗडͰ͖Δ w ͦͷͨΊඞͣݕ౼͕ඞཁͳ7.ͷεςʔτ؅ཧɺಛʹ3FEVYͷΞʔΩ ςΫνϟʹ͍ͭͯٞ࿦͕த৺Ͱ͋ͬͨΑ͏ʹײ͡Δ w ͔͠͠ύϥμΠϜΛཧղͤͣʹɺϑϨʔϜϫʔΫΛར༻͢Δ͚ͩͰ͸ ద੾ͳ࢖͍ํ͕Ͱ͖ͳ͍ɻ w ͜Ε͚ͩେ͖ͳύϥμΠϜΛཧղ͠ͳ͍͜ͱ͸ͱͯ΋໪ମແ͍
  10. • ͸ ͡ Ί ʹ • એ ݴ త U

    I ͱ ͸ • એ ݴ త U I Λ ࠾ ༻ ͠ ͨ ઌ ͷ ՝ ୊ - ঢ় ଶ ؅ ཧ • R e a c t ͷ ਐ Խ • Ξ ʔ Ω ς Ϋ ν ϟ
  11. 21 ໋ྩతͱએݴత w ໋ྩత w )PX w ԿΛ͢Δ͔Λهड़͢Δ w ࠷ऴతͳ݁Ռ͕લճͷ࣮ߦ݁Ռʹґଘ͢Δ

    w એݴత w 8IBU w Ͳ͏͍͏ঢ়ଶʹͳ͍ͬͯΔ͔Λهड़͢Δ w ࠷ऴతͳ݁Ռ͕લճͷ࣮ߦ݁Ռʹґଘ͠ͳ͍
  12. 23 એݴత6*ͷ۩ମྫ w $6* ಈతͳύϥϝʔλ͕ଘࡏ͢Δ৔߹  w $6*ͷදࣔ͸ɺಈతͳύϥϝʔλҎ֎͸มΘΒͳ͍ɻ w ίʔυ͕ͦͷ··6*Λදݱ͍ͯͯ͠Πϝʔδ͠΍͍͢ɻ

    DVJ͜Μʹͪ͸  ͜Μʹͪ͸  DVJIFMMP  IFMMP 
  13. 28 ಈతͳ(6*ʹ͓͚Δ໋ྩతͳίʔυͷ೉͠͞ w CVUUPOΛΫϦοΫ͢Δͱ)FMMP͕૿͍͑ͯ͘ը໘ EJW EJW EJW )FMMP EJW ΫϦοΫ

    Πϕϯτ EJW )FMMP)FMMP EJW Πϕϯτ͕ൃՐ͢Δͱ ͜͏͍͏ݟͨ໨ʹͳ͍ͬͯ͘ͷ͔ ࣌ؒ࣠ ΫϦοΫ Πϕϯτ
  14. 31 ಈతͳ(6*Ͱͷએݴత6*Λ࣮ݱ͢ΔͨΊʹ͸ w աڈͷ՝୊ w (6*ΞϓϦͰ΋$6*ͱಉ͡Α͏ʹঢ়ଶߋ৽͝ͱʹը໘ભҠͯ͢͠΂ ͯΛ࠶ඳը͠௚ͤ͹ίʔυ্͸એݴతʹͳΔ͕ʜ w ຖճ͢΂ͯΛ࠶ඳը͢Δ͜ͱ͕ίʔυͱͯ͠ݱ࣮తͰ͸ͳ͍ w

    ঢ়ଶʹԠͯࣗ͡ಈతʹ࠶ඳը͍ͨ͠ w ຖճ࠶ඳը͢Δͱ஗͍ w 3FBDUͷొ৔ w એݴతʹ7JFXΛදݱ͢Δ w ঢ়ଶ͕ߋ৽͞ΕΔͱࣗಈతʹ7JFX͕࠶ඳը͞ΕΔ w 7JSUVBM%0.ʹΑΓࠩ෼͚ͩΛ࠶ඳըՄೳ
  15. 33 7JFX.PEFMʹԠͯ͡7JFX͕มΘΔྫΛ঺հ w )FMMP͕ͳ͍৔߹͸ɺѫࡰͳ͠ w BEE)FMMP͢Δͱɺ)FMMPʹஔ͖׵ΘΔɻ w BEE)FMMPͰ)FMMP͕ͭ૿͑Δɻ w ӈͷਤ͸ߋʹճBEE)FMMPΛԡͨ͠

    w SFNPWF)FMMPͰ)FMMP͕ͭফ͑Δɻ w ӈͷਤ͸ճSFNPWF)FMMPΛԡͨ͠ w )FMMP͕ͳ͍৔߹͸ɺѫࡰͳ͠ɻ w ӈͷਤ͸ճSFNPWF)FMMPΛԡͨ͠ EJWλά͕૿͍͑ͯ͘
  16. • ͸ ͡ Ί ʹ • એ ݴ త U

    I ͱ ͸ • એ ݴ త U I Λ ࠾ ༻ ͠ ͨ ઌ ͷ ՝ ୊ - ঢ় ଶ ؅ ཧ • R e a c t ͷ ਐ Խ • Ξ ʔ Ω ς Ϋ ν ϟ
  17. 41 ঢ়ଶͷอ࣋͢Δ৔ॴ w ঢ়ଶͷอ࣋͢Δํ਑͸େ͖ͭ͘ w ϩʔΧϧεςʔτ w ίϯϙʔωϯτ͕ঢ়ଶΛอ࣋͢Δ w άϩʔόϧεςʔτ

    w ΞϓϦέʔγϣϯશମͰͭͷঢ়ଶΛ؅ཧ͢Δ w 3FEVY͸ͪ͜ΒTJOHMFTPVSDFPGUSVUI w ͦͷଞʹ΋ঢ়ଶΛ࣋ͨͣҾ਺Ͱड͚औΔίϯϙʔωϯτ΋ଘࡏ͢Δ
  18. 45 άϩʔόϧεςʔτ w ୯ҰͷάϩʔόϧετΞͰঢ়ଶΛอ࣋͢ Δ w 3FEVYͰ͸4UPSFͱݺͿ w Օॴʹ·ͱ·͍ͬͯΔͨΊશମͷঢ়ଶ ͷ೺Ѳ͕༰қ

    w ݱࡏͷΞϓϦέʔγϣϯͷঢ়ଶͷ࠶ݱ͕ ༰қ w ίϯϙʔωϯτʹঢ়ଶΛؚ·ͳ͍ͨΊɺ ίϯϙʔωϯτͷ࠶ར༻ੑ͕௿͍৔߹͕ ͋Δ άϩʔόϧεςʔτ ঢ়ଶͷอ࣋͢Δ৔ॴ
  19. 46 άϩʔόϧεςʔτͱϩʔΧϧεςʔτͰ؅ཧ w άϩʔόϧεςʔτͱϩʔΧϧεςʔτΛ྆ ཱ͢Δ͜ͱ΋Ͱ͖Δ w ঢ়ଶͷੑ࣭ʹΑͬͯ࢖͍෼͚Δ w ҎԼɺҰྫ w

    υϝΠϯͷঢ়ଶ 6TFS ͸άϩʔόϧεςʔτ w ಉҰͷঢ়ଶΛෳ਺ՕॴͰར༻͢Δ৔߹ w 7JFXͷঢ়ଶ αΠυόʔͷ։ด ͸ϩʔΧϧε ςʔτ w ίϯϙʔωϯτʹดͨ͡ঢ়ଶ άϩʔόϧεςʔτ αΠυόʔͰ Ϣʔβ໊දࣔ ϝΠϯίϯςϯπͰ ϢʔβৄࡉΛදࣔ αΠυόʔͷ ։ดঢ়ଶ 6TFS 6TFS 6TFS 6TFS 6TFS ঢ়ଶͷอ࣋͢Δ৔ॴ
  20. 48 w ঢ়ଶΛࢀর͢Δඞཁ͕͋Δίϯϙʔωϯ τ͸ɺঢ়ଶΛอ࣋͢Δίϯϙʔωϯτ͔ Βঢ়ଶΛҾ਺ͱͯ͠ड͚औΔ w ͜Ε͸άϩʔόϧεςʔτɺϩʔΧϧε ςʔτͲͪΒ΋ಉ͡ άϩʔόϧεςʔτ αΠυόʔͰ

    Ϣʔβ໊දࣔ ϝΠϯίϯςϯπͰ ϢʔβৄࡉΛදࣔ αΠυόʔͷ ։ดঢ়ଶ 6TFS 6TFS 6TFS 6TFS 6TFS ঢ়ଶͷड͚౉͠ํͷجຊ αΠυόʔͷ ։ดঢ়ଶΛදࣔ ։ด
  21. 49 w άϩʔόϧεςʔτ͔ΒɺԼҐͷίϯ ϙʔωϯτʹঢ়ଶΛड͚౉ͨ͢Ίʹ͸ɺ ్தʹঢ়ଶ͕ෆཁͳίϯϙʔωϯτΛܦ ༝͠ͳ͚Ε͹ͳΒͳ͍ άϩʔόϧεςʔτ αΠυόʔͰ Ϣʔβ໊දࣔ ϝΠϯίϯςϯπͰ

    ϢʔβৄࡉΛදࣔ 6TFS 6TFS 6TFS 6TFS 6TFS άϩʔόϧεςʔτͷड͚౉͠ͷ໰୊఺όέπϦϨʔ 6TFSෆཁ 6TFSෆཁ 6TFSෆཁ 6TFSඞཁ 6TFSඞཁ
  22. 50 w άϩʔόϧεςʔτ͔Β௚઀ঢ়ଶΛ౉͢ w 3FEVYͰ͸ɺDPOOFDUɺTFMFDUPSͳͲͱݺ ͹ΕΔػೳͰղܾ͍ͯ͠Δ w άϩʔόϧม਺Λ͋ΒΏΔՕॴͰࢀরͯ͠ ͍ΔΑ͏ͳঢ়ଶͳͷͰɺҰఆͷடংΛ ࣋ͬͯར༻͢Δ͜ͱ͕େ੾

    w ը໘ͷSPPUίϯϙʔωϯτʹͷΈ DPOOFDU͢ΔͳͲ w ߋ৽Ͱ͖ΔΘ͚Ͱ͸ͳ͍ͷͰɺάϩʔ όϧม਺΄ͲةݥͰ͸ͳ͍ άϩʔόϧεςʔτ αΠυόʔͰ Ϣʔβ໊දࣔ ϝΠϯίϯςϯπͰ ϢʔβৄࡉΛදࣔ άϩʔόϧεςʔτͷόέπϦϨʔղܾࡦ 6TFS 6TF
  23. 52 w ίϯϙʔωϯτࣗ਎͕อ͍࣋ͯ͠Δঢ়ଶ ͷߋ৽͸໰୊ʹͳΒͳ͍ w ԼҐͷίϯϙʔωϯτ͔Β্Ґͷίϯ ϙʔωϯτͷϩʔΧϧεςʔτ΍άϩʔ όϧεςʔτΛߋ৽͢Δ৔߹͸໰୊ʹͳ Δ άϩʔόϧεςʔτ

    ϩάΠϯϖʔδ αΠυόʔͷ ։ดঢ়ଶΛอ࣋ ঢ়ଶͷߋ৽ํ๏ αΠυόʔͷ ։ดঢ়ଶΛ࣮૷ ։ด 6TFS Ͳ͏6TFS ߋ৽ʁ Ͳ͏ ։ด ߋ৽ʁ
  24. 55 w ্ҐίϯϙʔωϯτͰఆٛͨ͠Πϕϯτ Λ௨஌ w 7VF άϩʔόϧεςʔτ ϩάΠϯϖʔδ αΠυόʔͷ ։ดঢ়ଶΛอ࣋

    ϩʔΧϧεςʔτͷߋ৽ํ๏ΠϕϯτΛൃߦͯ͠ߋ৽ αΠυόʔͷ ։ดঢ়ଶΛ࣮૷ ։ด Πϕ ϯτ ௨஌
  25. 56 w ผ్ఆٛͨ͠ΠϕϯτΛ௨஌ w 3FEVYJO3FEVDFS w /FX4UBUF&WFOU 0ME4UBUF άϩʔόϧεςʔτ ϩάΠϯϖʔδ

    αΠυόʔͷ ։ดঢ়ଶΛอ࣋ άϩʔόϧεςʔτͷߋ৽ํ๏ΠϕϯτΛൃߦͯ͠ߋ৽ αΠυόʔͷ ։ดঢ়ଶΛ࣮૷ Πϕϯτ௨஌ 6TFS
  26. • ͸ ͡ Ί ʹ • એ ݴ త U

    I ͱ ͸ • એ ݴ త U I Λ ࠾ ༻ ͠ ͨ ઌ ͷ ՝ ୊ - ঢ় ଶ ؅ ཧ • R e a c t ͷ ਐ Խ • Ξ ʔ Ω ς Ϋ ν ϟ
  27. • ͸ ͡ Ί ʹ • એ ݴ త U

    I ͱ ͸ • એ ݴ త U I Λ ࠾ ༻ ͠ ͨ ઌ ͷ ՝ ୊ - ঢ় ଶ ؅ ཧ • R e a c t ͷ ਐ Խ • Ξ ʔ Ω ς Ϋ ν ϟ
  28. 74 ࠓ·ͰͷΞʔΩςΫνϟ w ΞϓϦͷΤϯδχΞ w .7$ɺ.71ɺ.77.͕ଟ͍ʁ w ϑϩϯτΤϯυΤϯδχΞ w 3FBDUɺ7VFɺ"OHVMBS

    w 3FEVY͕ଟ͍ʁ w όοΫΤϯυΤϯδχΞ w %%%Ͱ঺հ͞ΕͨϨΠϠʔυΞʔΩςΫνϟ΍$MFBO "SDIJUFDUVSF͕ଟ͍ʁ w ͜ΕΒ͸ഉଞతʹؔ܎ʹ͋Δͱࢲ͸ߟ͍͑ͯ·ͤΜɻ w ԿނͳΒͦΕͧΕͷΞʔΩςΫνϟ͕ղܾ͍ͨ͠՝୊͸ҟͳΔͨΊɺ ͦΕͧΕͷ՝୊Λಉ࣌ʹղܾ͢Δ͜ͱ͕ՄೳͰ͋ΔͨΊͰ͢ɻ
  29. 75 ΞʔΩςΫνϟ͕໨ࢦ͍ͯ͠Δ͜ͱ w .7$ɺ.71ɺ.77. w 1%4Λ࣮ݱ w %PNBJOͱͦΕҎ֎ͷ੹຿Λ෼ׂ w 3FEVY

    w 7.ͷঢ়ଶ؅ཧ w $MFBO"SDIJUFDUVSF΍ϨΠϠʔυΞʔΩςΫνϟ w 1SFTFOUBUJPOҎ֎ͷ੹຿ʹ͍ͭͯ w ֤ϨΠϠʔʹΞʔΩςΫνϟͰఏҊ͞Ε͍ͯΔ໊લΛ͚ͭΔ͜ͱ͸ຊ ࣭Ͱ͸ͳ͍
  30. 76 J04ΞϓϦઃܭύλʔϯೖ໳ w ࠷ߴ w ྺ࢙ͱݪయʹج͖ͮΞʔΩςΫνϟΛஸೡ ʹઆ໌ w "OEPJSEΤϯδχΞɺϑϩϯτΤϯδχΞʹ ΋͓͢͢Ί

    w J04ݻ༗ͷ࿩͸গͳ͍ w αʔόαʔυΤϯδχΞʹ΋͓͢͢Ί w αʔόαΠυͷ.7$ͷٞ࿦͸ɺϑϨʔ ϜϫʔΫͷ࣮૷ʹҾͬுΒΕ͕ͪ
  31. 77 .7$ͷࢹ఺ͰݟΔ3FBDU w Ͱ͸࣮ࡍʹ3FBDUͰ3FEVYΛ࠾༻͍ͯ͠Δίϯϙʔωϯτͷ࣮૷Λ .7$ 0CTFSWFSύλʔϯ ͷ؍఺ͰݟͯΈ·͢ .PEFM 7JFX $POUSPMMFS

    ϢʔβʔΫϦοΫ Πϕϯτ ΠϕϯτʹΛड͚ͯ .PEFMΛߋ৽ .PEFMͷมߋΛ Πϕϯτ௨஌ 7JFX͕.PEFMΛࢀরͯ͠࠶ඳը
  32. 84 ΞʔΩςΫνϟ·ͱΊ w 3FBDUʹ͓͍ͯ͸ɺ.7$ 1%4 ɺ$MFBO"SDIJUFDUVSF ϨΠϠʔؒͷґ ଘͷٯస ɺ3FEVY άϩʔόϧεςʔτͰͷ؅ཧɺίϯϙʔωϯτ΁

    ͷDPOOFDUɺͭ໨ͷঢ়ଶͱΠϕϯτ͔Β࣍ͷঢ়ଶΛఆٛ ͱ͍͏͜ͱ ͸ಉ࣌ʹཱ྆͢Δ͜ͱ͕ՄೳͰ͢ w ͦΕΒͷ໨తΛಉ࣌ʹୡ੒Ͱ͖ΔͷͳΒ͹ɺͦΕ͸͢΂ͯͷΞʔΩς Ϋνϟʹଇ͍ͬͯΔͱ͍͑·͢
  33. • ͸ ͡ Ί ʹ • એ ݴ త U

    I ͱ ͸ • એ ݴ త U I Λ ࠾ ༻ ͠ ͨ ઌ ͷ ՝ ୊ - ঢ় ଶ ؅ ཧ • R e a c t ͷ ਐ Խ • Ξ ʔ Ω ς Ϋ ν ϟ
  34. 87 ·ͱΊ w એݴత6*ɺঢ়ଶͷ؅ཧɺ3FBDUͷਐԽɺΞʔΩςΫνϟʹ͍͓ͭͯ࿩ ͠͠·ͨ͠ w એݴత6*Λར༻͢Δ͜ͱͰίʔυΛ؆ܿʹॻ͘͜ͱ͕Ͱ͖·͢ w એݴత6*Λ࠾༻ͯ͠΋ঢ়ଶ؅ཧͷݕ౼͸ඞਢͰ͋ΓɺϑϨʔϜϫʔΫ ͝ͱʹ࣮ࢪͰ͖Δखஈ͕ҟͳΓ·͢

    w 3FBDU͸ߋʹਐԽΛଓ͚͓ͯΓɺ7JFXͱঢ়ଶɺϩδοΫͷ෼཭ʹ੒ޭ ͠·ͨ͠ɻ w ଞͷϑϨʔϜϫʔΫ΋ଓ͍ͯཉ͍͠ػೳͰ͢ w એݴత6*Λ࠾༻ͯ͠΋ΞʔΩςΫνϟͷݕ౼΋ඞཁʹͳΓ·͢