React Nativeエコシステム概論 / react-native ecosystem

Transcript

1. React NativeΤίγεςϜ֓࿦ NINNO Tech Fest #2 2021.10.22 Yukiya Nakagawa a.k.a

   Nkzn

2. ࣗݾ঺հ • ͳ͔͕ΘΏ͖΍ / ͳ͔͟Μ ʢ34ࡀʣ • ৽ׁࢢ੢۠ࡏॅ • 05݄·Ͱɿ΢Υʔλʔηϧגࣜձࣾ

   
 06݄͔ΒɿגࣜձࣾOneMile Partners 
 11݄͔ΒɿגࣜձࣾϞχΫϧ(↑ͷ࣋ͪג) • ࢿ࢈ӡ༻૬ஊαʔϏεͷཪํ

3. ٕज़ॻయ12͸ 1݄22೔͔Βʂ ΈΜͳٕज़ಉਓࢽΛॻ͜͏ʂ https://techbookfest.org ※ ٕज़ॻయWebαΠτ͸ 
 ɹGraphQL APIαʔόʔͱ 


   ɹReact੡ϑϩϯτΤϯυͰ 
 ɹͰ͖͍ͯ·͢

4. ࠓ೔ͷ͓࿩ • React NativeΛऔΓר͘؀ڥʹ͍ͭͯ • FacebookͷReact NativeνʔϜ͕ίΞϞδϡʔϧͷ։ൃΛ͍ͯ͠Δ • ͦΕҎ֎͸ΦϑΟγϟϧͷ׆ಈ΋ίϛϡχςΟϕʔεͰߦΘΕ͍ͯΔ •

   React Native͸ओʹFacebookͰ͸ͳ͍ਓʑʹΑͬͯ੒Γཱ͍ͬͯΔ • ໘ന͍ܗͷίϛϡχςΟʹͳ͍ͬͯΔ͜ͱΛ఻͍͑ͨ

5. λʔήοτ • ϞόΠϧΞϓϦΛ࡞ͬͯΈ͍ͨJavaScriptΤϯδχΞ • React NativeͷνϡʔτϦΞϧΑΓઌʹਐΉͨΊͷ 
 ͱ͔͔ͬΓ͕ཉ͍͠ํ • Facebook͕ITٕज़ͷ෼໺ͰࣾձʹͲΜͳߩݙΛ͍ͯ͠Δͷ͔

   
 ؾʹͳΔํ

6. React Native • Facebook͕։ൃͨ͠ɺϞόΠϧΞϓϦ޲͚ϑϨʔϜϫʔΫ • https://reactnative.dev/ • ReactͰUIΛߏங͢ΔͱɺAndroid SDK΍iOS SDKͷUIϑϨʔϜϫʔΫ

   Ͱը໘ඳը͕ߦΘΕΔ • ࠐΈೖͬͨ͜ͱΛ͠ͳ͚Ε͹WebΞϓϦʹ͍ۙ։ൃମݧͰϞόΠϧΞ ϓϦΛ࡞ΕΔ

7. https://reactnative.dev/

8. React NativeΛܗ࡞Δ΋ͷ πʔϧ໊ උߟ ݴޠ +BWB4DSJQU 5ZQF4DSJQU
   'MPX
   3FBTPO౳Ͱ
   ੩తܕ෇͚͢Δͷ͕Ұൠత

   ݴޠॲཧܥ +BWB4DSJQU$PSF
   8FC,JU "OESPJEJ04্Ͱ$ ϥΠϒϥϦͱ࣮ͯ͠ߦ
   ಠࣗΤϯδϯ)FSNFTΛ։ൃத ύοέʔδ
   Ϛωʔδϟ /1. :BSO΋Մ Ϗϡʔ
   ϑϨʔϜϫʔΫ 3FBDU ϒϥ΢βͰ࢖ΘΕ͍ͯΔͷͱશ͘ಉ͡΋ͷ ϨϯμϦϯά
   Τϯδϯ w "OESPJE
   BOESPJEWJFX
   BOESPJEXJEHFU
   w J04
   6*,JU ಠࣗΩϟϯόεͳͲ͸࢖Θͣʹ
   04ຊདྷͷ6*πʔϧΩοτͰඳը͢Δ

9. ࢖͑ΔϥΠϒϥϦ • NPMͰެ։͞Ε͍ͯΔJavaScript޲͚ϥΠϒϥϦ͕࢖͑Δ • ϨϯμϦϯάʹDOMʢHTML༝དྷͷཁૉΛ૊Έ߹ΘͤͨϏϡʔϑϨʔ ϜϫʔΫʣΛ࢖͍ͬͯͳ͍ͷͰɺDOM APIʢwindow.documentʣΛ ѻ͏ϥΠϒϥϦ͸࢖͑ͳ͍ʢjQueryͱ͔͸μϝʣ • @apollo/client΍date-fnsͱ͍ͬͨඇUIͳϥΠϒϥϦ͸ૉ௚ʹ࢖͑Δ

10. Α͋͘Δೝࣝ ʮReact NativeͬͯFacebook͕࡞ͬͯΔΜͰ͠ΐʁʯ ͪΐͬͱಛघͳΤίγεςϜͰ ͦ͏ͱ΋ݴ͍੾Εͳ͘ͳ͖͍ͬͯͯΔ

11. React Native v0.60 • 2019೥7݄ͷόʔδϣϯ • 35ݸͷը໘෦඼͕͋ͬͨ

12. Lean CoreϓϩδΣΫτ • React NativeຊମΛখ͘͞͠Α͏ϓϩδΣΫτ 
 https://github.com/facebook/react-native/issues/23313 • ଟ༷ͳը໘෦඼ΛFacebookͷReact NativeνʔϜͷ؅ཧԼͰ

    
 ϝϯς͢Δͷ͕େมʹͳ͖ͬͯͨ • େ൒ͷ෦඼͸׆ൃͳίϛϡχςΟϝϯόʔͷ؅ཧԼʹஔ͍ͨํ͕ 
 ਝ଎ͳվળɾमਖ਼Λߦ͑Δ͸ͣ

13. https://reactnative.dev 3FBDU
    /BUJWFͷ 
 ϑϧλΠϜϝϯόʔ͕͍Δاۀ

14. React Native v0.66 • 2021೥10݄ͷόʔδϣϯ • 35→24ݸͷμΠΤοτʹ੒ޭ

15. ίϛϡχςΟ؅ཧԼͰݩؾʹ։ൃ͕ଓ͍͍ͯ·͢

16. αʔυύʔςΟʹ։ൃΛ೚ͤͯେৎ෉ʁ • React Nativeͷ։ൃओମ͸Facebook͔ΒίϛϡχςΟʹҠͬͨ 
 “Facebook supported, Community Driven” •

    αʔυύʔςΟͰ͸ͳ͘ʮίϛϡχςΟͰ։ൃΛڧྗʹݗҾ͍ͯ͠Δ ਓ෺ / اۀʯͱͯ͠ݟΔ΂͖

17. ੲ͔ΒRelease Note͸ίϛϡχςΟͷ໾ׂ ୅໨ϝϯςφ
    .JDSPTPGUࣾͷ
    LFMTFUࢯ ॳ୅ϝϯςφ
    $BMMTUBDLࣾͷ
    HSBCCPVࢯ

18. ίϛϡχςΟϕʔεͰ޿͕Δ React Nativeͷੈք

19. React Native for Web • Twitter WebͰ࢖ΘΕ͍ͯΔϑϨʔϜϫʔΫ • ϒϥ΢βͰReact Nativeͱಉཻ͡౓ͷίϯϙʔωϯτ͕ར༻Ͱ͖Δ

    • ৄ͘͠͸React Native MaturiͰ 
 ࿩ͨ͠ͷͰݟͯͶ https://youtu.be/OGsR3O4qu6s?t=17996

20. React Native for Windows / macOS • Microsoftࣾ੡ • ϨϯμϦϯάΤϯδϯΛVisual

    C++ʢଟ෼ʣʹࠩ͠ସ͑ͨ • Of fi ce 365ͷ࣮૷ʹ࢖ΘΕ͍ͯΔ https://microsoft.github.io/react-native-windows/

21. Expo • Expoࣾ੡ • Android΍iOSͷϓϩδΣΫτΛ׬શʹӅṭͨ͠ɺWebΞϓϦέʔ γϣϯͷΑ͏ͳ։ൃ؀ڥͰReact NativeΞϓϦ͕࡞ΕΔ • React Native

    for WebΛऔΓࠐΜͩͷͰWebΞϓϦ΋࡞ΕΔ • εϚϗʹಈ࡞֬ೝ༻ͷExpo Go͑͞ೖΕΕ͹ɺ 
 PCଆʹ͸Android SDK΋iOS SDK΋ೖΕͣʹσόοάͰ͖Δ

22. ϋϩϫ͕εοΩϦͯ͠ΔͷͰɺNode.js؀ڥ͕͋Δਓ͸৮ͬͯΈͯ΄͍͠

23. ϒϥ΢β
    PO
    J1BE J1IPOF
     1JYFM
    

24. ͪΐͬͱ଍͚ͨͩ͠ export default function App() { return ( <View style={styles.container}>

    <Text>Open up App.tsx to start working on your app!</Text> <View> <Image source={{ uri: ‘https://example.com/nkzn.jpg', width: 200, height: 200, }} /> </View> <StatusBar style="auto" /> </View> ); }

25. ͔͜͜Βઌ͸܅ͷ໨Ͱ͔֬Ίͯ͘Εʂ