Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
KATA
mclloyd
29
14k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Music & Morning Musume
bryan
46
6.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
GitHub's CSS Performance
jonrohan
1030
460k
Bash Introduction
62gerente
608
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
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
ʹͩ͜ΘΓ͍ͨ ৽ٕज़ఏҊɾಋೖͳͲੵۃతͰ͢ िҰϦϞʔτϫʔΫ੍ʢਫ༵ʣ ΤϯδχΞ࠾༻தͰ͢ʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠