Upgrade to Pro — share decks privately, control downloads, hide ads and more …

iOSDC2018_ohayou_kenchan.pdf

 iOSDC2018_ohayou_kenchan.pdf

Ab1b72230a5b6ddc97322af27ad91618?s=128

ohayoukenchan

August 31, 2018
Tweet

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