ϑϩϯτΤϯυ͔ΒݟͨiOS։ൃ2018/08/31גࣜձࣾϚΠϕετ@ohayou_kenchan
View Slide
ߴɹݐଠ@ohayou_kenchanHTML/CSS/JavaScriptͱ10͘Β͍ͳ͔Α͠ɻAS3ͱੲ͕ྑ͔ͬͨɻSwift3͔ΒiOSͱྑͨ͘͘͠ͳΓiOS։ൃΛ͘Β͍࣮Ͱܦݧͨ͠ͷϑϩϯτΤϯυʹͬͨɻલ৬:Ϧϒηϯε ex స৬ձٞ,࣏ྍnote,స৬φϏiOSݱ৬:גࣜձࣾϚΠϕετͷϑϩϯτΤϯυ
Copyright © 2017 mybest All rights reserved.CONTENTSmybestͷίϯςϯπΛհ͠·ͪ͢ΐͬͱձࣾઆ໌͍ͤͯͩ͘͞͞
Copyright © 2018 mybest All rights reserved.mybestͷಛʮ●●ʢϞϊͷ໊લʣ×͓͢͢Ίʯʹڧ͍ͨΊɺߪങҙཉͷߴ͍Ϣʔβʔ͕ଟ͘Ӿཡ͍ͯ͠·͢ɻ ֤δϟϯϧͰɺݕࡧॱҐ্͕ҐͷهࣄΛଟอ༗͍ͯ͠·͢ɻʲݕࡧ݁Ռ̍ҐʳϔΞΞΠϩϯ×͓͢͢Ίओͳ̍Ґͷݕࡧ݁ՌϔΞΞΠϩϯ×͓͢͢ΊϨτϧτΧϨʔ×͓͢͢ΊεϚϗεϐʔΧʔ×͓͢͢ΊνʔΫ×͓͢͢ΊϏδωεγϡʔζ×͓͢͢ΊҥྨενʔϚʔ×͓͢͢Ίࡊδϡʔε×͓͢͢ΊαʔΩϡϨʔλʔ×͓͢͢ΊϦοϓ×͓͢͢ΊϩʔυόΠΫ×͓͢͢Ί…etc
Copyright © 2018 mybest All rights reserved.mybestͷي620162݄ϩʔϯνޙɺϢʔβʔॱௐʹதͰ͢ɻ݄ؒ1,300ສϢʔβʔಥഁ͍ͯ͠·͢ɻ݄ؒൢച308,000ݸ݄ؒൢചֹۚ27.3ԯԁग़యɿGoogleAnalyticsʢ20184݄ݱࡏʣ݄ؒ࠷େϢʔβʔ1,300ສਓಥഁʂ
͜ͷτʔΫͷΰʔϧiOSΤϯδχΞʹฉ͍ͯ΄͍͜͠ͱ
྆ํΕͦ͏Ϛϯͱ͍͏બࢶ
͘͡✘ ϥΠϑαΠΫϧ͕ࣅ͍ͯΔ✘ async/await͕ࣅ͍ͯΔ✘ Redux͕ࣅ͍ͯΔ✘ CSSͱAutoLayout͕ࣅ͍ͯΔ✘ TypeScriptͱSwift͕ࣅ͍ͯΔ
ϥΠϑαΠΫϧ͕ࣅ͍ͯΔUIViewControllerͱVueͷίϯϙʔωϯτྑ͠ʹͳΕΔ
UIViewControllerͷϥΠϑαΠΫϧͲΜͳͷ͕͋Γ·͔͢ʁ
( Vue | React )ʹ͓Μͳ͡ͷ͋Γ·͢ɻ
ϥΠϑαΠΫϧͷൺֱදUIViewController React VueviewͷಡΈࠐΈ loadView componentWillMount beforeCreatedviewͷಡΈࠐΈޙ viewDidLoad componentDidMount createdview͕දࣔ͞ΕΔલ viewWillAppearshouldComponentUpdatebeforeMountview͕දࣔ͞Εͨޙ viewDidAppear - mountedը໘͔Βফ͑ΔલviewWillDisAppearcompomentWillUnmountbeforeDestroyը໘͔Βফ͑ͨޙ viewDidDisappear - destroyedϨΠΞτ։࢝viewWillLayoutSubViewscomponentWillUpdate beforeUpdateϨΠΞτऴྃviewDidLayoutSubViewscomponentDidUpdate updated
ϥΠϑαΠΫϧͷൺֱදUIViewController React VueviewͷಡΈࠐΈ loadView componentWillMount beforeCreatedviewͷಡΈࠐΈޙ viewDidLoad componentDidMount createdview͕දࣔ͞ΕΔલ viewWillAppearshouldComponentUpdatebeforeMountview͕දࣔ͞Εͨޙ viewDidAppear - mountedը໘͔Βফ͑ΔલviewWillDisAppearcompomentWillUnmountbeforeDestroyը໘͔Βফ͑ͨޙ viewDidDisappear - destroyedϨΠΞτ։࢝viewWillLayoutSubViewscomponentWillUpdate beforeUpdateϨΠΞτऴྃviewDidLayoutSubViewscomponentDidUpdate updated΄΅શʹҰக
ϥΠϑ αΠΫϧ͕ࣅ͍ͯΔͱ͏Ε͍͜͠ͱ
ϥΠϑαΠΫϧͷऔѻʹ͍ͭͯ
UIViewController
UIView
ࣙ৬͍ͨ͠
ྃղͨ͠
ReactComponent
͜ͷষͷ·ͱΊ✘ VueReactUIViewControllerϥΠϑαΠΫϧ͕ࣅ͍ͯΔ✘ ϥΠϑαΠΫϧͷϝιουϑοΫͨ͠ͱ͖ʹॲཧΛΠϝʔδ͍͢͠✘ ϥΠϑαΠΫϧ͕ͤ͋͘ΔͷͰҙ
$ npm init react-app [app-name]
async/await͕ࣅ͍ͯΔ
https://gist.github.com/lattner/429b9070918248274f25b714dcfc7619
΄΅શʹҰக
JavaScriptͷඇಉظॲཧ
Generator! next()IteratorΦϒδΣΫτnext()ΛݺͿ͜ͱͰ࣍ͷyield·ͰॲཧΛ͢Δ͜ͱ͕ग़དྷΔ! yeildॲཧΛதஅͰ͖ɺผͷॲཧ͔Β෮ؼͨ͠ΓͰ͖Δ! done()ฦΓ͕return͞Εͨͱ͖δΣωϨʔλ͕done͞ΕΔfunction*એݴGeneratorΦϒδΣΫτΛ࣋ͭGeneratorؔʹͳΔ
Generatorͷྫ
Promise! Pendingඇಉظૢ࡞͕͍ྃͯ͠ͳ͍! fulfilledૢ࡞͕ྃ͠ɺPromise͕Λ1ͭ࣋ͭresolveΛฦ͢! Rejectedૢ࡞͕Τϥʔ·ࣦͨഊͰऴྃͨ͠rejectedΛฦ͢কདྷ͑ΔΑ͏ʹͳΔͳʹ͔ʢʣthen, catch ͰνΣΠϯͰ͖ΔಛੑΛͭʢthenable)
Promiseͷྫ
async/awaitasyncඇಉظؔΛఆٛ͢ΔؔએݴؔͷલʹasyncΛ͚ͭΔ͜ͱͰඇಉظؔΛఆٛ͢Δasyncؔݺͼग़͞ΕΔͱPromiseΛฦ͢async͕ؔΛreturnͨ͠߹PromiseΓΛresolve͢Δasync͕ؔྫ֎Λthrowͨ͠߹ͦͷΛreject͢Δawaitasync functionͰPromiseͷ݁Ռʢresolveɺrejectʣ͕ฦ͞ΕΔ·Ͱػ͢ΔawaitΛࢦఆ͢ΔͱɺͦͷؔͷPromiseͷ݁Ռ͕ฦ͞ΕΔ·Ͱػ͢Δɻ
async/awaitͷྫ
Async/Await for SwiftͱCoroutineϞσϧ
https://speakerdeck.com/sys1yagi/kotlin-korutinwo-li-jie-siyou
͜ͷষͷ·ͱΊ✘ async/awaitࣅ͍ͯΔ✘ JavaScriptGeneratorɺPromiseɺasync/awaitͱ͍ΖΜͳॻ͖ํͰඇಉظॲཧ͕ॻ͚Δ✘ Async/Await for Swift SwiftʹίϧʔνϯΛͨΒ͢ͷ
Redux͕ࣅ͍ͯΔ
https://bumbu.me/simple-redux/
https://bumbu.me/simple-redux/ΞϓϦͷͭঢ়ଶ།Ұͭ
https://bumbu.me/simple-redux/ActionʹΑΓঢ়ଶΛͲ͏มߋͤ͞Δ͔Reducer͕͓͜ͳ͏
https://bumbu.me/simple-redux/ঢ়ଶΛมߋͤ͞ΔʹඞͣactionΛൃߦͤ͞ͳ͚ΕͳΒͳ͍
https://bumbu.me/simple-redux/Ҏ্
ReduxͷΑ͞
Reduxఫୀ
ࣄۀεέʔϧͱRedux
্ཱͪ͛ॳͷίϯςΩετ✘ Ϣʔβʔ͕ථग़དྷΔػೳ͕΄͍͠✘ Ұཡͱৄࡉը໘͕ཉ͍͠✘ ථ݁ՌʹίϝϯτͰ͖ΔΑ͏ʹ͍ͨ͠ʢΘ͍Θ͍ͯ͠Δײ͕͡ཉ͍͠ʣ✘ ΠέͯΔΑ͏ʹ݁ՌΛՄࢹԽ͍ͨ͠✘ ͳΜͱͳ͘ྑͦ͞͏ͳਓʹ࣭Λ࡞͢Δ͜ͱΛڐՄ͍ͨ͠
ͪΐͬͱԿݴͬͯΔ͔Θ͔Βͳ͍Motivation
ͬͺΓҰཡ͍ΒͶ
اըऀ͕;Θͬͱͨ͠ஈ֊ͩͱͦͷਓͷҙਤͰઃܭࠨӈ͞ΕΔ
Α͍ઃܭͱʁ
ReSwiftΊΔ͜ͱʹͳͬͯҾ͖ଓ͖εέʔϥϏϦςΟͷ͋ΔઃܭΛʂ
͜ͷষͷ·ͱΊ✘ ReduxΛ֮͑ΔͳΒ͋ͷgifΛͣͬͱΈΑ͏✘ ReSwiftฏқʹReduxΛ࣮ݱग़དྷΔ✘ ඇಉظॲཧMiddleWareʹಀ͕ͦ͏✘ ఫୀͰ͖Δมߋʹڧ͍ઃܭΛʂ
TypeScript͕ࣅ͍ͯΔ
Compile Error[] + [] = “”
let
const
TypeAnnotation
interface
type
any
Array of type
͜ͷষͷ·ͱΊ✘ TypeScript΄΅Swift
CSS͕ࣅ͍ͯΔ
CSS ≒ AutoLayout
CSSʹର͢Δҙࣝௐࠪɹʢࣗௐʣ
ͳͥCSSͱ͍͏֓೦͕Զͨͪͷ৺ΛΘͤͳ͍ͷ͔
ͻͱͭΊ
༏͗ͯ͢͠ٯʹҤ͑Δ
CSS੍ໃ६Λڐ༰͢Δ݁Ռɺ่ΕΔ
;ͨͭΊ
ΩϥΩϥωʔϛϯά
CSSઃܭͷ؊໋໊نଇ͕ͩɺ໋໊نଇΛΤϥʔΛग़ͯ͘͠Ε͠ͳ͍
CSS-Grid-modules
Styled-components
Ϋϥε໊͏ؾʹ͠ͳ͓̺ͯ͘
https://github.com/danilowoz/react-atomic-design
https://polaris.shopify.com/
Component bindedCSS ≒ AutoLayout
͜ͷষͷ·ͱΊ✘ CSSͰϨΠΞτ่Εͦ͏ͳͱ͖CSS-GridLayout✘ ໋໊نଇߟ͑Δͷ͕ਏ͍ͱ͖StyledComponentΛ͓͏✘ AutoLayout੍่͕ΕΔͱΒͤͯ͘ΕΔʢCSSΏΔ;Θ
શମͷ·ͱΊ✘ ϥΠϑαΠΫϧ͕ࣅͯΔ✘ async/await,Promise,Generator✘ Redux ͋ͷgifಈըΛ಄ʹ͍ΕΑ͏✘ TypeAnotation✘ CSS-grid-modulesͱstyled-components
શମͷ·ͱΊ✘ ϥΠϑαΠΫϧ͕ࣅ͍ͯͨ✘ async/await͕ࣅ͍ͯͨ✘ Redux͕ࣅ͍ͯͨ✘ CSSͱAutoLayout͕ࣅ͍ͯͨ✘ TypeScriptͱSwift͕ࣅ͍ͯͨ
༨ஊͰ͢
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠Any questions?✘ @ohayou_kenchan✘ [email protected]