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 アプリを Web に対応させる / Using React Nati...
Search
haripo
September 13, 2018
Technology
1
1.2k
React Native アプリを Web に対応させる / Using React Native Web
https://react-native-meetup.connpass.com/event/97634/
登壇資料です。
haripo
September 13, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
Prox Industries株式会社 会社紹介資料
proxindustries
0
340
Model Mondays S2E03: SLMs & Reasoning
nitya
0
220
5min GuardDuty Extended Threat Detection EKS
takakuni
0
180
SpringBoot x TestContainerで実現するポータブル自動結合テスト
demaecan
0
110
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
290
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
220
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
230
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
360
モバイル界のMCPを考える
naoto33
0
190
解析の定理証明実践@Lean 4
dec9ue
1
190
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
280
Lambda Web Adapterについて自分なりに理解してみた
smt7174
5
130
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Become a Pro
speakerdeck
PRO
28
5.4k
The Language of Interfaces
destraynor
158
25k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
For a Future-Friendly Web
brad_frost
179
9.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Navigating Team Friction
lara
187
15k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
Transcript
React Native ΞϓϦΛ Web ʹରԠͤ͞Δ @_haripo
ΠϯλʔωοτͰओʹΓΆͱ໊͍ͬͯ·͢ UXJUUFS@IBSJQP ΞϯμʔόʔϋϦϙ !2 ͡Ί·ͯ͠ ࣄͰओʹػցֶशγεςϜͳͲΛ͍ͬͯ·͢ "OESPJEJ04ωΠςΟϒ։ൃܦݧ͋Γ·ͤΜ
3FBDU/BUJWFͷίϯϙʔωϯτͱ"1*Λ8FCͰಈ͔ͭ͢Ͱ͢ !3 3FBDU/BUJWFGPS8FCͱ React Native ͷ ίϯϙʔωϯτ Web ϒϥβ
QVZPTJNͱ͍͏ΞϓϦͰJ04"OESPJE8FCରԠ͠·ͨ͠ !4 ࣮ࡍʹͬͯΈͨ iOS Android Web
جຊతʹίʔυϕʔε͕ڞ௨Խ͞ΕͯΔͳ͔Ͱɺ ωΠςΟϒͱ8FCͰ࣮͕ذ͍ͯ͠Δ෦ Λհ͠·͢ !5 ࠓ͢༰ Ͳͷ͘Β͍ڞ௨ԽͰ͖Δʁ Ͳ͏ͬͯϓϥοτϑΥʔϜݻ༗ ίʔυΛذ͢Δʁ Ͳͷ෦Λڞ௨Խ͢Δʁ
React Native ΞϓϦΛ Web ʹରԠͤ͞ΔʢͨΊʹඞཁͩͬͨذʣ
!7 ҙ w ·ͩίʔυͷنখ͍͞Ͱ͢ w QVZPTJNී௨ͷπʔϧΞϓϦͰ͋Γ·ͤΜ w ࣮ࡍʹඞཁͩͬͨذͷհͰ͢ʢҰൠతͳͰͳ͍ʣ
Routing ͱ Navigation ͷذ
w ωΠςΟϒͰSFBDUOBUJWFOBWJHBUJPO w 8FCͰSFBDUSPVUFS ࣗ࡞/BWJHBUJPOίϯϙʔωϯτ !9 3PVUJOH/BWJHBUJPO JOEFYKTͰ SFBDUOBUJWFOBWJHBUJPOΛ͏ JOEFYXFCKTͰ
SFBDUSPVUFSΛ͏
Component ͷذ
!11 ίϯϙʔωϯτڞ௨Խઓུ $POUBJOFS Redux ͷ connect ͢Δͭ ϨΠΞτ୲ͷ ίϯϙʔωϯτ QBHFTdPSHBNJTNT
ͦͷଞͷίϯϙʔωϯτ BUPNT NPMFDVMFT ϓϥοτϑΥʔϜݻ༗ ڞ௨
!12 ίϯϙʔωϯτͷΓସ͑ ωΠςΟϒ͔8FC͔ఆͯ͠ίϯϙʔωϯτΛΓସ͑Δॲཧͳ͍ w ͦͦωΠςΟϒͱ8FCͰ3PVUFS͕ҧ͏ w ڞ௨ίϯϙʔωϯτ͔Βݻ༗ίϯϙʔωϯτΛ͍ͬͯͳ͍ ʢඞཁͳ͍͘Β͍3FBDU/BUJWFGPS8FC͕༏लͩͬͨʣ
Ϟδϡʔϧͷذ
ϢʔςΟϦςΟతͳϞδϡʔϧʹذ͕ඞཁ w ετϨʔδ "TZOD4UPSBHF͑ذෆཁ w ωΠςΟϒ ➜3FBMN w 8FC
➜-PDBM4UPSBHF w JO w ωΠςΟϒ ➜SFBDUOBUJWFJOʢͷݴޠઃఆΛऔಘ͢ΔͷͰXFCͰಈ͔ͳ͍ʣ w 8FC ➜XJOEPXOBWJHBUPSMBOHVBHF !14 Ϟδϡʔϧͷذ ֦ுࢠͰذ͢Δͱศར
!15 JOͷ࣮ྫ JOOBUJWFKT SFBDUOBUJWFJOΛͬͨଟݴޠରԠ JOXFCKT 8FCඪ४ΛͬͨଟݴޠରԠ ࣗಈతʹࢀরઌ͕ΓସΘΔ
ͦͷଞͷذ
1MBUGPSN04ΛͬͯJGจͰذ͢Δ͜ͱͰ͖Δ !17 Θ͔ͣͳڍಈͷࠩΛJGͰٵऩ͢Δ 8FCͰPO$MJDLɺωΠςΟϒͰPO1SFTTΛ͏ ʢ༨ஊʣ47(ؔ࿈Ҏ֎Ͱ͜ͷखͷذ͕ඞཁʹͳͬͨ͜ͱͳ͍
w SFBDUOBUJWFTWH 8FCϏϧυͰSFBDUOBUJWFTWHXFCΛར༻͢Δ w SFBDUOBUJWFWFDUPSJDPOT w SFBDUOBUJWFTFOUSZ JOEFYKT JOEFYXFCKTͰదʹઃఆ͢ΔͱXFCରԠͰ͖Δ !18
ϥΠϒϥϦͷXFCରԠ XFCQBDLDPOpHKTͰ SFBDUOBUJWFTWHΛ SFBDUOBUJWFTWHXFCʹஔ ͦΕͧΕͷϥΠϒϥϦͷ3&"%.&Λࢀߟʹ
QVZPTJNΛ8FCରԠ͢Δʹ͋ͨͬͯɺ Ͳ͏͍ͬͨذ͕ඞཁʹͳ͔ͬͨΛհ͠·ͨ͠ɻ w 3PVUJOHͱ/BWJHBUJPO ➜ΤϯτϦϙΠϯτʢJOEFYKT JOEFYXFCKTʣͰذ w JOͱ4UPSBHF ➜ιʔεϑΝΠϧ֦ுࢠʢ OBUJWFKT
XFCKTʣͰذ w ΠϕϯτʢPO$MJDL PO1SFTTʣͳͲͷࡉ͔͍ࠩҟ ➜1MBUGPSN04Ͱذ w ֎෦ͷωΠςΟϒϥΠϒϥϦ ➜XFCQBDLͰBMJBT ͘͠ΤϯτϦϙΠϯτͰذ !19 ·ͱΊ ͜ΕҎ֎શ෦8FC ωΠςΟϒڞ௨Ͱ͢
IUUQTHJUIVCDPNIBSJQPQVZPTJN w ઈࢍ։ൃதͰ͢ w த్ͳ5ZQF4DSJQUͰ͢ w ͪΖΜ"OESPJEJ048FCʹϏϧυՄೳͰ͢ w 3FEVDFS4UPSFͷઃܭͱ͔ งғؾͰ͍ͬͯΔͷͰίϝϯτͩ͘͞Δͱॿ͔Γ·͢
w ιʔε/P-JDFOTFͰ͢ w શ͘ಉ͡ΞϓϦͱ͔ग़͞ΕΔͱࠔΔͷͰ w ৗࣝతͳൣғͰࢀߟʹ͍ͯͩ͘͠͞ w Λ͍ͩ͘͞ !20 ιʔεެ։͠·ͨ͠