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

NINNO Tech Fest #2でしゃべったLTです

https://ninno-tech-fest.connpass.com/event/226029/

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. ͔͜͜Βઌ͸܅ͷ໨Ͱ͔֬Ίͯ͘Εʂ