Save 37% off PRO during our Black Friday Sale! »

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

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

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

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

9a6e4623f9314c5e1fc99635ac9617ed?s=128

Yukiya Nakagawa

October 22, 2021
Tweet

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 "OESPJEBOESPJEWJFX BOESPJEXJEHFU w J046*,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. ϒϥ΢βPOJ1BE 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. ͔͜͜Βઌ͸܅ͷ໨Ͱ͔֬Ίͯ͘Εʂ