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ͷίϯςϯπΛ঺հ͠·͢ ͪΐͬͱձࣾઆ໌ ͍ͤͯͩ͘͞͞
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. ϥΠϑαΠΫϧ ͷऔѻʹ͍ͭͯ
20. UIViewController
21. UIView
22. ࣙ৬͍ͨ͠
23. ྃղͨ͠
24. ྃղͨ͠
25. ReactComponent
26. ReactComponent
27. ࣙ৬͍ͨ͠
28. ྃղͨ͠
29. ྃղͨ͠
30. ྃղͨ͠
31. ྃղͨ͠
33. ͜ͷষͷ·ͱΊ ✘ Vue΋React΋UIViewController΋ϥΠ ϑαΠΫϧ͕ࣅ͍ͯΔ ✘ ϥΠϑαΠΫϧͷϝιουϑοΫͨ͠ ͱ͖ʹॲཧΛΠϝʔδ͠΍͍͢ ✘ ϥΠϑαΠΫϧ͸͕ͤ͋͘ΔͷͰ஫ҙ
34. $ npm init react-app [app-name]
35. async/await͕ࣅ͍ͯΔ
36. https://gist.github.com/lattner/429b9070918248274f25b714dcfc7619
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͕ࣅ͍ͯΔ
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
74. ΍ͬͺΓҰཡ͍ΒͶ
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. ༏͗ͯ͢͠ٯʹҤ͑Δ
101. CSS͸੍໿ໃ६Λڐ༰͢Δ ݁Ռɺ่ΕΔ
102. ;ͨͭΊ
103. ΩϥΩϥωʔϛϯά
105. CSSઃܭͷ؊͸໋໊نଇ ͕ͩɺ໋໊نଇΛΤϥʔΛग़ͯ͘͠Ε͸ ͠ͳ͍
106. CSS-Grid-modules
109. Styled-components
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. ༨ஊͰ͢
129. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ Any questions? ✘ @ohayou_kenchan ✘ kenta.takano@my-best.com