iOSDC2018_ohayou_kenchan.pdf

Transcript

1. ϑϩϯτΤϯυ͔ΒݟͨiOS։ൃ 2018/08/31 גࣜձࣾϚΠϕετ @ohayou_kenchan

2. ߴ໺ɹݐଠ @ohayou_kenchan HTML/CSS/JavaScriptͱ͸10೥͘Β͍ͳ͔Α͠ɻAS3ͱ͸ੲ஥͕ྑ ͔ͬͨɻ Swift3͔ΒiOSͱ஥ྑͨ͘͘͠ͳΓiOS։ൃΛ൒೥͘Β͍࣮຿Ͱܦ ݧͨ͠ͷϑϩϯτΤϯυʹ໭ͬͨɻ લ৬:Ϧϒηϯε ex స৬ձٞ,࣏ྍnote,స৬φϏiOS ݱ৬:גࣜձࣾϚΠϕετͷϑϩϯτΤϯυ

3. Copyright © 2017 mybest All rights reserved. CONTENTS mybestͷίϯςϯπΛ঺հ͠·͢ ͪΐͬͱձࣾઆ໌

   ͍ͤͯͩ͘͞͞
4. None

5. Copyright © 2018 mybest All rights reserved. mybestͷಛ௃ ʮ••ʢϞϊͷ໊લʣ×͓͢͢Ίʯʹڧ͍ͨΊɺߪങҙཉͷߴ͍Ϣʔβʔ͕ଟ͘Ӿཡ͍ͯ͠·͢ɻ
 ֤঎඼δϟϯϧͰɺݕࡧॱҐ্͕ҐͷهࣄΛଟ਺อ༗͍ͯ͠·͢ɻ

   ʲݕࡧ݁Ռ̍ҐʳϔΞΞΠϩϯ×͓͢͢Ί ओͳ̍Ґͷݕࡧ݁Ռ ϔΞΞΠϩϯ×͓͢͢Ί ϨτϧτΧϨʔ×͓͢͢Ί εϚϗεϐʔΧʔ×͓͢͢Ί νʔΫ×͓͢͢Ί Ϗδωεγϡʔζ×͓͢͢Ί ҥྨενʔϚʔ×͓͢͢Ί ໺ࡊδϡʔε×͓͢͢Ί αʔΩϡϨʔλʔ×͓͢͢Ί ੺Ϧοϓ×͓͢͢Ί ϩʔυόΠΫ×͓͢͢Ί …etc

6. Copyright © 2018 mybest All rights reserved. mybestͷي੻ 6 2016೥2݄ϩʔϯνޙɺϢʔβʔ਺͸ॱௐʹ੒௕தͰ͢ɻ݄ؒ໿1,300ສϢʔβʔಥഁ͍ͯ͠·͢ɻ

   ݄ؒൢച঎඼਺໿308,000ݸ ݄ؒൢച঎඼ֹۚ໿27.3ԯԁ ग़యɿGoogleAnalyticsʢ2018೥4݄ݱࡏʣ ݄ؒ࠷େϢʔβʔ਺ ໿1,300ສਓಥഁʂ

7. ͜ͷτʔΫͷΰʔϧ iOSΤϯδχΞʹฉ͍ͯ΄͍͜͠ͱ

8. ྆ํ΍Εͦ͏Ϛϯ ͱ͍͏બ୒ࢶ

9. ΋͘͡ ✘ ϥΠϑαΠΫϧ͕ࣅ͍ͯΔ ✘ async/await͕ࣅ͍ͯΔ ✘ Redux͕ࣅ͍ͯΔ ✘ CSSͱAutoLayout͕ࣅ͍ͯΔ ✘

   TypeScriptͱSwift͕ࣅ͍ͯΔ

10. ϥΠϑαΠΫϧ͕ࣅ͍ͯΔ UIViewControllerͱVueͷίϯϙʔωϯτ͸ ஥ྑ͠ʹͳΕΔ

11. UIViewController ͷϥΠϑαΠΫϧ ͲΜͳͷ͕͋Γ·͔͢ʁ

12. ( Vue | React )ʹ΋ ͓Μͳ͡ͷ͋Γ·͢ɻ

13. ϥΠϑαΠΫϧͷൺֱද UIViewController React Vue viewͷಡΈࠐΈ loadView componentWillMount beforeCreated viewͷಡΈࠐΈޙ viewDidLoad

    componentDidMount created view͕දࣔ͞ΕΔ௚લ viewWillAppear shouldComponentUpd ate beforeMount view͕දࣔ͞Εͨ௚ޙ viewDidAppear - mounted ը໘͔Βফ͑Δલ viewWillDisAppea r compomentWillUnmo unt beforeDestroy ը໘͔Βফ͑ͨޙ viewDidDisappear - destroyed ϨΠΞ΢τ։࢝ viewWillLayoutSu bViews componentWillUpdate beforeUpdate ϨΠΞ΢τऴྃ viewDidLayoutSu bViews componentDidUpdate updated

14. ϥΠϑαΠΫϧͷൺֱද UIViewController React Vue viewͷಡΈࠐΈ loadView componentWillMount beforeCreated viewͷಡΈࠐΈޙ viewDidLoad

    componentDidMount created view͕දࣔ͞ΕΔ௚લ viewWillAppear shouldComponentUpd ate beforeMount view͕දࣔ͞Εͨ௚ޙ viewDidAppear - mounted ը໘͔Βফ͑Δલ viewWillDisAppea r compomentWillUnmo unt beforeDestroy ը໘͔Βফ͑ͨޙ viewDidDisappear - destroyed ϨΠΞ΢τ։࢝ viewWillLayoutSu bViews componentWillUpdate beforeUpdate ϨΠΞ΢τऴྃ viewDidLayoutSu bViews componentDidUpdate updated ΄΅ ׬શʹҰக

15. ϥΠϑαΠΫϧͷൺֱද UIViewController React Vue viewͷಡΈࠐΈ loadView componentWillMount beforeCreated viewͷಡΈࠐΈޙ viewDidLoad

    componentDidMount created view͕දࣔ͞ΕΔ௚લ viewWillAppear shouldComponentUpd ate beforeMount view͕දࣔ͞Εͨ௚ޙ viewDidAppear - mounted ը໘͔Βফ͑Δલ viewWillDisAppea r compomentWillUnmo unt beforeDestroy ը໘͔Βফ͑ͨޙ viewDidDisappear - destroyed ϨΠΞ΢τ։࢝ viewWillLayoutSu bViews componentWillUpdate beforeUpdate ϨΠΞ΢τऴྃ viewDidLayoutSu bViews componentDidUpdate updated

16. ϥΠϑ αΠΫϧ͕ ࣅ͍ͯΔͱ͏Ε͍͜͠ͱ

17. ϥΠϑ αΠΫϧ͕ ࣅ͍ͯΔͱ͏Ε͍͜͠ͱ

18. ϥΠϑαΠΫϧ ͷऔѻʹ͍ͭͯ

19. None

20. UIViewController

21. UIView

22. ࣙ৬͍ͨ͠

23. ྃղͨ͠

24. ྃղͨ͠

25. ReactComponent

26. ReactComponent

27. ࣙ৬͍ͨ͠

28. ྃղͨ͠

29. ྃղͨ͠

30. ྃղͨ͠

31. ྃղͨ͠

32. None

33. ͜ͷষͷ·ͱΊ ✘ Vue΋React΋UIViewController΋ϥΠ ϑαΠΫϧ͕ࣅ͍ͯΔ ✘ ϥΠϑαΠΫϧͷϝιουϑοΫͨ͠ ͱ͖ʹॲཧΛΠϝʔδ͠΍͍͢ ✘ ϥΠϑαΠΫϧ͸͕ͤ͋͘ΔͷͰ஫ҙ

34. $ npm init react-app [app-name]

35. async/await͕ࣅ͍ͯΔ

36. https://gist.github.com/lattner/429b9070918248274f25b714dcfc7619

37. None
38. None

39. ΄΅ ׬શʹҰக

40. JavaScriptͷඇಉظॲཧ

41. Generator ! next() IteratorΦϒδΣΫ τ next()ΛݺͿ͜ͱͰ ࣍ͷyield·Ͱॲཧ Λ͢Δ͜ͱ͕ग़དྷΔ ! yeild

    ॲཧΛதஅͰ͖ɺ ผͷॲཧ͔Β෮ؼ ͨ͠ΓͰ͖Δ ! done() ฦΓ஋͕return͞ Εͨͱ͖δΣωϨ ʔλ͕done͞ΕΔ function*એݴ GeneratorΦϒδΣΫτΛ࣋ͭGeneratorؔ਺ʹͳΔ

42. Generatorͷྫ

43. Promise ! Pending ඇಉظૢ࡞͕׬ྃ ͍ͯ͠ͳ͍ ! fulfilled ૢ࡞͕׬ྃ͠ɺ Promise͕஋Λ1ͭ ࣋ͭ

    resolveΛฦ͢ ! Rejected ૢ࡞͕Τϥʔ·ͨ ͸ࣦഊͰऴྃͨ͠ rejectedΛฦ͢ কདྷ࢖͑ΔΑ͏ʹͳΔͳʹ͔ʢ஋ʣ then, catch ͰνΣΠϯͰ͖ΔಛੑΛ΋ͭʢthenable)

44. Promiseͷྫ

45. async/await async ඇಉظؔ਺Λఆٛ͢Δؔ਺એݴ ؔ਺ͷલʹasyncΛ͚ͭΔ͜ͱͰඇ ಉظؔ਺Λఆٛ͢Δ asyncؔ਺͸ݺͼग़͞ΕΔͱ PromiseΛฦ͢ asyncؔ਺͕஋Λreturnͨ͠৔߹ Promise͸໭Γ஋Λresolve͢Δ asyncؔ਺͕ྫ֎Λthrowͨ͠৔߹

    ͦͷ஋Λreject͢Δ await async function಺ͰPromiseͷ݁Ռ ʢresolveɺrejectʣ͕ฦ͞ΕΔ·Ͱ ଴ػ͢Δ awaitΛࢦఆ͢Δͱɺͦͷؔ਺ͷ Promiseͷ݁Ռ͕ฦ͞ΕΔ·Ͱ଴ػ ͢Δɻ

46. async/awaitͷྫ

47. Async/Await for Swift ͱCoroutineϞσϧ

48. https://speakerdeck.com/sys1yagi/kotlin-korutinwo-li-jie-siyou

49. ͜ͷষͷ·ͱΊ ✘ async/await͸ࣅ͍ͯΔ ✘ JavaScript͸GeneratorɺPromiseɺ async/awaitͱ͍ΖΜͳॻ͖ํͰඇಉظ ॲཧ͕ॻ͚Δ ✘ Async/Await for

    Swift ͸Swiftʹίϧʔ νϯΛ΋ͨΒ͢΋ͷ

50. Redux͕ࣅ͍ͯΔ

51. None

52. https://bumbu.me/simple-redux/

53. https://bumbu.me/simple-redux/ ΞϓϦͷ΋ͭ ঢ়ଶ͸།Ұͭ

54. https://bumbu.me/simple-redux/ ActionʹΑΓঢ়ଶΛͲ͏มߋ͞ ͤΔ͔͸Reducer͕͓͜ͳ͏

55. https://bumbu.me/simple-redux/ ঢ়ଶΛมߋͤ͞Δʹ͸ ඞͣactionΛൃߦͤ͞ͳ͚Ε͹ͳΒͳ͍

56. https://bumbu.me/simple-redux/

57. https://bumbu.me/simple-redux/

58. https://bumbu.me/simple-redux/

59. https://bumbu.me/simple-redux/

60. https://bumbu.me/simple-redux/

61. https://bumbu.me/simple-redux/

62. https://bumbu.me/simple-redux/

63. https://bumbu.me/simple-redux/ Ҏ্

64. ReduxͷΑ͞

65. Reduxఫୀ

66. ࣄۀεέʔϧͱRedux

67. ্ཱͪ͛౰ॳͷίϯςΩετ ✘ Ϣʔβʔ͕౤ථग़དྷΔػೳ͕΄͍͠ ✘ Ұཡͱৄࡉը໘͕ཉ͍͠ ✘ ౤ථ݁ՌʹίϝϯτͰ͖ΔΑ͏ʹͨ͠ ͍ʢΘ͍Θ͍ͯ͠Δײ͕͡ཉ͍͠ʣ ✘ ΠέͯΔΑ͏ʹ݁ՌΛՄࢹԽ͍ͨ͠

    ✘ ͳΜͱͳ͘ྑͦ͞͏ͳਓʹ͸࣭໰Λ࡞ ੒͢Δ͜ͱΛڐՄ͍ͨ͠

68. ্ཱͪ͛౰ॳͷίϯςΩετ ✘ Ϣʔβʔ͕౤ථग़དྷΔػೳ͕΄͍͠ ✘ Ұཡͱৄࡉը໘͕ཉ͍͠ ✘ ౤ථ݁ՌʹίϝϯτͰ͖ΔΑ͏ʹͨ͠ ͍ʢΘ͍Θ͍ͯ͠Δײ͕͡ཉ͍͠ʣ ✘ ΠέͯΔΑ͏ʹ݁ՌΛՄࢹԽ͍ͨ͠

    ✘ ͳΜͱͳ͘ྑͦ͞͏ͳਓʹ͸࣭໰Λ࡞ ੒͢Δ͜ͱΛڐՄ͍ͨ͠

69. ্ཱͪ͛౰ॳͷίϯςΩετ ✘ Ϣʔβʔ͕౤ථग़དྷΔػೳ͕΄͍͠ ✘ Ұཡͱৄࡉը໘͕ཉ͍͠ ✘ ౤ථ݁ՌʹίϝϯτͰ͖ΔΑ͏ʹͨ͠ ͍ʢΘ͍Θ͍ͯ͠Δײ͕͡ཉ͍͠ʣ ✘ ΠέͯΔΑ͏ʹ݁ՌΛՄࢹԽ͍ͨ͠

    ✘ ͳΜͱͳ͘ྑͦ͞͏ͳਓʹ͸࣭໰Λ࡞ ੒͢Δ͜ͱΛڐՄ͍ͨ͠

70. ্ཱͪ͛౰ॳͷίϯςΩετ ✘ Ϣʔβʔ͕౤ථग़དྷΔػೳ͕΄͍͠ ✘ Ұཡͱৄࡉը໘͕ཉ͍͠ ✘ ౤ථ݁ՌʹίϝϯτͰ͖ΔΑ͏ʹͨ͠ ͍ʢΘ͍Θ͍ͯ͠Δײ͕͡ཉ͍͠ʣ ✘ ΠέͯΔΑ͏ʹ݁ՌΛՄࢹԽ͍ͨ͠

    ✘ ͳΜͱͳ͘ྑͦ͞͏ͳਓʹ͸࣭໰Λ࡞ ੒͢Δ͜ͱΛڐՄ͍ͨ͠

71. ্ཱͪ͛౰ॳͷίϯςΩετ ✘ Ϣʔβʔ͕౤ථग़དྷΔػೳ͕΄͍͠ ✘ Ұཡͱৄࡉը໘͕ཉ͍͠ ✘ ౤ථ݁ՌʹίϝϯτͰ͖ΔΑ͏ʹͨ͠ ͍ʢΘ͍Θ͍ͯ͠Δײ͕͡ཉ͍͠ʣ ✘ ΠέͯΔΑ͏ʹ݁ՌΛՄࢹԽ͍ͨ͠

    ✘ ͳΜͱͳ͘ྑͦ͞͏ͳਓʹ͸࣭໰Λ࡞ ੒͢Δ͜ͱΛڐՄ͍ͨ͠

72. ͪΐͬͱԿݴͬͯΔ͔Θ͔Βͳ͍ Motivation

73. None

74. ΍ͬͺΓҰཡ͍ΒͶ

75. None
76. None
77. None
78. None
79. None

80. اըऀ͕;Θͬͱͨ͠ஈ֊ͩͱ ͦͷਓͷҙਤͰઃܭ΋ࠨӈ͞ΕΔ

81. Α͍ઃܭ ͱ͸ʁ

82. ReSwift΍ΊΔ͜ͱʹͳͬͯ΋ Ҿ͖ଓ͖εέʔϥϏϦςΟͷ͋Δઃ ܭΛʂ

83. ͜ͷষͷ·ͱΊ ✘ ReduxΛ֮͑ΔͳΒ͋ͷgifΛͣͬͱΈ Α͏ ✘ ReSwift͸ฏқʹReduxΛ࣮ݱग़དྷΔ ✘ ඇಉظॲཧ͸MiddleWareʹಀ͕ͦ͏ ✘ ఫୀͰ͖Δมߋʹڧ͍ઃܭΛʂ

84. TypeScript͕ࣅ͍ͯΔ

85. Compile Error [] + [] = “”

86. let

87. const

88. TypeAnnotation

89. interface

90. type

91. any

92. Array of type

93. ͜ͷষͷ·ͱΊ ✘ TypeScript΄΅Swift

94. CSS͕ࣅ͍ͯΔ

95. CSS ≒ AutoLayout

96. CSSʹର͢Δҙࣝௐࠪɹʢࣗ෼ௐ΂ʣ

97. ͳͥCSSͱ͍͏֓೦͕Զͨ ͪͷ৺Λ਒Θͤͳ͍ͷ͔

98. ͻͱͭΊ

99. ༏͗ͯ͢͠ٯʹҤ͑Δ

100. None

101. CSS͸੍໿ໃ६Λڐ༰͢Δ ݁Ռɺ่ΕΔ

102. ;ͨͭΊ

103. ΩϥΩϥωʔϛϯά

104. None

105. CSSઃܭͷ؊͸໋໊نଇ ͕ͩɺ໋໊نଇΛΤϥʔΛग़ͯ͘͠Ε͸ ͠ͳ͍

106. CSS-Grid-modules

107. None
108. None

109. Styled-components

110. None
111. None

112. Ϋϥε໊͸΋͏ؾʹ͠ͳ ͓̺ͯ͘

113. https://github.com/danilowoz/react-atomic-design

114. https://polaris.shopify.com/

115. https://polaris.shopify.com/

116. https://polaris.shopify.com/

117. https://polaris.shopify.com/

118. CSS ≒ AutoLayout

119. Component binded CSS ≒ AutoLayout

120. ͜ͷষͷ·ͱΊ ✘ CSSͰϨΠΞ΢τ่Εͦ͏ͳͱ͖͸ CSS-GridLayout ✘ ໋໊نଇߟ͑Δͷ͕ਏ͍ͱ͖͸ StyledComponentΛ࢖͓͏ ✘ AutoLayout͸੍໿่͕ΕΔͱ஌Βͤͯ ͘ΕΔʢCSS͸ΏΔ;Θ

121. શମͷ·ͱΊ ✘ ϥΠϑαΠΫϧ͕ࣅͯΔ ✘ async/await,Promise,Generator ✘ Redux ͸͋ͷgifಈըΛ಄ʹ͍ΕΑ͏ ✘ TypeAnotation

     ✘ CSS-grid-modulesͱstyled-components

122. શମͷ·ͱΊ ✘ ϥΠϑαΠΫϧ͕ࣅ͍ͯͨ ✘ async/await͕ࣅ͍ͯͨ ✘ Redux͕ࣅ͍ͯͨ ✘ CSSͱAutoLayout͕ࣅ͍ͯͨ ✘

     TypeScriptͱSwift͕ࣅ͍ͯͨ

123. શମͷ·ͱΊ ✘ ϥΠϑαΠΫϧ͕ࣅ͍ͯͨ ✘ async/await͕ࣅ͍ͯͨ ✘ Redux͕ࣅ͍ͯͨ ✘ CSSͱAutoLayout͕ࣅ͍ͯͨ ✘

     TypeScriptͱSwift͕ࣅ͍ͯͨ

124. શମͷ·ͱΊ ✘ ϥΠϑαΠΫϧ͕ࣅ͍ͯͨ ✘ async/await͕ࣅ͍ͯͨ ✘ Redux͕ࣅ͍ͯͨ ✘ CSSͱAutoLayout͕ࣅ͍ͯͨ ✘

     TypeScriptͱSwift͕ࣅ͍ͯͨ

125. શମͷ·ͱΊ ✘ ϥΠϑαΠΫϧ͕ࣅ͍ͯͨ ✘ async/await͕ࣅ͍ͯͨ ✘ Redux͕ࣅ͍ͯͨ ✘ CSSͱAutoLayout͕ࣅ͍ͯͨ ✘

     TypeScriptͱSwift͕ࣅ͍ͯͨ

126. ༨ஊͰ͢

127. ༨ஊͰ͢

128. None

129. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ Any questions? ✘ @ohayou_kenchan ✘ kenta.takano@my-best.com