アプリエンジニアが感じたReactNative導入の良し悪し

Transcript

1. εϖʔεϚʔέοτɹ΄Γ 2018/2/26 ΞϓϦΤϯδχΞ͕ײͨ͡ ReactNativeಋೖͷྑ͠ѱ͠
2. ΄Γ εϖʔεϚʔέοτ AndroidΞϓϦΤϯδχΞ ɹˠϑϩϯτΤϯυΤϯδχΞ ࠷೥গΤϯδχΞͰ͢ʢݱࡏʣ ࣗݾ঺հ
3. ֤ϓϩμΫτͷ։ൃ؀ڥ
4. Ϩϯλϧεϖʔε
5. ຽധ
6. ๏ਓ޲͚؅ཧαʔϏε
7. ϨϯλϧεϖʔεɹΞϓϦ
8. ϗετ(ିओ)ɹΞϓϦ
9. 3FBDUͰ։ൃ
   ϨϯλϧεϖʔεXFC
   ຽധXFC
   ϗετΞϓϦ ։ൃ؀ڥΛ·ͱΊΔͱ ωΠςΟϒݴޠͰ։ൃ
   ϨϯλϧεϖʔεΞϓϦ
   J04"OESPJE
10. ຊ೔ͷτϐοΫ
11. ReactNativeΛ࠾༻͢Δ·Ͱ ReactNative͸՝୊Λղܾ͔ͨ͠ ݁ہͲ͕ͬͪྑ͔͔ͬͨ ຊ೔ͷτϐοΫ
12. ਖ਼֬ʹ͸ReactNativeΞϓϦ΋ωΠςΟϒΞϓϦͰ͢ɻ εϥΠυ಺Ͱ͸ iOS / Android ඪ४։ൃͷݴޠ(obj-c / swift / java / kotlin)Ͱ։ൃ͞Εͨ΋ͷΛʮωΠςΟϒΞ ϓϦʯͱͯ۠͠ผ͠·͢ɻ ·͕͖͑
13. ReactNativeΛ࠾༻͢Δ·Ͱ
14. ΤϯδχΞϦιʔεΛྲྀಈతʹ
15. ΤϯδχΞϦιʔεΛྲྀಈతʹ
16. iOS / Android Ͱಉ͜͡ͱΛ܁Γฦ͞ͳ͚Ε͹͍͚ͳ͍ ػೳ௥Ճ ػೳ௥Ճ όάରԠ όάରԠ ػೳ௥Ճ ػೳ௥Ճ σϓϩΠɾςετ σϓϩΠɾςετ
17. iOS x 2 , Android x 2 JSܦݧऀ͋Γ React͕ͬͭΓܦݧऀ 0ਓ ReactNativeܦݧऀ 0ਓ ษڧظ͕ؒ 2weeks ͘Β͍ ΞϓϦνʔϜɹ౰࣌ͷεΩϧηοτ
18. σΟϨΫ τϦߏ੒
    Ͳ͏͢Δ ͪΐͬͱ৮ΕͯΈͯෆ҆ʹײͨ͜͡ͱ 3FEVY
    
    .PC9
    ࢖͑͹0,ʁ "OESPJE ͚ͩ
    ى͜Δόά ඪ४ͷ
    /BWJHBUJPO ͕ශऑ ΫϥογϡϨ ϙʔτ͸ +BWB4DSJQU ࣗ༝͗͢Δ 164)௨஌ J1IPOF9
    ରԠͰ͖Δʁ ͳͲͳͲʜ
19. ΞϓϦνʔϜ಺ͷԹ౓ײ • ϓϩτλΠϓ։ൃͱͯ͠ྑͦ͞͏ • web΋ReactͳͷͰϦιʔε࡟ݮ͸Ͱ ͖Δ͔΋ • ৽نΞϓϦͩ͠௅ઓ͍ͨ͠ • Facebook, Airbnbͷ࣮੷͕͋Δ
20. ΞϓϦνʔϜ಺ͷԹ౓ײ • ࣮૷εϐʔυ͕ຊ౰ʹ্͕Δ͔ٙ໰ • ࠷ॳ͸޻਺͕ݟੵ΋Εͳ͍ • ϓϥοτϑΥʔϜಛ༗ͷόά΍ɺ breaking-changeͷස౓͸Ͳ͏͔ • ωΠςΟϒͷํ͕࣮֬ͳ΋ͷΛ࡞Ε Δ
21. ReactNativeσϏϡʔʂ ΄Μͱʹ՝୊ΛղܾͰ͖ͨͷ͔ ☔
22. ϗετΞϓϦΛϩʔϯν
23. • Ϧιʔε • ΤϯδχΞ • όοΫΤϯυ 1໊ • ΞϓϦ 2໊ ʢiOS/Android 1໊ͣͭʣ • ϚʔΫΞοϓ 1໊ • σβΠφʔ 2໊ • ࣮૷ظؒ • ࣮૷ 2ϲ݄ (όάऔΓؚΉ) • ϚʔΫΞοϓ 1ϲ݄ ࣮૷ظؒͱϦιʔε
24. RestAPIͱͷ௨৴ εϖʔεͷܝࡌɾߋ৽ɾ࡟আ ήετΞϓϦͱͷϩάΠϯ࿈ܞػೳ (ݱࡏiOSͷΈ) FacebookϩάΠϯ Ϧετදࣔ εέδϡʔϧҰཡͱ͔ɺ༧໿Ұཡͱ͔ɺҰཡܥը໘ ήετͱϝοηʔδͷ΍ΓͱΓ react-native-gifted-chat ը૾ / PDFͷΞοϓϩʔυͳͲʢΧϝϥɾΪϟϥϦʔʣ ओͳػೳཁ݅
25. ϛυϧ΢ΣΞ Redux (ϑΝΠϧߏ੒͸DucksʹԊͬͯ) ඇಉظॲཧ͸ async/await φϏήʔγϣϯ react-navigation → react-native-router-flux facebookϩάΠϯ react-native-fbsdk ϓογϡ௨஌ react-native-onesignal ओཁͳϥΠϒϥϦͳͲ
26. ΫϥογϡϨϙʔτ react-native-sentry ڧ੍Ξοϓσʔτ༻ react-native-firebase UIϑϨʔϜϫʔΫ σβΠϯ࠶ݱੑΛॏࢹͯ͠ඇ࠾༻ ੩తղੳπʔϧ Flow / eslint / prettier ओཁͳϥΠϒϥϦͳͲ
27. iOS / Android ޓ͍ͷ͜ͱΛৄࡉ·Ͱ஌Βͳͯ͘΋࡞Εͯ͠·͏ ૝ఆ௨ΓϦιʔε࡟ݮ͕ਐΜͩ ίʔυڞ௨͢͹Β͍͠ ίϯϙʔωϯτΛࢿ࢈ͱͯ͠࢒͠΍͍͢ɺΞτϛοΫσβΠϯ υϝΠϯϩδοΫ͸ଞϓϩμΫτͱڞ௨ԽͰ͖Δ ཪΛฦͤ͹ڞ௨Խͷཻ౓΍ɺӨڹൣғௐ͕ࠪ೰·͍͠ ؾܰʹύοέʔδԽͰ͖Δ ͍͍Ͷ
28. ReactNative։ൃͰಘͨ஌ݟ͕ɺweb։ൃʹ΋׆͖Δ ࠷ۙͷϕϯνϟʔ͞Μʹ͸ଟΊͳҹ৅ ࠓޙReactNativeͷ޿͕Γํɺ੝Γ্͕Γ࣍ୈͰ·ͨมΘ͖ͬͯͦ͏ ReactNative։ൃ͍ͯ͠Δ͜ͱͰগ͠஫໨౓΋ߴ·Δ ͍͍Ͷ ΞϓϦϦϦʔεޙʹɺຽധαʔϏεͷϓϩδΣΫτΛ։࢝ ຽധαʔϏε͸ node.js + React Ͱɺϛυϧ΢ΣΞपΓ΋ࣅͨߏ੒ ࣮ࡍweb։ൃ΁ͷΞαΠϯ΋εϜʔζʹରԠͰ͖ͨ
29. IDEͷԸܙΛड͚͖ͯͨωΠςΟϒΤϯδχΞͳͷͰ… Android Studio, Xcode, Storyboard ωΠςΟϒͰ͸ɺσβΠφʔ΋ύʔπΛݟͳ͕Βฤू ViewΛݟͳ͕ΒฤूͰ͖ͳ͍ ☔ ͏ʙΜ ☔ σόοά͠ʹ͍͘ʢωΠςΟϒൺֱʣ ϒϨʔΫϙΠϯτΛϒϥ΢β͔Βઃఆ͢ΔͳͲ ίϯιʔϧɺσόοάπʔϧͰը໘ྖҬΛ݁ߏऔΒΕΔ ։ൃ؀ڥɾσόοά
30. ReactNativeͷͱ͍͏ΑΓ͸ɺϑϩϯτΤϯυతͳ࿩ web → ReactNative ͸ඇৗʹεϜʔζͩͱࢥ͏ ωΠςΟϒ → ReactNative ͷϋʔυϧ͕Լ͕Δͱಋೖ͠΍͍͔͢΋ ϥΠϒϥϦΛ࢖Θͳ͍ͱ՝୊ղܾͰ͖ͳ͍ ৽͍͠୺຤ɺެࣜͷ৽ػೳͷ௥ै ͨͩ͠ɺҰ౓ֶ΂͹ JavaScript Ͱ web / app / server શ෦ରԠͰ͖ Δͱ͍͏໘͸ͱͯ΋ૉ੖Β͍͠ ৽͍͜͠ͱͳͷͰֶशίετ͸͔͔Δ ☔ ͏ʙΜ ☔
31. ϥΠϒϥϦಋೖͷ൑அج४ ελʔ਺ʁ࣮੷ʁϝϯςφϯεස౓ʁ ϥΠϒϥϦͷ΢ΥονɺධՁ ☔ ͏ʙΜ ☔
32. ·ͱΊɿ݁ہͲ͕ͬͪྑ͔͔ͬͨ
33. ϓϩμΫτͷϥΠϑαΠΫϧ΍Ϧιʔεن໛ʹΑͬͯ ࢖͍෼͚Ε͹ྑ͍ؾ͕͢Δʂ ϋʔυ΢ΣΞґଘͨ͠ΓɺσόΠεͷύϑΥʔϚϯ εΛҾ͖ग़͢ܥͷΞϓϦͳΒωΠςΟϒ͔ʁ ίϯςϯπɺECܥ͸ReactNativeͰे෼ઓ͑ͦ͏ εϖʔεϚʔέοτͰ͸web͕ReactͰ͋Δ͜ͱɺϦ ιʔεঢ়گͳͲ͔Β૬ੑ͕ྑ͔ͬͨ ·ͱΊɿ݁ہͲ͕ͬͪྑ͔͔ͬͨ
34. React / JavaScript / iOS / Android UI / UX ʹ΋ͩ͜ΘΓ͍ͨ ৽ٕज़ఏҊɾಋೖͳͲੵۃతͰ͢ िҰϦϞʔτϫʔΫ੍౓ʢਫ༵೔ʣ ΤϯδχΞ࠾༻தͰ͢ʂ
35. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠