Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
アプリエンジニアが感じたReactNative導入の良し悪し
Search
hori
February 26, 2018
1
1.8k
アプリエンジニアが感じたReactNative導入の良し悪し
hori
February 26, 2018
Tweet
Share
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
460k
For a Future-Friendly Web
brad_frost
180
9.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Navigating Team Friction
lara
189
15k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
How to Ace a Technical Interview
jacobian
279
23k
Speed Design
sergeychernyshev
32
1.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
Unsuck your backbone
ammeep
671
58k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Designing Experiences People Love
moore
142
24k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Transcript
εϖʔεϚʔέοτɹ΄Γ 2018/2/26 ΞϓϦΤϯδχΞ͕ײͨ͡ ReactNativeಋೖͷྑ͠ѱ͠
΄Γ εϖʔεϚʔέοτ AndroidΞϓϦΤϯδχΞ ɹˠϑϩϯτΤϯυΤϯδχΞ ࠷গΤϯδχΞͰ͢ʢݱࡏʣ ࣗݾհ
֤ϓϩμΫτͷ։ൃڥ
Ϩϯλϧεϖʔε
ຽധ
๏ਓ͚ཧαʔϏε
ϨϯλϧεϖʔεɹΞϓϦ
ϗετ(ିओ)ɹΞϓϦ
3FBDUͰ։ൃ ϨϯλϧεϖʔεXFC ຽധXFC ϗετΞϓϦ ։ൃڥΛ·ͱΊΔͱ ωΠςΟϒݴޠͰ։ൃ ϨϯλϧεϖʔεΞϓϦ J04"OESPJE
ຊͷτϐοΫ
ReactNativeΛ࠾༻͢Δ·Ͱ ReactNative՝Λղܾ͔ͨ͠ ݁ہͲ͕ͬͪྑ͔͔ͬͨ ຊͷτϐοΫ
ਖ਼֬ʹReactNativeΞϓϦωΠςΟϒΞϓϦͰ͢ɻ εϥΠυͰ iOS / Android ඪ४։ൃͷݴޠ(obj-c / swift / java
/ kotlin)Ͱ։ൃ͞ΕͨͷΛʮωΠςΟϒΞ ϓϦʯͱͯ۠͠ผ͠·͢ɻ ·͕͖͑
ReactNativeΛ࠾༻͢Δ·Ͱ
ΤϯδχΞϦιʔεΛྲྀಈతʹ
ΤϯδχΞϦιʔεΛྲྀಈతʹ
iOS / Android Ͱಉ͜͡ͱΛ܁Γฦ͞ͳ͚Ε͍͚ͳ͍ ػೳՃ ػೳՃ όάରԠ όάରԠ ػೳՃ ػೳՃ
σϓϩΠɾςετ σϓϩΠɾςετ
iOS x 2 , Android x 2 JSܦݧऀ͋Γ React͕ͬͭΓܦݧऀ 0ਓ
ReactNativeܦݧऀ 0ਓ ษڧظ͕ؒ 2weeks ͘Β͍ ΞϓϦνʔϜɹ࣌ͷεΩϧηοτ
σΟϨΫ τϦߏ Ͳ͏͢Δ ͪΐͬͱ৮ΕͯΈͯෆ҆ʹײͨ͜͡ͱ 3FEVY .PC9 ͑0,ʁ "OESPJE ͚ͩ ى͜Δόά
ඪ४ͷ /BWJHBUJPO ͕ශऑ ΫϥογϡϨ ϙʔτ +BWB4DSJQU ࣗ༝͗͢Δ 164)௨ J1IPOF9 ରԠͰ͖Δʁ ͳͲͳͲʜ
ΞϓϦνʔϜͷԹײ • ϓϩτλΠϓ։ൃͱͯ͠ྑͦ͞͏ • webReactͳͷͰϦιʔεݮͰ ͖Δ͔ • ৽نΞϓϦͩ͠ઓ͍ͨ͠ • Facebook,
Airbnbͷ࣮͕͋Δ
ΞϓϦνʔϜͷԹײ • ࣮εϐʔυ͕ຊʹ্͕Δ͔ٙ • ࠷ॳ͕ݟੵΕͳ͍ • ϓϥοτϑΥʔϜಛ༗ͷόάɺ breaking-changeͷසͲ͏͔ • ωΠςΟϒͷํ͕࣮֬ͳͷΛ࡞Ε
Δ
ReactNativeσϏϡʔʂ ΄Μͱʹ՝ΛղܾͰ͖ͨͷ͔ ☔
ϗετΞϓϦΛϩʔϯν
• Ϧιʔε • ΤϯδχΞ • όοΫΤϯυ 1໊ • ΞϓϦ 2໊
ʢiOS/Android 1໊ͣͭʣ • ϚʔΫΞοϓ 1໊ • σβΠφʔ 2໊ • ࣮ظؒ • ࣮ 2ϲ݄ (όάऔΓؚΉ) • ϚʔΫΞοϓ 1ϲ݄ ࣮ظؒͱϦιʔε
RestAPIͱͷ௨৴ εϖʔεͷܝࡌɾߋ৽ɾআ ήετΞϓϦͱͷϩάΠϯ࿈ܞػೳ (ݱࡏiOSͷΈ) FacebookϩάΠϯ Ϧετදࣔ εέδϡʔϧҰཡͱ͔ɺ༧Ұཡͱ͔ɺҰཡܥը໘ ήετͱϝοηʔδͷΓͱΓ react-native-gifted-chat ը૾
/ PDFͷΞοϓϩʔυͳͲʢΧϝϥɾΪϟϥϦʔʣ ओͳػೳཁ݅
ϛυϧΣΞ Redux (ϑΝΠϧߏDucksʹԊͬͯ) ඇಉظॲཧ async/await φϏήʔγϣϯ react-navigation → react-native-router-flux facebookϩάΠϯ
react-native-fbsdk ϓογϡ௨ react-native-onesignal ओཁͳϥΠϒϥϦͳͲ
ΫϥογϡϨϙʔτ react-native-sentry ڧ੍Ξοϓσʔτ༻ react-native-firebase UIϑϨʔϜϫʔΫ σβΠϯ࠶ݱੑΛॏࢹͯ͠ඇ࠾༻ ੩తղੳπʔϧ Flow / eslint
/ prettier ओཁͳϥΠϒϥϦͳͲ
iOS / Android ޓ͍ͷ͜ͱΛৄࡉ·ͰΒͳͯ͘࡞Εͯ͠·͏ ఆ௨ΓϦιʔεݮ͕ਐΜͩ ίʔυڞ௨͢Β͍͠ ίϯϙʔωϯτΛࢿ࢈ͱ͍ͯ͢͠͠ɺΞτϛοΫσβΠϯ υϝΠϯϩδοΫଞϓϩμΫτͱڞ௨ԽͰ͖Δ ཪΛฦͤڞ௨ԽͷཻɺӨڹൣғௐ͕ࠪ·͍͠ ؾܰʹύοέʔδԽͰ͖Δ
͍͍Ͷ
ReactNative։ൃͰಘͨݟ͕ɺweb։ൃʹ׆͖Δ ࠷ۙͷϕϯνϟʔ͞ΜʹଟΊͳҹ ࠓޙReactNativeͷ͕ΓํɺΓ্͕Γ࣍ୈͰ·ͨมΘ͖ͬͯͦ͏ ReactNative։ൃ͍ͯ͠Δ͜ͱͰগ͠ߴ·Δ ͍͍Ͷ ΞϓϦϦϦʔεޙʹɺຽധαʔϏεͷϓϩδΣΫτΛ։࢝ ຽധαʔϏε node.js + React
ͰɺϛυϧΣΞपΓࣅͨߏ ࣮ࡍweb։ൃͷΞαΠϯεϜʔζʹରԠͰ͖ͨ
IDEͷԸܙΛड͚͖ͯͨωΠςΟϒΤϯδχΞͳͷͰ… Android Studio, Xcode, Storyboard ωΠςΟϒͰɺσβΠφʔύʔπΛݟͳ͕Βฤू ViewΛݟͳ͕ΒฤूͰ͖ͳ͍ ☔ ͏ʙΜ ☔
σόοά͠ʹ͍͘ʢωΠςΟϒൺֱʣ ϒϨʔΫϙΠϯτΛϒϥβ͔Βઃఆ͢ΔͳͲ ίϯιʔϧɺσόοάπʔϧͰը໘ྖҬΛ݁ߏऔΒΕΔ ։ൃڥɾσόοά
ReactNativeͷͱ͍͏ΑΓɺϑϩϯτΤϯυతͳ web → ReactNative ඇৗʹεϜʔζͩͱࢥ͏ ωΠςΟϒ → ReactNative ͷϋʔυϧ͕Լ͕Δͱಋೖ͍͔͢͠ ϥΠϒϥϦΛΘͳ͍ͱ՝ղܾͰ͖ͳ͍
৽͍͠ɺެࣜͷ৽ػೳͷै ͨͩ͠ɺҰֶ JavaScript Ͱ web / app / server શ෦ରԠͰ͖ Δͱ͍͏໘ͱͯૉΒ͍͠ ৽͍͜͠ͱͳͷͰֶशίετ͔͔Δ ☔ ͏ʙΜ ☔
ϥΠϒϥϦಋೖͷஅج४ ελʔʁ࣮ʁϝϯςφϯεසʁ ϥΠϒϥϦͷΥονɺධՁ ☔ ͏ʙΜ ☔
·ͱΊɿ݁ہͲ͕ͬͪྑ͔͔ͬͨ
ϓϩμΫτͷϥΠϑαΠΫϧϦιʔεنʹΑͬͯ ͍͚Εྑ͍ؾ͕͢Δʂ ϋʔυΣΞґଘͨ͠ΓɺσόΠεͷύϑΥʔϚϯ εΛҾ͖ग़͢ܥͷΞϓϦͳΒωΠςΟϒ͔ʁ ίϯςϯπɺECܥReactNativeͰेઓ͑ͦ͏ εϖʔεϚʔέοτͰweb͕ReactͰ͋Δ͜ͱɺϦ ιʔεঢ়گͳͲ͔Β૬ੑ͕ྑ͔ͬͨ ·ͱΊɿ݁ہͲ͕ͬͪྑ͔͔ͬͨ
React / JavaScript / iOS / Android UI / UX
ʹͩ͜ΘΓ͍ͨ ৽ٕज़ఏҊɾಋೖͳͲੵۃతͰ͢ िҰϦϞʔτϫʔΫ੍ʢਫ༵ʣ ΤϯδχΞ࠾༻தͰ͢ʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠