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

SwiftUIと宣言的UI/SwiftUIAndDeclarativeUI

sonatard
December 09, 2019

 SwiftUIと宣言的UI/SwiftUIAndDeclarativeUI

sonatard

December 09, 2019
Tweet

More Decks by sonatard

Other Decks in Programming

Transcript

  1. 1
    4XJGU6*ͱએݴత6*
    !TPOBUBSE

    View Slide

  2. ͦͳଠ
    @sonatard
    D Technologies
    • ωοτϫʔΫɺLinuxαʔόΠϯϑϥ 4೥
    • RTOS, Socket, TCP/IP, DHCP, DNS࣮૷
    7೥
    • GAE/Go 2.5೥
    • TypeScript, React 5ϲ݄
    • iOS, Swift 2ϲ݄
    • ΞʔΩςΫνϟɺOOP
    • MVCܥ
    • Clean Architecture
    • ϦϑΝΫλϦϯά
    • OOP, SOLIDݪଇ
    • ৽͍͠ύϥμΠϜΛษڧͯ͠ɺγεςϜ΍
    ίʔυΛγϯϓϧʹ͢Δ͜ͱ͕޷͖
    • ࠷ۙͷϒʔϜ͸GraphQLͱRx(Swift)

    View Slide

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

    View Slide

  4. • ͸ ͡ Ί ʹ
    • એ ݴ త U I ͱ ͸

    View Slide

  5. 5
    88%$

    View Slide

  6. 6
    88%$

    View Slide

  7. 7
    ͸͡Ίʹ
    w 4XJGUʹ͋Θͤͨ৽͍͠(6*ϑϨʔϜϫʔΫ͕ొ
    ৔͚ͨͩ͠ʁ
    w /P
    w એݴత6*Λ࣮ݱ͢ΔͨΊͷϑϨʔϜϫʔΫ͕ొ
    ৔ͨ͠
    w :FT

    View Slide

  8. 8
    ͸͡Ίʹ
    w ͦͷͨΊ͜͏͍͏൑அ͸ޡΓ
    w ʮҎલʹൺ΂ͯYYYͷ"1*͕࢖͍ͮΒ͍͔Βෆ࠾༻ʯ
    w ͜Ε͸0,
    w ʮએݴత6*ʹՁ஋Λײ͡ͳ͍͔Βෆ࠾༻ʯ
    w ʮએݴత6*ʹՁ஋Λײ͡Δ͕ɺ·ͩ੒ख़ͯ͠ͳ͍ͨΊෆ࠾༻ʯ
    w େ͖ͳύϥμΠϜʹରٕͯ͠ज़બ୒Λ͢Δ΂͖Ͱɺࡉ͔͍࣮૷खஈ͸
    ࠣࡉͳ໰୊
    w վળ΋ظ଴Ͱ͖Δ

    View Slide

  9. 9
    એݴత6*ͷීٴ

    View Slide

  10. 10

    View Slide

  11. 11

    View Slide

  12. 12

    View Slide

  13. 13

    View Slide

  14. 14
    એݴత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 େ͖ͳస׵ظͰ͋ΓΞϓϦͷੈքͰେ͖ͳύϥμΠϜγϑτ͕ى͖Δ

    View Slide

  15. 15
    એݴత6*ͷීٴ
    w ͳͥએݴత6*͕͜Ε͚ͩ࠾༻͞Εͨͷ͔
    w 3FBDU͕֬ݻͨΔ஍ҐΛங͘͜ͱͰɺએݴత6*ͷ༗ޮੑΛ࣮ূͨ͠
    ͨΊ
    w 3FBDUΛ࢖͏ͷͰ͸ͳ͍
    w એݴత6*Λ࣮ݱ͢ΔͨΊʹ3FBDUΛ࢖͏ʂʂ

    View Slide

  16. 16
    એݴత6*ʜ
    w ͔͠͠3FBDU͕ϦϦʔε͞Ε͔ͯΒ௕͍ظཱ͕͕ؒͭɺ͋·Γએݴత
    6*ࣗମͷ࿩͸ࣖʹ͠ͳ͍
    w 3FBDUΛॻ͍͍ͯͯ΋ҙࣝͯ͜͠ͳ͔ͬͨਓ΋ଟ͍
    w ԿނͳΒએݴత6*Λҙࣝͤͣͱ΋ϑϨʔϜϫʔΫʹै͑͹ͦͷϝϦο
    τΛڗडͰ͖Δ
    w ͦͷͨΊඞͣݕ౼͕ඞཁͳ7.ͷεςʔτ؅ཧɺಛʹ3FEVYͷΞʔΩ
    ςΫνϟʹ͍ͭͯٞ࿦͕த৺Ͱ͋ͬͨΑ͏ʹײ͡Δ
    w ͔͠͠ύϥμΠϜΛཧղͤͣʹɺϑϨʔϜϫʔΫΛར༻͢Δ͚ͩͰ͸
    ద੾ͳ࢖͍ํ͕Ͱ͖ͳ͍ɻ
    w ͜Ε͚ͩେ͖ͳύϥμΠϜΛཧղ͠ͳ͍͜ͱ͸ͱͯ΋໪ମແ͍

    View Slide

  17. 17
    એݴత6*ʜ
    w ͦ͜ͰվΊͯओྲྀʹͳ͍ͬͯ͘͜ͱ͕༧૝͞ΕΔએݴత6*ͱ͸Կ͔Λ
    ߟ͑ͯɺࠓޙͷ(6*։ൃ͕ͲͷΑ͏ʹมΘΔ͔Λݕ౼͍͖͍ͯͨ͠ͱ
    ࢥ͍·͢

    View Slide

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

    View Slide

  19. 19
    ໋ྩతͱએݴత
    w ໋ྩత
    w )PX
    w ԿΛ͢Δ͔Λهड़͢Δ
    w ࠷ऴతͳ݁Ռ͕લճͷ࣮ߦ݁Ռʹґଘ͢Δ
    w એݴత
    w 8IBU
    w Ͳ͏͍͏ঢ়ଶʹͳ͍ͬͯΔ͔Λهड़͢Δ
    w ࠷ऴతͳ݁Ռ͕લճͷ࣮ߦ݁Ռʹґଘ͠ͳ͍

    View Slide

  20. 20
    એݴత6*ͷ۩ମྫ
    w )5.- $44ɺ+BWBTDSJQUͳ͠

    w )5.-͸ԿճදࣔΛͯ͠΋ɺ݁Ռ͸มΘΒͳ͍ɻ
    w ίʔυ͕ͦͷ··6*Λදݱ͍ͯͯ͠Πϝʔδ͠΍͍͢ɻ

    View Slide

  21. 21
    એݴత6*ͷ۩ମྫ
    w $6* ಈతͳύϥϝʔλ͕ଘࡏ͢Δ৔߹

    w $6*ͷදࣔ͸ɺಈతͳύϥϝʔλҎ֎͸มΘΒͳ͍ɻ
    w ίʔυ͕ͦͷ··6*Λදݱ͍ͯͯ͠Πϝʔδ͠΍͍͢ɻ
    DVJ͜Μʹͪ͸

    ͜Μʹͪ͸

    DVJIFMMP

    IFMMP

    View Slide

  22. 22
    એݴత͸ී௨ʜ
    w ͲͪΒ΋ͲͷΑ͏ͳ6*Λදࣔ͢Δ͔Λهड़͢Δ
    w Ҏલͷඳըͨ͠ঢ়ଶʹґଘ͠ͳ͍
    w )5.-͔ΒΘ͔Δ͜ͱ
    w ಈతͳ஋͕ͳ͚Ε͹એݴతʹදݱ͢Δ͜ͱ͸೉͘͠ͳ͍
    w $6*͔ΒΘ͔Δ͜ͱ
    w ಈతͳ஋͕͋ͬͨͱͯ͠΋ɺຖճ͢΂ͯΛඳը͠௚͢ͳΒ೉͘͠
    ͳ͍

    View Slide

  23. 23
    J04ͷ(6*։ൃ͸એݴత
    w ઌ΄Ͳ͸ʮ੩తͳ(6*ʯͱʮಈతͳ$6*ʯΛ঺հͨ͠
    w ʮಈతͳ(6*ʯͰ͋ΔJ04ΞϓϦ։ൃ͸Ͳ͏͔ʁ

    View Slide

  24. 24
    αϯϓϧΞϓϦ঺հ
    w CVUUPOΛΫϦοΫ͢Δͱ)FMMP͕૿͍͑ͯ͘ը໘

    View Slide

  25. 25
    4UPSZCPBSE͸એݴత͔ʁ
    w ॳظը໘
    w (6*Ͱ૊Έཱͯͨͱͯ͠΋ɺ࠷ऴతͳΞ΢τϓοτ͸4UPSZCPBSE
    ͷ9.-ϑΝΠϧͱͯ͠એݴతʹग़ྗ͞ΕΔ
    ͲͷΑ͏ͳը໘͕දࣔ͞Ε
    Δ͔Λએݴ͍ͯ͠Δ
    4UPSZCPBSE্ͷϓϨϏϡʔͰ΋
    ॳظը໘͚ͩ͸ཧղͰ͖Δ
    ॳظը໘͸એݴ͞Ε͍ͯΔ

    View Slide

  26. 26
    4UPSZCPBSE͸એݴత͔ʁ
    w Πϕϯτൃੜޙͷը໘
    ࣍ͷ7JFXͷঢ়ଶ͕
    લͷ7JFXͷঢ়ଶʹґଘ
    ΠϕϯτʹΑͬͯ
    7JFXͷঢ়ଶ͕มԽ
    ͜͜ʹ஋͕ೖΔ͜ͱ͸
    7JFX͚ͩΛΈͯ΋Θ͔Βͳ͍

    View Slide

  27. 27
    4UPSZCPBSE͸એݴత͔ʁ
    w Πϕϯτൃੜޙͷը໘
    7JFXͷ࠷ऴతͳঢ়ଶΛ૝૾͢Δ
    ͨΊʹ͸
    ࣌ؒ࣠ͱԿ͕ى͖ͨ
    Λཧղ͠ͳ͚Ε͹ͳΒͳ͍
    ໋ྩతͳίʔυͰ͋Δ

    View Slide

  28. 28
    ಈతͳ(6*ʹ͓͚Δ໋ྩతͳίʔυͷ೉͠͞
    w CVUUPOΛΫϦοΫ͢Δͱ)FMMP͕૿͍͑ͯ͘ը໘
    EJW
    EJW
    EJW
    )FMMP
    EJW
    ΫϦοΫ
    Πϕϯτ
    EJW
    )FMMP)FMMP
    EJW
    Πϕϯτ͕ൃՐ͢Δͱ
    ͜͏͍͏ݟͨ໨ʹͳ͍ͬͯ͘ͷ͔
    ࣌ؒ࣠
    ΫϦοΫ
    Πϕϯτ

    View Slide

  29. 29
    ಈతͳ(6*Ͱએݴత6*Λ࣮ݱ͢ΔͨΊʹ͸
    w 7JFXΛߋ৽͢ΔͷͰ͸ͳ
    ͘ɺঢ়ଶͷมԽʹԠͯ͡
    7JFXͷ͢΂ͯΛ࠶ඳը͢Δ
    Α͏ͳίʔυΛॻ͚Ε͹Α
    ͍
    IFMMP͕දࣔ͞ΕΔ͜ͱΛ
    એݴ͢Δ
    7JFX.PEFM͕
    มΘΔͱ͢΂ͯ࠶ඳը 7JFXͷঢ়ଶΛ
    7JFX.PEFMʹ෼཭

    View Slide

  30. 30
    ಈతͳ(6*Ͱͷએݴత6*Λ࣮ݱͰ͖Δͱ
    w ࣌ؒ࣠΍Կ͕ى͖͔ͨΛؾ
    ʹͤͣɺ7JFXͷ࠷ऴతͳঢ়
    ଶ͕૝૾Ͱ͖ΔΑ͏ʹͳΔ
    w લճͷ7JFXͷঢ়ଶ͸ؔ܎ͳ
    ͘ɺIFMMPͱ͍͏෼཭ͨ͠
    7JFX.PEFMʹجͮ͘
    Կ͕ى͖Δ͔ΛӅͯ͠ΈΔ
    Կ͕ى͖Δ͔Λݟͳͯ͘΋࠷ऴతͳ7JFXͷঢ়ଶ͕Θ͔Δ
    IFMMP5FYUʹج͍ͮͨ5FYU͕දࣔ͞ΕΔ

    View Slide

  31. 31
    ಈతͳ(6*Ͱͷએݴత6*Λ࣮ݱ͢ΔͨΊʹ͸
    w աڈͷ՝୊
    w (6*ΞϓϦͰ΋$6*ͱಉ͡Α͏ʹঢ়ଶߋ৽͝ͱʹը໘ભҠͯ͢͠΂
    ͯΛ࠶ඳը͠௚ͤ͹ίʔυ্͸એݴతʹͳΔ͕ʜ
    w ຖճ͢΂ͯΛ࠶ඳը͢Δ͜ͱ͕ίʔυͱͯ͠ݱ࣮తͰ͸ͳ͍
    w ঢ়ଶʹԠͯࣗ͡ಈతʹ࠶ඳը͍ͨ͠
    w ຖճը໘͢΂ͯΛ࠶ඳը͢Δͱ஗͍
    w 4XJGU6*ͷొ৔
    w એݴతʹ7JFXΛදݱ
    w ঢ়ଶ͕ߋ৽͞ΕΔͱࣗಈతʹ7JFX͕࠶ඳը
    w ঢ়ଶ͕มԽʹӨڹΛड͚Δ෦෼͚ͩ࠶ඳը

    View Slide

  32. 32
    ૒ํ޲όΠϯσΟϯάͱಉ͡ʜ
    w ઌ΄Ͳͷྫ͸7JFX.PEFM͚ͩ
    มԽ͍ͯͨ͠
    ม਺͕มΘΔ͚ͩͳΒ
    ૒ํ޲όΠϯσΟϯάͱಉ͡

    View Slide

  33. 33
    7JFX.PEFMʹԠͯ͡7JFX͕มΘΔྫΛ঺հ
    w )FMMP͕ͳ͍৔߹͸ɺѫࡰͳ͠
    w BEE͢Δͱɺ)FMMPʹஔ͖׵ΘΔɻ
    w BEEͰ)FMMP͕ͭ૿͑Δɻ
    w ӈͷਤ͸ߋʹճBEEPΛԡͨ͠
    w SFNPWFͰ)FMMP͕ͭফ͑Δɻ
    w ӈͷਤ͸ճSFNPWFΛԡͨ͠
    w )FMMP͕ͳ͍৔߹͸ɺѫࡰͳ͠ɻ
    w ӈͷਤ͸ճSFNPWFΛԡͨ͠
    IFMMPͷ਺͚ͩ
    6*-BCFM͕௥Ճ͞ΕΔ

    View Slide

  34. 34
    ۃ୺ͳ໋ྩతͳίʔυͰ࣮ݱ͢Δͱ ٙࣅίʔυͰ͢

    ࠷ॳ͸ѫࡰͳ͠
    ཁૉ͕ͭͰѫࡰͳ͠ͳΒ
    )FMMPʹஔ͖׵͑Δ
    ͦΕҎ֎͸)FMMPΛ௥Ճ
    ཁૉ͕ͭҎ্ͳΒ࡟আ
    ཁૉ͕ʹͳͬͨΒѫࡰͳ͠Λ௥Ճ
    લճͷ7JFXͷঢ়ଶʹ
    ج͍ͮͨίʔυͰෳࡶ
    w ͜ͷΑ͏ͳίʔυ͸Ұൠతʹॻ͔ͳ͍ͱࢥ͍·͢

    View Slide

  35. 35
    6*5BCMF7JFX͸એݴత
    ࠷ॳ͸ѫࡰͳ͠
    લͷϖʔδͷΑ͏ͳίʔυΛॻ
    ͔ͳ͍ͷ͸ՄมϦετʹ͍ͭͯ
    ͸ɺ6*,JUͰ΋5BCMF7JFXʹΑ
    Γએݴతʹॻ͚ΔͨΊ
    7JFX.PEFMΛ෼཭
    ঢ়ଶ͕มԽͨ͠Β7JFXΛ࠶ඳը
    IFMMP-JTU͕ͭҎ্ͳΒ5BCMF7JFXͰදࣔ
    IFMMP-JTU͕ଘࡏͨ͠Β
    ѫࡰͳ͠͸ඇදࣔ
    6*5BCMF7JFX͸-JTUʹؔͯ͠͸
    એݴతʹهड़Ͱ͖Δ

    View Slide

  36. 36
    4XJGU6*ʹΑΔએݴతͳίʔυͰ࣮ݱ͢Δͱ
    IFMMP-JTU͕θϩͳΒѫࡰͳ͠
    IFMMP-JTUͷ਺͚ͩϧʔϓͯ͠දࣔ
    4UBUFͷม਺ͷঢ়ଶ͕มΘΔͱ
    ࣗಈతʹ࠶ඳը͞ΕΔ
    7JFXΛݟ͚ͨͩͰ࠷ऴతͳঢ়ଶ͕૝૾Ͱ͖Δ
    7JFXͷঢ়ଶʹج໋͍ͮͨྩతͳίʔυ͕ͳ͍
    6*5BCMF7JFXΑΓ΋γϯϓϧͳίʔυ
    -JTUʹݶఆ͞Εͣʹ
    7JFX.PEFMʹج͖ͮJG΍GPSͰ৭ͳͲͷΛએݴ

    View Slide

  37. 37
    6*5BCMF7JFX͕͋Ε͹4XJGU6*͸ෆཁͳͷ͔ʁ
    w 6*5BCMF7JFX͕એݴతʹهड़Ͱ͖Δέʔε͸ݶఆత
    w 6*,JUͰ͸7JFX.PEFMʹج͍ͮͯςΩετͷ৭Λมߋ͢Δͱ͍͏ॲ
    ཧΛએݴతʹ͸ॻ͚ͳ͍
    w 4XJGU6*͕ରԠ͢Δએݴతͳ࣮૷͸Ϧετʹݶఆ͞Εͳ͍
    w 4XJGU6*͸ίϯϙʔωϯτͷ࣮૷͕༰қͰ͋Δ
    w 7JFX$POUSPMMFSͱൺֱͯ͠ɺ7JFXͱ7JFX.PEFMͷૄʹͳΔ
    w 7JFX ίϯϙʔωϯτ
    ͷ࠶ར༻ੑ͕ͱͯ΋ߴ͍
    w 6*,JUͱൺֱͯ͠ɺίϯϙʔωϯτԽ͢ΔͨΊʹಛघͳ࣮૷͕ෆཁ
    w ී௨ʹ࣮૷͍ͯ͘͠ͱίϯϙʔωϯτʹͳΔ

    View Slide

  38. 38
    એݴత6*·ͱΊ
    w ࣌ؒ࣠ͱԿ͕ى͖͔ͨΛҙࣝͤͣએݴతʹهड़Ͱ͖Δ
    w લճͷ7JFXͷঢ়ଶʹґଘͤͣʹɺ࠷ऴతʹඳը͞ΕΔ7JFXΛએݴత
    ʹهड़Ͱ͖Δ
    w 4XJGU6*͸͢΂ͯΛ࠶ඳը͢ΔΑ͏ͳίʔυΛॻ͍ͯ΋ύϑΥʔϚϯ
    εͷ௿ԼΛ๷͛Δ
    w 4XJGU6*ͱ͸
    w
    ❌4XJGUʹରԠͨ͠৽͍͠6*ϑϨʔϜϫʔΫ
    w
    ⭕એݴత6*Λ࣮ݱ͢ΔͨΊͷϑϨʔϜϫʔΫ

    View Slide

  39. 39
    ௥هίʔυͰ͢΂ͯॻ͘৔߹ͷॳظը໘͸એݴత͔ʁ
    w ॳظը໘(6*Λ૊ΈཱͯΔίʔυΛهड़͍ͯ͘͠
    ͲͷΑ͏ͳը໘͕දࣔ͞ΕΔ͔ΛίʔυͰ૊
    ΈཱͯΔ৔߹͸ɺ໋ྩతͳίʔυͱͳΔ
    Πϕϯτൃੜ࣌ʹݶΒͣɺॳظը໘ʹ͓͍ͯ΋
    ໋ྩతͳίʔυͩͱ࣌ؒ࣠Λ࣋ͭͱ͍͏͜ͱ
    ͸ಉ༷
    7JFX͕ঢ়ଶΛ͍࣋ͬͯΔͨΊɺॳظԽॲཧ͕
    ऴΘΔ·Ͱ࣌ؒ࣠ʹैͬͯ7JFX͕มԽ͍ͯ͠
    ͘ɺ໋ྩతͳίʔυͰ͸࣌ؒ࣠ͷऴ୺ʹདྷͳ
    ͍ͱը໘͕֬ఆ͠ͳ͍

    View Slide