iOSDC2018_ohayou_kenchan.pdf

by ohayoukenchan

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Copyright © 2018 mybest All rights reserved. mybestͷಛ௃ ʮ●●ʢϞϊͷ໊લʣ×͓͢͢Ίʯʹڧ͍ͨΊɺߪങҙཉͷߴ͍Ϣʔβʔ͕ଟ͘Ӿཡ͍ͯ͠·͢ɻ  ֤঎඼δϟϯϧͰɺݕࡧॱҐ্͕ҐͷهࣄΛଟ਺อ༗͍ͯ͠·͢ɻ ʲݕࡧ݁Ռ̍ҐʳϔΞΞΠϩϯ×͓͢͢Ί ओͳ̍Ґͷݕࡧ݁Ռ ϔΞΞΠϩϯ×͓͢͢Ί ϨτϧτΧϨʔ×͓͢͢Ί εϚϗεϐʔΧʔ×͓͢͢Ί νʔΫ×͓͢͢Ί Ϗδωεγϡʔζ×͓͢͢Ί ҥྨενʔϚʔ×͓͢͢Ί ໺ࡊδϡʔε×͓͢͢Ί αʔΩϡϨʔλʔ×͓͢͢Ί ੺Ϧοϓ×͓͢͢Ί ϩʔυόΠΫ×͓͢͢Ί …etc

Slide 6

Slide 6 text

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

( Vue | React )ʹ΋ ͓Μͳ͡ͷ͋Γ·͢ɻ

Slide 13

Slide 13 text

ϥΠϑαΠΫϧͷൺֱද 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

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

ϥΠϑαΠΫϧ ͷऔѻʹ͍ͭͯ

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

UIViewController

Slide 21

Slide 21 text

UIView

Slide 22

Slide 22 text

ࣙ৬͍ͨ͠

Slide 23

Slide 23 text

ྃղͨ͠

Slide 24

Slide 24 text

ྃղͨ͠

Slide 25

Slide 25 text

ReactComponent

Slide 26

Slide 26 text

ReactComponent

Slide 27

Slide 27 text

ࣙ৬͍ͨ͠

Slide 28

Slide 28 text

ྃղͨ͠

Slide 29

Slide 29 text

ྃղͨ͠

Slide 30

Slide 30 text

ྃղͨ͠

Slide 31

Slide 31 text

ྃղͨ͠

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

$ npm init react-app [app-name]

Slide 35

Slide 35 text

async/await͕ࣅ͍ͯΔ

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

΄΅ ׬શʹҰக

Slide 40

Slide 40 text

JavaScriptͷඇಉظॲཧ

Slide 41

Slide 41 text

Generator ! next() IteratorΦϒδΣΫ τ next()ΛݺͿ͜ͱͰ ࣍ͷyield·Ͱॲཧ Λ͢Δ͜ͱ͕ग़དྷΔ ! yeild ॲཧΛதஅͰ͖ɺ ผͷॲཧ͔Β෮ؼ ͨ͠ΓͰ͖Δ ! done() ฦΓ஋͕return͞ Εͨͱ͖δΣωϨ ʔλ͕done͞ΕΔ function*એݴ GeneratorΦϒδΣΫτΛ࣋ͭGeneratorؔ਺ʹͳΔ

Slide 42

Slide 42 text

Generatorͷྫ

Slide 43

Slide 43 text

Promise ! Pending ඇಉظૢ࡞͕׬ྃ ͍ͯ͠ͳ͍ ! fulfilled ૢ࡞͕׬ྃ͠ɺ Promise͕஋Λ1ͭ ࣋ͭ resolveΛฦ͢ ! Rejected ૢ࡞͕Τϥʔ·ͨ ͸ࣦഊͰऴྃͨ͠ rejectedΛฦ͢ কདྷ࢖͑ΔΑ͏ʹͳΔͳʹ͔ʢ஋ʣ then, catch ͰνΣΠϯͰ͖ΔಛੑΛ΋ͭʢthenable)

Slide 44

Slide 44 text

Promiseͷྫ

Slide 45

Slide 45 text

async/await async ඇಉظؔ਺Λఆٛ͢Δؔ਺એݴ ؔ਺ͷલʹasyncΛ͚ͭΔ͜ͱͰඇ ಉظؔ਺Λఆٛ͢Δ asyncؔ਺͸ݺͼग़͞ΕΔͱ PromiseΛฦ͢ asyncؔ਺͕஋Λreturnͨ͠৔߹ Promise͸໭Γ஋Λresolve͢Δ asyncؔ਺͕ྫ֎Λthrowͨ͠৔߹ ͦͷ஋Λreject͢Δ await async function಺ͰPromiseͷ݁Ռ ʢresolveɺrejectʣ͕ฦ͞ΕΔ·Ͱ ଴ػ͢Δ awaitΛࢦఆ͢Δͱɺͦͷؔ਺ͷ Promiseͷ݁Ռ͕ฦ͞ΕΔ·Ͱ଴ػ ͢Δɻ

Slide 46

Slide 46 text

async/awaitͷྫ

Slide 47

Slide 47 text

Async/Await for Swift ͱCoroutineϞσϧ

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

͜ͷষͷ·ͱΊ ✘ async/await͸ࣅ͍ͯΔ ✘ JavaScript͸GeneratorɺPromiseɺ async/awaitͱ͍ΖΜͳॻ͖ํͰඇಉظ ॲཧ͕ॻ͚Δ ✘ Async/Await for Swift ͸Swiftʹίϧʔ νϯΛ΋ͨΒ͢΋ͷ

Slide 50

Slide 50 text

Redux͕ࣅ͍ͯΔ

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

ReduxͷΑ͞

Slide 65

Slide 65 text

Reduxఫୀ

Slide 66

Slide 66 text

ࣄۀεέʔϧͱRedux

Slide 67

Slide 67 text

্ཱͪ͛౰ॳͷίϯςΩετ ✘ Ϣʔβʔ͕౤ථग़དྷΔػೳ͕΄͍͠ ✘ Ұཡͱৄࡉը໘͕ཉ͍͠ ✘ ౤ථ݁ՌʹίϝϯτͰ͖ΔΑ͏ʹͨ͠ ͍ʢΘ͍Θ͍ͯ͠Δײ͕͡ཉ͍͠ʣ ✘ ΠέͯΔΑ͏ʹ݁ՌΛՄࢹԽ͍ͨ͠ ✘ ͳΜͱͳ͘ྑͦ͞͏ͳਓʹ͸࣭໰Λ࡞ ੒͢Δ͜ͱΛڐՄ͍ͨ͠

Slide 68

Slide 68 text

Slide 69

Slide 69 text

Slide 70

Slide 70 text

Slide 71

Slide 71 text

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

΍ͬͺΓҰཡ͍ΒͶ

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

Α͍ઃܭ ͱ͸ʁ

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

͜ͷষͷ·ͱΊ ✘ ReduxΛ֮͑ΔͳΒ͋ͷgifΛͣͬͱΈ Α͏ ✘ ReSwift͸ฏқʹReduxΛ࣮ݱग़དྷΔ ✘ ඇಉظॲཧ͸MiddleWareʹಀ͕ͦ͏ ✘ ఫୀͰ͖Δมߋʹڧ͍ઃܭΛʂ

Slide 84

Slide 84 text

TypeScript͕ࣅ͍ͯΔ

Slide 85

Slide 85 text

Compile Error [] + [] = “”

Slide 86

Slide 86 text

let

Slide 87

Slide 87 text

const

Slide 88

Slide 88 text

TypeAnnotation

Slide 89

Slide 89 text

interface

Slide 90

Slide 90 text

type

Slide 91

Slide 91 text

any

Slide 92

Slide 92 text

Array of type

Slide 93

Slide 93 text

͜ͷষͷ·ͱΊ ✘ TypeScript΄΅Swift

Slide 94

Slide 94 text

CSS͕ࣅ͍ͯΔ

Slide 95

Slide 95 text

CSS ≒ AutoLayout

Slide 96

Slide 96 text

CSSʹର͢Δҙࣝௐࠪɹʢࣗ෼ௐ΂ʣ

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

ͻͱͭΊ

Slide 99

Slide 99 text

༏͗ͯ͢͠ٯʹҤ͑Δ

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

;ͨͭΊ

Slide 103

Slide 103 text

ΩϥΩϥωʔϛϯά

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

CSS-Grid-modules

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

No content

Slide 109

Slide 109 text

Styled-components

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

Ϋϥε໊͸΋͏ؾʹ͠ͳ ͓̺ͯ͘

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

https://polaris.shopify.com/

Slide 115

Slide 115 text

https://polaris.shopify.com/

Slide 116

Slide 116 text

https://polaris.shopify.com/

Slide 117

Slide 117 text

https://polaris.shopify.com/

Slide 118

Slide 118 text

CSS ≒ AutoLayout

Slide 119

Slide 119 text

Component binded CSS ≒ AutoLayout

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

શମͷ·ͱΊ ✘ ϥΠϑαΠΫϧ͕ࣅͯΔ ✘ async/await,Promise,Generator ✘ Redux ͸͋ͷgifಈըΛ಄ʹ͍ΕΑ͏ ✘ TypeAnotation ✘ CSS-grid-modulesͱstyled-components

Slide 122

Slide 122 text

શମͷ·ͱΊ ✘ ϥΠϑαΠΫϧ͕ࣅ͍ͯͨ ✘ async/await͕ࣅ͍ͯͨ ✘ Redux͕ࣅ͍ͯͨ ✘ CSSͱAutoLayout͕ࣅ͍ͯͨ ✘ TypeScriptͱSwift͕ࣅ͍ͯͨ

Slide 123

Slide 123 text

શମͷ·ͱΊ ✘ ϥΠϑαΠΫϧ͕ࣅ͍ͯͨ ✘ async/await͕ࣅ͍ͯͨ ✘ Redux͕ࣅ͍ͯͨ ✘ CSSͱAutoLayout͕ࣅ͍ͯͨ ✘ TypeScriptͱSwift͕ࣅ͍ͯͨ

Slide 124

Slide 124 text

શମͷ·ͱΊ ✘ ϥΠϑαΠΫϧ͕ࣅ͍ͯͨ ✘ async/await͕ࣅ͍ͯͨ ✘ Redux͕ࣅ͍ͯͨ ✘ CSSͱAutoLayout͕ࣅ͍ͯͨ ✘ TypeScriptͱSwift͕ࣅ͍ͯͨ

Slide 125

Slide 125 text

શମͷ·ͱΊ ✘ ϥΠϑαΠΫϧ͕ࣅ͍ͯͨ ✘ async/await͕ࣅ͍ͯͨ ✘ Redux͕ࣅ͍ͯͨ ✘ CSSͱAutoLayout͕ࣅ͍ͯͨ ✘ TypeScriptͱSwift͕ࣅ͍ͯͨ

Slide 126

Slide 126 text

༨ஊͰ͢

Slide 127

Slide 127 text

༨ஊͰ͢

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ Any questions? ✘ @ohayou_kenchan ✘ [email protected]