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
730
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
1
1.6k
Cloudflareスタックで月間1200万UUの経済メディアにアバター画像生成サービスを作る / Cloudflare Developer Platform for AI avatar service
nkzn
7
3.5k
5分で流し読むCloudflare Developer Platform
nkzn
3
360
次世代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
310
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
nkzn
48
18k
RemixでWeb標準を学んだ1年間 / First year with Remix
nkzn
23
8.6k
Other Decks in Technology
See All in Technology
「伝える」を加速させるCursor術
naomix
0
590
Snowflake Intelligenceで実現できるノーコードAI活用
takumimukaiyama
1
180
Roo CodeとClaude Code比較してみた
pharma_x_tech
1
280
Grafana MCP serverでなんかし隊 / Try Grafana MCP server
kohbis
0
320
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
38k
SwiftUI Transaction を徹底活用!ZOZOTOWN UI開発での活用事例
tsuzuki817
1
800
Kotlinで学ぶ 代数的データ型
ysknsid25
5
1k
「どこにある?」の解決。生成AI(RAG)で効率化するガバメントクラウド運用
toru_kubota
2
290
kubellが挑むBPaaSにおける、人とAIエージェントによるサービス開発の最前線と技術展望
kubell_hr
0
240
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
7.2k
Devin(Deep) Wiki/Searchの活用で変わる開発の世界観/devin-wiki-search-impact
tomoki10
0
260
dbt Cloudの新機能を紹介!データエンジニアリングの民主化:GUIで操作、SQLで管理する新時代のdbt Cloud
sagara
0
190
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Raft: Consensus for Rubyists
vanstee
139
7k
Producing Creativity
orderedlist
PRO
346
40k
The Cost Of JavaScript in 2023
addyosmani
50
8.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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> ); }
͔͜͜Βઌ܅ͷͰ͔֬Ίͯ͘Εʂ