React Native アプリを Web に対応させる / Using React Native Web

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 ιʔεެ։͠·ͨ͠

React Native アプリを Web に対応させる / Using React Nati...

React Native アプリを Web に対応させる / Using React Native Web

haripo

Other Decks in Technology

Featured

Transcript