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
“パスワードレス認証への道" ユーザー認証の変遷とパスキーの関係
ritou
1
570
はてなの開発20年史と DevOpsの歩み / DevOpsDays Tokyo 2025 Keynote
daiksy
6
1.5k
SDカードフォレンジック
su3158
1
610
YOLOv10~v12
tenten0727
4
940
AIで進化するソフトウェアテスト:mablの最新生成AI機能でQAを加速!
mfunaki
0
140
アセスメントで紐解く、10Xのデータマネジメントの軌跡
10xinc
1
430
Webアプリを Lambdaで動かすまでに考えること / How to implement monolithic Lambda Web Application
_kensh
7
1.3k
Automatically generating types by running tests
sinsoku
2
2.7k
DuckDB MCPサーバーを使ってAWSコストを分析させてみた / AWS cost analysis with DuckDB MCP server
masahirokawahara
0
1.2k
LLM as プロダクト開発のパワードスーツ
layerx
PRO
1
240
Dynamic Reteaming And Self Organization
miholovesq
3
450
はじめてのSDET / My first challenge as a SDET
bun913
1
250
Featured
See All Featured
Embracing the Ebb and Flow
colly
85
4.6k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Making Projects Easy
brettharned
116
6.1k
KATA
mclloyd
29
14k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Site-Speed That Sticks
csswizardry
5
490
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
Navigating Team Friction
lara
184
15k
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> ); }
͔͜͜Βઌ܅ͷͰ͔֬Ίͯ͘Εʂ