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
990
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
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
1
1.3k
Cloudflareスタックで月間1200万UUの経済メディアにアバター画像生成サービスを作る / Cloudflare Developer Platform for AI avatar service
nkzn
7
3.2k
5分で流し読むCloudflare Developer Platform
nkzn
3
340
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
32
18k
パスキーについて今日時点の僕が知っていること / What I Know About Passkeys as of Today
nkzn
8
2.8k
青い空の歩き方 / Flying in the bluesky
nkzn
1
300
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
nkzn
48
17k
RemixでWeb標準を学んだ1年間 / First year with Remix
nkzn
23
8.5k
純粋培養フルリモート開発組織のワーク&ライフスタイル / monicle full remote style
nkzn
5
4.1k
Other Decks in Technology
See All in Technology
フロントエンドも盛り上げたい!フロントエンドCBとAmplifyの軌跡
mkdev10
2
230
YOLOv10~v12
tenten0727
3
820
Webアプリを Lambdaで動かすまでに考えること / How to implement monolithic Lambda Web Application
_kensh
7
1.2k
Devinで模索する AIファースト開発〜ゼロベースから始めるDevOpsの進化〜
potix2
PRO
5
2.3k
入社後SREチームのミッションや課題の整理をした話
morix1500
1
240
いつも初心者向けの記事に助けられているので得意分野では初心者向けの記事を書きます
toru_kubota
2
260
OPENLOGI Company Profile for engineer
hr01
1
23k
LangfuseでAIエージェントの 可観測性を高めよう!/Enhancing AI Agent Observability with Langfuse!
jnymyk
0
160
MCP Documentation Server @AI Coding Meetup #1
yyoshiki41
2
2.6k
改めて学ぶ Trait の使い方 / phpcon odawara 2025
meihei3
1
550
はじめてのSDET / My first challenge as a SDET
bun913
1
180
20250408 AI Agent workshop
sakana_ai
PRO
14
3.1k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
We Have a Design System, Now What?
morganepeng
52
7.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Writing Fast Ruby
sferik
628
61k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Why Our Code Smells
bkeepers
PRO
336
57k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
52k
Building an army of robots
kneath
304
45k
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> ); }
͔͜͜Βઌ܅ͷͰ͔֬Ίͯ͘Εʂ