Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Nativeエコシステム概論 / react-native ecosystem
Search
Yukiya Nakagawa
October 22, 2021
Technology
1
1k
React Nativeエコシステム概論 / react-native ecosystem
NINNO Tech Fest #2でしゃべったLTです
https://ninno-tech-fest.connpass.com/event/226029/
Yukiya Nakagawa
October 22, 2021
Tweet
Share
More Decks by Yukiya Nakagawa
See All by Yukiya Nakagawa
経済メディア編集部の実務に小さく刺さるAI / small-ai-with-editorial
nkzn
2
850
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
1
1.6k
Cloudflareスタックで月間1200万UUの経済メディアにアバター画像生成サービスを作る / Cloudflare Developer Platform for AI avatar service
nkzn
7
3.6k
5分で流し読むCloudflare Developer Platform
nkzn
3
370
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
32
18k
パスキーについて今日時点の僕が知っていること / What I Know About Passkeys as of Today
nkzn
8
2.9k
青い空の歩き方 / Flying in the bluesky
nkzn
1
320
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
nkzn
48
18k
RemixでWeb標準を学んだ1年間 / First year with Remix
nkzn
23
8.7k
Other Decks in Technology
See All in Technology
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
PO初心者が考えた ”POらしさ”
nb_rady
0
220
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
0
130
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
310
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
13
6k
Contributing to Rails? Start with the Gems You Already Use
yahonda
2
100
Model Mondays S2E04: AI Developer Experiences
nitya
0
190
インフラ寄りSREの生存戦略
sansantech
PRO
4
1.6k
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
AWS認定を取る中で感じたこと
siromi
1
190
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
140
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Docker and Python
trallard
44
3.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Gamification - CAS2011
davidbonilla
81
5.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Designing Experiences People Love
moore
142
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building an army of robots
kneath
306
45k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Transcript
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 SDKiOS 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/clientdate-fnsͱ͍ͬͨඇUIͳϥΠϒϥϦૉʹ͑Δ
Α͋͘Δೝࣝ ʮReact NativeͬͯFacebook͕࡞ͬͯΔΜͰ͠ΐʁʯ ͪΐͬͱಛघͳΤίγεςϜͰ ͦ͏ͱݴ͍Εͳ͘ͳ͖͍ͬͯͯΔ
React Native v0.60 • 20197݄ͷόʔδϣϯ • 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 • 202110݄ͷόʔδϣϯ • 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ࣾ • AndroidiOSͷϓϩδΣΫτΛશʹӅṭͨ͠ɺWebΞϓϦέʔ γϣϯͷΑ͏ͳ։ൃڥͰReact NativeΞϓϦ͕࡞ΕΔ • React Native
for WebΛऔΓࠐΜͩͷͰWebΞϓϦ࡞ΕΔ • εϚϗʹಈ࡞֬ೝ༻ͷExpo Go͑͞ೖΕΕɺ PCଆʹAndroid SDKiOS SDKೖΕͣʹσόοάͰ͖Δ
ϋϩϫ͕εοΩϦͯ͠ΔͷͰɺNode.jsڥ͕͋Δਓ৮ͬͯΈͯ΄͍͠
ϒϥβPOJ1BE J1IPOF 1JYFM
ͪΐͬͱ͚ͨͩ͠ 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> ); }
͔͜͜Βઌ܅ͷͰ͔֬Ίͯ͘Εʂ