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

by haripo

Slide 1

Slide 1 text

React Native ΞϓϦΛ Web ʹରԠͤ͞Δ @_haripo

Slide 2

Slide 2 text

ΠϯλʔωοτͰ͸ओʹ͸ΓΆͱ໊৐͍ͬͯ·͢ UXJUUFS@IBSJQP ΞϯμʔόʔϋϦϙ !2 ͸͡Ί·ͯ͠ ࢓ࣄͰ͸ओʹػցֶशγεςϜͳͲΛ΍͍ͬͯ·͢ "OESPJEJ04ωΠςΟϒ։ൃܦݧ͸͋Γ·ͤΜ

Slide 3

Slide 3 text

3FBDU/BUJWFͷίϯϙʔωϯτͱ"1*Λ8FCͰಈ͔͢΍ͭͰ͢ !3 3FBDU/BUJWFGPS8FCͱ͸ React Native ͷ  ίϯϙʔωϯτ Web ϒϥ΢β

Slide 4

Slide 4 text

QVZPTJNͱ͍͏ΞϓϦͰJ04"OESPJE8FCରԠ͠·ͨ͠ !4 ࣮ࡍʹ΍ͬͯΈͨ iOS Android Web

Slide 5

Slide 5 text

جຊతʹίʔυϕʔε͕ڞ௨Խ͞ΕͯΔͳ͔Ͱɺ ωΠςΟϒͱ8FCͰ࣮૷͕෼ذ͍ͯ͠Δ෦෼ Λ঺հ͠·͢ !5 ࠓ೔࿩͢಺༰ Ͳͷ͘Β͍ڞ௨ԽͰ͖Δʁ Ͳ͏΍ͬͯϓϥοτϑΥʔϜݻ༗ ίʔυΛ෼ذ͢Δʁ Ͳͷ෦෼Λڞ௨Խ͢Δʁ

Slide 6

Slide 6 text

React Native ΞϓϦΛ Web ʹରԠͤ͞ΔʢͨΊʹඞཁͩͬͨ෼ذʣ

Slide 7

Slide 7 text

!7 ஫ҙ఺ w ·ͩίʔυͷن໛͸খ͍͞Ͱ͢ w QVZPTJN͸ී௨ͷπʔϧΞϓϦͰ͸͋Γ·ͤΜ w ࣮ࡍʹඞཁͩͬͨ෼ذͷ঺հͰ͢ʢҰൠతͳ࿩Ͱ͸ͳ͍ʣ

Slide 8

Slide 8 text

Routing ͱ Navigation ͷ෼ذ

Slide 9

Slide 9 text

w ωΠςΟϒͰ͸SFBDUOBUJWFOBWJHBUJPO w 8FCͰ͸SFBDUSPVUFSࣗ࡞/BWJHBUJPOίϯϙʔωϯτ !9 3PVUJOH/BWJHBUJPO JOEFYKTͰ  SFBDUOBUJWFOBWJHBUJPOΛ࢖͏ JOEFYXFCKTͰ  SFBDUSPVUFSΛ࢖͏

Slide 10

Slide 10 text

Component ͷ෼ذ

Slide 11

Slide 11 text

!11 ίϯϙʔωϯτڞ௨Խઓུ $POUBJOFS Redux ͷ connect ͢Δ΍ͭ ϨΠΞ΢τ୲౰ͷ  ίϯϙʔωϯτ  QBHFTdPSHBNJTNT ͦͷଞͷ຤୺ίϯϙʔωϯτ  BUPNT NPMFDVMFT ϓϥοτϑΥʔϜݻ༗ ڞ௨

Slide 12

Slide 12 text

!12 ίϯϙʔωϯτͷ੾Γସ͑ ωΠςΟϒ͔8FC͔൑ఆͯ͠ίϯϙʔωϯτΛ੾Γସ͑Δॲཧ͸ͳ͍ w ͦ΋ͦ΋ωΠςΟϒͱ8FCͰ3PVUFS͕ҧ͏ w ڞ௨ίϯϙʔωϯτ͔Βݻ༗ίϯϙʔωϯτΛ࢖͍ͬͯͳ͍  ʢඞཁͳ͍͘Β͍3FBDU/BUJWFGPS8FC͕༏लͩͬͨʣ

Slide 13

Slide 13 text

Ϟδϡʔϧͷ෼ذ

Slide 14

Slide 14 text

ϢʔςΟϦςΟతͳϞδϡʔϧʹ෼ذ͕ඞཁ w ετϨʔδ "TZOD4UPSBHF࢖͑͹෼ذෆཁ w ωΠςΟϒ ➜3FBMN w 8FC ➜-PDBM4UPSBHF w JO w ωΠςΟϒ ➜SFBDUOBUJWFJOʢ୺຤ͷݴޠઃఆΛऔಘ͢ΔͷͰXFCͰಈ͔ͳ͍ʣ w 8FC ➜XJOEPXOBWJHBUPSMBOHVBHF !14 Ϟδϡʔϧͷ෼ذ ֦ுࢠͰ෼ذ͢Δͱศར

Slide 15

Slide 15 text

!15 JOͷ࣮૷ྫ JOOBUJWFKT SFBDUOBUJWFJOΛ࢖ͬͨଟݴޠରԠ JOXFCKT 8FCඪ४Λ࢖ͬͨଟݴޠରԠ ࣗಈతʹࢀরઌ͕੾ΓସΘΔ

Slide 16

Slide 16 text

ͦͷଞͷ෼ذ

Slide 17

Slide 17 text

1MBUGPSN04Λ࢖ͬͯJGจͰ෼ذ͢Δ͜ͱ΋Ͱ͖Δ !17 Θ͔ͣͳڍಈͷࠩΛJGͰٵऩ͢Δ 8FCͰ͸PO$MJDLɺωΠςΟϒͰ͸PO1SFTTΛ࢖͏ ʢ༨ஊʣ47(ؔ࿈Ҏ֎Ͱ͜ͷखͷ෼ذ͕ඞཁʹͳͬͨ͜ͱ͸ͳ͍

Slide 18

Slide 18 text

w SFBDUOBUJWFTWH  8FCϏϧυͰ͸SFBDUOBUJWFTWHXFCΛར༻͢Δ w SFBDUOBUJWFWFDUPSJDPOT w SFBDUOBUJWFTFOUSZ  JOEFYKT JOEFYXFCKTͰద੾ʹઃఆ͢ΔͱXFCରԠͰ͖Δ !18 ϥΠϒϥϦͷXFCରԠ XFCQBDLDPOpHKTͰ  SFBDUOBUJWFTWHΛ  SFBDUOBUJWFTWHXFCʹஔ׵ ͦΕͧΕͷϥΠϒϥϦͷ3&"%.&Λࢀߟʹ

Slide 19

Slide 19 text

QVZPTJNΛ8FCରԠ͢Δʹ͋ͨͬͯɺ  Ͳ͏͍ͬͨ෼ذ͕ඞཁʹͳ͔ͬͨΛ঺հ͠·ͨ͠ɻ w 3PVUJOHͱ/BWJHBUJPO  ➜ΤϯτϦϙΠϯτʢJOEFYKT JOEFYXFCKTʣͰ෼ذ w JOͱ4UPSBHF  ➜ιʔεϑΝΠϧ֦ுࢠʢOBUJWFKT XFCKTʣͰ෼ذ w ΠϕϯτʢPO$MJDL PO1SFTTʣͳͲͷࡉ͔͍ࠩҟ  ➜1MBUGPSN04Ͱ෼ذ w ֎෦ͷωΠςΟϒϥΠϒϥϦ  ➜XFCQBDLͰBMJBT ΋͘͠͸ΤϯτϦϙΠϯτͰ෼ذ !19 ·ͱΊ ͜ΕҎ֎͸શ෦8FC ωΠςΟϒڞ௨Ͱ͢

Slide 20

Slide 20 text

IUUQTHJUIVCDPNIBSJQPQVZPTJN w ઈࢍ։ൃதͰ͢ w த్൒୺ͳ5ZQF4DSJQUͰ͢ w ΋ͪΖΜ"OESPJEJ048FCʹϏϧυՄೳͰ͢ w 3FEVDFS4UPSFͷઃܭͱ͔  งғؾͰ΍͍ͬͯΔͷͰίϝϯτͩ͘͞Δͱॿ͔Γ·͢ w ιʔε͸/P-JDFOTFͰ͢ w શ͘ಉ͡ΞϓϦͱ͔ग़͞ΕΔͱࠔΔͷͰ w ৗࣝతͳൣғͰࢀߟʹ͍ͯͩ͘͠͞ w ੕Λ͍ͩ͘͞ !20 ιʔεެ։͠·ͨ͠