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
The Art of Programming - Codeland 2020
erikaheidi
56
13k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
How to Ace a Technical Interview
jacobian
279
23k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Bash Introduction
62gerente
615
210k
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
ʹͩ͜ΘΓ͍ͨ ৽ٕज़ఏҊɾಋೖͳͲੵۃతͰ͢ िҰϦϞʔτϫʔΫ੍ʢਫ༵ʣ ΤϯδχΞ࠾༻தͰ͢ʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠