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

ࣗݾ঺հ • ͳ͔͕ΘΏ͖΍ / ͳ͔͟Μ ʢ34ࡀʣ • ৽ׁࢢ੢۠ࡏॅ • 05݄·Ͱɿ΢Υʔλʔηϧגࣜձࣾ 
 06݄͔ΒɿגࣜձࣾOneMile Partners 
 11݄͔ΒɿגࣜձࣾϞχΫϧ(↑ͷ࣋ͪג) • ࢿ࢈ӡ༻૬ஊαʔϏεͷཪํ

ٕज़ॻయ12͸ 1݄22೔͔Βʂ ΈΜͳٕज़ಉਓࢽΛॻ͜͏ʂ https://techbookfest.org ※ ٕज़ॻయWebαΠτ͸ 
 ɹGraphQL APIαʔόʔͱ 
 ɹReact੡ϑϩϯτΤϯυͰ 
 ɹͰ͖͍ͯ·͢

ࠓ೔ͷ͓࿩ • React NativeΛऔΓר͘؀ڥʹ͍ͭͯ • FacebookͷReact NativeνʔϜ͕ίΞϞδϡʔϧͷ։ൃΛ͍ͯ͠Δ • ͦΕҎ֎͸ΦϑΟγϟϧͷ׆ಈ΋ίϛϡχςΟϕʔεͰߦΘΕ͍ͯΔ • React Native͸ओʹFacebookͰ͸ͳ͍ਓʑʹΑͬͯ੒Γཱ͍ͬͯΔ • ໘ന͍ܗͷίϛϡχςΟʹͳ͍ͬͯΔ͜ͱΛ఻͍͑ͨ

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

React Native • Facebook͕։ൃͨ͠ɺϞόΠϧΞϓϦ޲͚ϑϨʔϜϫʔΫ • https://reactnative.dev/ • ReactͰUIΛߏங͢ΔͱɺAndroid SDK΍iOS SDKͷUIϑϨʔϜϫʔΫ Ͱը໘ඳը͕ߦΘΕΔ • ࠐΈೖͬͨ͜ͱΛ͠ͳ͚Ε͹WebΞϓϦʹ͍ۙ։ൃମݧͰϞόΠϧΞ ϓϦΛ࡞ΕΔ

https://reactnative.dev/

React NativeΛܗ࡞Δ΋ͷ πʔϧ໊ උߟ ݴޠ +BWB4DSJQU 5ZQF4DSJQU 'MPX 3FBTPO౳Ͱ ੩తܕ෇͚͢Δͷ͕Ұൠత ݴޠॲཧܥ +BWB4DSJQU$PSF 8FC,JU "OESPJEJ04্Ͱ$ϥΠϒϥϦͱ࣮ͯ͠ߦ ಠࣗΤϯδϯ)FSNFTΛ։ൃத ύοέʔδ Ϛωʔδϟ /1. :BSO΋Մ Ϗϡʔ ϑϨʔϜϫʔΫ 3FBDU ϒϥ΢βͰ࢖ΘΕ͍ͯΔͷͱશ͘ಉ͡΋ͷ ϨϯμϦϯά Τϯδϯ w "OESPJEBOESPJEWJFX BOESPJEXJEHFU w J046*,JU ಠࣗΩϟϯόεͳͲ͸࢖Θͣʹ 04ຊདྷͷ6*πʔϧΩοτͰඳը͢Δ

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

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

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

Lean CoreϓϩδΣΫτ • React NativeຊମΛখ͘͞͠Α͏ϓϩδΣΫτ 
 https://github.com/facebook/react-native/issues/23313 • ଟ༷ͳը໘෦඼ΛFacebookͷReact NativeνʔϜͷ؅ཧԼͰ 
 ϝϯς͢Δͷ͕େมʹͳ͖ͬͯͨ • େ൒ͷ෦඼͸׆ൃͳίϛϡχςΟϝϯόʔͷ؅ཧԼʹஔ͍ͨํ͕ 
 ਝ଎ͳվળɾमਖ਼Λߦ͑Δ͸ͣ

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

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

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

αʔυύʔςΟʹ։ൃΛ೚ͤͯେৎ෉ʁ • React Nativeͷ։ൃओମ͸Facebook͔ΒίϛϡχςΟʹҠͬͨ 
 “Facebook supported, Community Driven” • αʔυύʔςΟͰ͸ͳ͘ʮίϛϡχςΟͰ։ൃΛڧྗʹݗҾ͍ͯ͠Δ ਓ෺ / اۀʯͱͯ͠ݟΔ΂͖

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

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

React Native for Web • Twitter WebͰ࢖ΘΕ͍ͯΔϑϨʔϜϫʔΫ • ϒϥ΢βͰReact Nativeͱಉཻ͡౓ͷίϯϙʔωϯτ͕ར༻Ͱ͖Δ • ৄ͘͠͸React Native MaturiͰ 
 ࿩ͨ͠ͷͰݟͯͶ https://youtu.be/OGsR3O4qu6s?t=17996

React Native for Windows / macOS • Microsoftࣾ੡ • ϨϯμϦϯάΤϯδϯΛVisual C++ʢଟ෼ʣʹࠩ͠ସ͑ͨ • Of fi ce 365ͷ࣮૷ʹ࢖ΘΕ͍ͯΔ https://microsoft.github.io/react-native-windows/

Expo • Expoࣾ੡ • Android΍iOSͷϓϩδΣΫτΛ׬શʹӅṭͨ͠ɺWebΞϓϦέʔ γϣϯͷΑ͏ͳ։ൃ؀ڥͰReact NativeΞϓϦ͕࡞ΕΔ • React Native for WebΛऔΓࠐΜͩͷͰWebΞϓϦ΋࡞ΕΔ • εϚϗʹಈ࡞֬ೝ༻ͷExpo Go͑͞ೖΕΕ͹ɺ 
 PCଆʹ͸Android SDK΋iOS SDK΋ೖΕͣʹσόοάͰ͖Δ

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

ϒϥ΢βPOJ1BE J1IPOF 1JYFM

ͪΐͬͱ଍͚ͨͩ͠ export default function App() { return ( Open up App.tsx to start working on your app! ); }

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