Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
iOSDC2018_ohayou_kenchan.pdf
ohayoukenchan
August 31, 2018
Programming
4
3.5k
iOSDC2018_ohayou_kenchan.pdf
ohayoukenchan
August 31, 2018
Tweet
Share
More Decks by ohayoukenchan
See All by ohayoukenchan
iOSDC2021 知られざる課金ステータス
ohayoukenchan
1
5.8k
protect_mutable_state_in_concurrent_Swift_applications.pdf
ohayoukenchan
0
910
Other Decks in Programming
See All in Programming
花き業界のサプライチェーンを繋げるプロダクト開発の進め方
userlike1
0
190
The State of Kotlin | FOSDEM 2023
prof18
1
110
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
140
Functional Fun in Kotlin
nomisrev
1
120
OIDC仕様に準拠した Makuake ID連携基盤構築の裏側
ymtdzzz
0
590
レガシーフレームワークからの移行
ug
0
130
What's new in Shopware 6.5
shyim
0
120
TokyoR#103_DataProcessing
kilometer
0
550
Qiita Night PHP 2023
fuwasegu
0
11k
Swift Concurrency in GoodNotes
inamiy
4
1.4k
Refactor with using `available` and `deprecated`
417_72ki
3
380
Cloudflare Workersと状態管理
chimame
3
500
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
2
300
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
38
3.6k
A Philosophy of Restraint
colly
193
15k
Rails Girls Zürich Keynote
gr2m
87
12k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
VelocityConf: Rendering Performance Case Studies
addyosmani
317
22k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
4 Signs Your Business is Dying
shpigford
171
20k
Building Your Own Lightsaber
phodgson
96
4.9k
Code Review Best Practice
trishagee
50
11k
How to name files
jennybc
47
73k
The World Runs on Bad Software
bkeepers
PRO
59
5.7k
Transcript
ϑϩϯτΤϯυ͔ΒݟͨiOS։ൃ 2018/08/31 גࣜձࣾϚΠϕετ @ohayou_kenchan
ߴɹݐଠ @ohayou_kenchan HTML/CSS/JavaScriptͱ10͘Β͍ͳ͔Α͠ɻAS3ͱੲ͕ྑ ͔ͬͨɻ Swift3͔ΒiOSͱྑͨ͘͘͠ͳΓiOS։ൃΛ͘Β͍࣮Ͱܦ ݧͨ͠ͷϑϩϯτΤϯυʹͬͨɻ લ৬:Ϧϒηϯε ex స৬ձٞ,࣏ྍnote,స৬φϏiOS ݱ৬:גࣜձࣾϚΠϕετͷϑϩϯτΤϯυ
Copyright © 2017 mybest All rights reserved. CONTENTS mybestͷίϯςϯπΛհ͠·͢ ͪΐͬͱձࣾઆ໌
͍ͤͯͩ͘͞͞
None
Copyright © 2018 mybest All rights reserved. mybestͷಛ ʮ••ʢϞϊͷ໊લʣ×͓͢͢Ίʯʹڧ͍ͨΊɺߪങҙཉͷߴ͍Ϣʔβʔ͕ଟ͘Ӿཡ͍ͯ͠·͢ɻ ֤δϟϯϧͰɺݕࡧॱҐ্͕ҐͷهࣄΛଟอ༗͍ͯ͠·͢ɻ
ʲݕࡧ݁Ռ̍ҐʳϔΞΞΠϩϯ×͓͢͢Ί ओͳ̍Ґͷݕࡧ݁Ռ ϔΞΞΠϩϯ×͓͢͢Ί ϨτϧτΧϨʔ×͓͢͢Ί εϚϗεϐʔΧʔ×͓͢͢Ί νʔΫ×͓͢͢Ί Ϗδωεγϡʔζ×͓͢͢Ί ҥྨενʔϚʔ×͓͢͢Ί ࡊδϡʔε×͓͢͢Ί αʔΩϡϨʔλʔ×͓͢͢Ί Ϧοϓ×͓͢͢Ί ϩʔυόΠΫ×͓͢͢Ί …etc
Copyright © 2018 mybest All rights reserved. mybestͷي 6 20162݄ϩʔϯνޙɺϢʔβʔॱௐʹதͰ͢ɻ݄ؒ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 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
ϥΠϑαΠΫϧͷൺֱද 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 ΄΅ શʹҰக
ϥΠϑαΠΫϧͷൺֱද 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
ϥΠϑ αΠΫϧ͕ ࣅ͍ͯΔͱ͏Ε͍͜͠ͱ
ϥΠϑ αΠΫϧ͕ ࣅ͍ͯΔͱ͏Ε͍͜͠ͱ
ϥΠϑαΠΫϧ ͷऔѻʹ͍ͭͯ
None
UIViewController
UIView
ࣙ৬͍ͨ͠
ྃղͨ͠
ྃղͨ͠
ReactComponent
ReactComponent
ࣙ৬͍ͨ͠
ྃղͨ͠
ྃղͨ͠
ྃղͨ͠
ྃղͨ͠
None
͜ͷষͷ·ͱΊ ✘ VueReactUIViewControllerϥΠ ϑαΠΫϧ͕ࣅ͍ͯΔ ✘ ϥΠϑαΠΫϧͷϝιουϑοΫͨ͠ ͱ͖ʹॲཧΛΠϝʔδ͍͢͠ ✘ ϥΠϑαΠΫϧ͕ͤ͋͘ΔͷͰҙ
$ npm init react-app [app-name]
async/await͕ࣅ͍ͯΔ
https://gist.github.com/lattner/429b9070918248274f25b714dcfc7619
None
None
΄΅ શʹҰக
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/await async ඇಉظؔΛఆٛ͢Δؔએݴ ؔͷલʹasyncΛ͚ͭΔ͜ͱͰඇ ಉظؔΛఆٛ͢Δ asyncؔݺͼग़͞ΕΔͱ PromiseΛฦ͢ async͕ؔΛreturnͨ͠߹ PromiseΓΛresolve͢Δ async͕ؔྫ֎Λthrowͨ͠߹
ͦͷΛreject͢Δ await async 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͕ࣅ͍ͯΔ
None
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/
https://bumbu.me/simple-redux/
https://bumbu.me/simple-redux/
https://bumbu.me/simple-redux/
https://bumbu.me/simple-redux/
https://bumbu.me/simple-redux/
https://bumbu.me/simple-redux/
https://bumbu.me/simple-redux/ Ҏ্
ReduxͷΑ͞
Reduxఫୀ
ࣄۀεέʔϧͱRedux
্ཱͪ͛ॳͷίϯςΩετ ✘ Ϣʔβʔ͕ථग़དྷΔػೳ͕΄͍͠ ✘ Ұཡͱৄࡉը໘͕ཉ͍͠ ✘ ථ݁ՌʹίϝϯτͰ͖ΔΑ͏ʹͨ͠ ͍ʢΘ͍Θ͍ͯ͠Δײ͕͡ཉ͍͠ʣ ✘ ΠέͯΔΑ͏ʹ݁ՌΛՄࢹԽ͍ͨ͠
✘ ͳΜͱͳ͘ྑͦ͞͏ͳਓʹ࣭Λ࡞ ͢Δ͜ͱΛڐՄ͍ͨ͠
্ཱͪ͛ॳͷίϯςΩετ ✘ Ϣʔβʔ͕ථग़དྷΔػೳ͕΄͍͠ ✘ Ұཡͱৄࡉը໘͕ཉ͍͠ ✘ ථ݁ՌʹίϝϯτͰ͖ΔΑ͏ʹͨ͠ ͍ʢΘ͍Θ͍ͯ͠Δײ͕͡ཉ͍͠ʣ ✘ ΠέͯΔΑ͏ʹ݁ՌΛՄࢹԽ͍ͨ͠
✘ ͳΜͱͳ͘ྑͦ͞͏ͳਓʹ࣭Λ࡞ ͢Δ͜ͱΛڐՄ͍ͨ͠
্ཱͪ͛ॳͷίϯςΩετ ✘ Ϣʔβʔ͕ථग़དྷΔػೳ͕΄͍͠ ✘ Ұཡͱৄࡉը໘͕ཉ͍͠ ✘ ථ݁ՌʹίϝϯτͰ͖ΔΑ͏ʹͨ͠ ͍ʢΘ͍Θ͍ͯ͠Δײ͕͡ཉ͍͠ʣ ✘ ΠέͯΔΑ͏ʹ݁ՌΛՄࢹԽ͍ͨ͠
✘ ͳΜͱͳ͘ྑͦ͞͏ͳਓʹ࣭Λ࡞ ͢Δ͜ͱΛڐՄ͍ͨ͠
্ཱͪ͛ॳͷίϯςΩετ ✘ Ϣʔβʔ͕ථग़དྷΔػೳ͕΄͍͠ ✘ Ұཡͱৄࡉը໘͕ཉ͍͠ ✘ ථ݁ՌʹίϝϯτͰ͖ΔΑ͏ʹͨ͠ ͍ʢΘ͍Θ͍ͯ͠Δײ͕͡ཉ͍͠ʣ ✘ ΠέͯΔΑ͏ʹ݁ՌΛՄࢹԽ͍ͨ͠
✘ ͳΜͱͳ͘ྑͦ͞͏ͳਓʹ࣭Λ࡞ ͢Δ͜ͱΛڐՄ͍ͨ͠
্ཱͪ͛ॳͷίϯςΩετ ✘ Ϣʔβʔ͕ථग़དྷΔػೳ͕΄͍͠ ✘ Ұཡͱৄࡉը໘͕ཉ͍͠ ✘ ථ݁ՌʹίϝϯτͰ͖ΔΑ͏ʹͨ͠ ͍ʢΘ͍Θ͍ͯ͠Δײ͕͡ཉ͍͠ʣ ✘ ΠέͯΔΑ͏ʹ݁ՌΛՄࢹԽ͍ͨ͠
✘ ͳΜͱͳ͘ྑͦ͞͏ͳਓʹ࣭Λ࡞ ͢Δ͜ͱΛڐՄ͍ͨ͠
ͪΐͬͱԿݴͬͯΔ͔Θ͔Βͳ͍ Motivation
None
ͬͺΓҰཡ͍ΒͶ
None
None
None
None
None
اըऀ͕;Θͬͱͨ͠ஈ֊ͩͱ ͦͷਓͷҙਤͰઃܭࠨӈ͞ΕΔ
Α͍ઃܭ ͱʁ
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ͱ͍͏֓೦͕Զͨ ͪͷ৺ΛΘͤͳ͍ͷ͔
ͻͱͭΊ
༏͗ͯ͢͠ٯʹҤ͑Δ
None
CSS੍ໃ६Λڐ༰͢Δ ݁Ռɺ่ΕΔ
;ͨͭΊ
ΩϥΩϥωʔϛϯά
None
CSSઃܭͷ؊໋໊نଇ ͕ͩɺ໋໊نଇΛΤϥʔΛग़ͯ͘͠Ε ͠ͳ͍
CSS-Grid-modules
None
None
Styled-components
None
None
Ϋϥε໊͏ؾʹ͠ͳ ͓̺ͯ͘
https://github.com/danilowoz/react-atomic-design
https://polaris.shopify.com/
https://polaris.shopify.com/
https://polaris.shopify.com/
https://polaris.shopify.com/
CSS ≒ AutoLayout
Component binded CSS ≒ 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͕ࣅ͍ͯͨ
શମͷ·ͱΊ ✘ ϥΠϑαΠΫϧ͕ࣅ͍ͯͨ ✘ async/await͕ࣅ͍ͯͨ ✘ Redux͕ࣅ͍ͯͨ ✘ CSSͱAutoLayout͕ࣅ͍ͯͨ ✘
TypeScriptͱSwift͕ࣅ͍ͯͨ
શମͷ·ͱΊ ✘ ϥΠϑαΠΫϧ͕ࣅ͍ͯͨ ✘ async/await͕ࣅ͍ͯͨ ✘ Redux͕ࣅ͍ͯͨ ✘ CSSͱAutoLayout͕ࣅ͍ͯͨ ✘
TypeScriptͱSwift͕ࣅ͍ͯͨ
શମͷ·ͱΊ ✘ ϥΠϑαΠΫϧ͕ࣅ͍ͯͨ ✘ async/await͕ࣅ͍ͯͨ ✘ Redux͕ࣅ͍ͯͨ ✘ CSSͱAutoLayout͕ࣅ͍ͯͨ ✘
TypeScriptͱSwift͕ࣅ͍ͯͨ
༨ஊͰ͢
༨ஊͰ͢
None
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ Any questions? ✘ @ohayou_kenchan ✘
[email protected]