Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

https://reactnative.dev/

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

ϒϥ΢βPOJ1BE J1IPOF 1JYFM

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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