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
Cloudflare Workers で作る専門性特化型 MCP サーバー / workers-specialist-mcp
nkzn
1
66
経済メディア編集部の実務に小さく刺さるAI / small-ai-with-editorial
nkzn
2
910
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
1
1.8k
Cloudflareスタックで月間1200万UUの経済メディアにアバター画像生成サービスを作る / Cloudflare Developer Platform for AI avatar service
nkzn
7
3.8k
5分で流し読むCloudflare Developer Platform
nkzn
3
380
次世代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
330
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
nkzn
48
18k
Other Decks in Technology
See All in Technology
プロジェクトマネジメントは不確実性との対話だ
hisashiwatanabe
0
170
AIと描く、未来のBacklog 〜プロジェクト管理の次の10年を想像し、創造するセッション〜
hrm_o25
0
110
コミュニティと計画的偶発性理論 - 出会いが人生を変える / Life-Changing Encounters
soudai
PRO
7
860
文字列の並び順 / String Collation
tmtms
1
110
モノレポにおけるエラー管理 ~Runbook自動生成とチームメンションの最適化
biwashi
0
380
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
1
670
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
140
Intro to Software Startups: Spring 2025
arnabdotorg
0
290
EKS Pod Identity における推移的な session tags
z63d
1
170
Backlog AI アシスタントが切り開く未来
vvatanabe
1
170
Amazon Inspector コードセキュリティで手軽に実現するシフトレフト
maimyyym
0
150
形式手法特論:位相空間としての並行プログラミング #kernelvm / Kernel VM Study Tokyo 18th
ytaka23
3
1.5k
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
It's Worth the Effort
3n
186
28k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Site-Speed That Sticks
csswizardry
10
780
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Rails Girls Zürich Keynote
gr2m
95
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Faster Mobile Websites
deanohume
309
31k
Writing Fast Ruby
sferik
628
62k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
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> ); }
͔͜͜Βઌ܅ͷͰ͔֬Ίͯ͘Εʂ