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

https://react-native-meetup.connpass.com/event/97634/ 登壇資料です。

Transcript

1. React Native ΞϓϦΛ Web ʹରԠͤ͞Δ @_haripo
2. ΠϯλʔωοτͰ͸ओʹ
   ͸ΓΆ
   ͱ໊৐͍ͬͯ·͢
   UXJUUFS
   @IBSJQP
   Ξϯμʔόʔ
   ϋϦϙ !2 ͸͡Ί·ͯ͠ ࢓ࣄͰ͸ओʹػցֶशγεςϜͳͲΛ΍͍ͬͯ·͢
   "OESPJEJ04
   ωΠςΟϒ։ൃܦݧ͸͋Γ·ͤΜ
3. 3FBDU
   /BUJWF
   ͷίϯϙʔωϯτͱ
   "1*
   Λ
   8FC
   Ͱಈ͔͢΍ͭͰ͢
   !3 3FBDU
   /BUJWF
   GPS
   8FC
   ͱ͸ React Native ͷ
 ίϯϙʔωϯτ Web ϒϥ΢β
4. QVZPTJN
   ͱ͍͏ΞϓϦͰ
   J04"OESPJE8FC
   ରԠ͠·ͨ͠
   !4 ࣮ࡍʹ΍ͬͯΈͨ iOS Android Web
5. جຊతʹίʔυϕʔε͕ڞ௨Խ͞ΕͯΔͳ͔Ͱɺ
   ωΠςΟϒͱ
   8FC
   Ͱ࣮૷͕෼ذ͍ͯ͠Δ෦෼
   Λ঺հ͠·͢ !5 ࠓ೔࿩͢಺༰ Ͳͷ͘Β͍ڞ௨ԽͰ͖Δʁ Ͳ͏΍ͬͯϓϥοτϑΥʔϜݻ༗ ίʔυΛ෼ذ͢Δʁ Ͳͷ෦෼Λڞ௨Խ͢Δʁ
6. React Native ΞϓϦΛ Web ʹରԠͤ͞ΔʢͨΊʹඞཁͩͬͨ෼ذʣ
7. !7 ஫ҙ఺ w ·ͩίʔυͷن໛͸খ͍͞Ͱ͢
   w QVZPTJN
   ͸ී௨ͷπʔϧΞϓϦͰ͸͋Γ·ͤΜ
   w ࣮ࡍʹඞཁͩͬͨ෼ذͷ঺հͰ͢ʢҰൠతͳ࿩Ͱ͸ͳ͍ʣ
8. Routing ͱ Navigation ͷ෼ذ
9. w ωΠςΟϒͰ͸
   SFBDUOBUJWFOBWJHBUJPO
   w 8FC
   Ͱ͸
   SFBDUSPVUFS
   
   ࣗ࡞
   /BWJHBUJPO
   ίϯϙʔωϯτ !9 3PVUJOH
   
   /BWJHBUJPO JOEFYKT
   Ͱ
 SFBDUOBUJWFOBWJHBUJPO
   Λ࢖͏ JOEFYXFCKT
   Ͱ
 SFBDUSPVUFS
   Λ࢖͏
10. Component ͷ෼ذ
11. !11 ίϯϙʔωϯτڞ௨Խઓུ $POUBJOFS
    
    Redux ͷ connect ͢Δ΍ͭ ϨΠΞ΢τ୲౰ͷ
 ίϯϙʔωϯτ
 
    QBHFT
    d
    PSHBNJTNT ͦͷଞͷ຤୺ίϯϙʔωϯτ
 
    BUPNT
    NPMFDVMFT ϓϥοτϑΥʔϜݻ༗ ڞ௨
12. !12 ίϯϙʔωϯτͷ੾Γସ͑ ωΠςΟϒ͔
    8FC
    ͔൑ఆͯ͠ίϯϙʔωϯτΛ੾Γସ͑Δॲཧ͸ͳ͍
    w ͦ΋ͦ΋ωΠςΟϒͱ
    8FC
    Ͱ
    3PVUFS
    ͕ҧ͏
    w ڞ௨ίϯϙʔωϯτ͔Βݻ༗ίϯϙʔωϯτΛ࢖͍ͬͯͳ͍
 ʢඞཁͳ͍͘Β͍
    3FBDU
    /BUJWF
    GPS
    8FC
    ͕༏लͩͬͨʣ
13. Ϟδϡʔϧͷ෼ذ
14. ϢʔςΟϦςΟతͳϞδϡʔϧʹ෼ذ͕ඞཁ
    w ετϨʔδ
    "TZOD4UPSBHF
    ࢖͑͹෼ذෆཁ
    w ωΠςΟϒ
    ➜
    3FBMN
    w 8FC
    
    
    ➜
    -PDBM4UPSBHF
    w JO
    w ωΠςΟϒ
    ➜
    SFBDUOBUJWFJOʢ୺຤ͷݴޠઃఆΛऔಘ͢ΔͷͰ
    XFC
    Ͱಈ͔ͳ͍ʣ
    w 8FC
    
    
    ➜
    XJOEPXOBWJHBUPSMBOHVBHF !14 Ϟδϡʔϧͷ෼ذ ֦ுࢠͰ෼ذ͢Δͱศར
15. !15 JO
    ͷ࣮૷ྫ JOOBUJWFKT
    SFBDUOBUJWFJO
    Λ࢖ͬͨଟݴޠରԠ JOXFCKT
    8FC
    ඪ४Λ࢖ͬͨଟݴޠରԠ ࣗಈతʹࢀরઌ͕੾ΓସΘΔ
16. ͦͷଞͷ෼ذ
17. 1MBUGPSN04
    Λ࢖ͬͯ
    JG
    จͰ෼ذ͢Δ͜ͱ΋Ͱ͖Δ !17 Θ͔ͣͳڍಈͷࠩΛ
    JG
    Ͱٵऩ͢Δ 8FC
    Ͱ͸
    PO$MJDL
    ɺωΠςΟϒͰ͸
    PO1SFTT
    Λ࢖͏ ʢ༨ஊʣ47(
    ؔ࿈Ҏ֎Ͱ͜ͷखͷ෼ذ͕ඞཁʹͳͬͨ͜ͱ͸ͳ͍
18. w SFBDUOBUJWFTWH

    8FC
    ϏϧυͰ͸
    SFBDUOBUJWFTWHXFC
    Λར༻͢Δ
    w SFBDUOBUJWFWFDUPSJDPOT
    w SFBDUOBUJWFTFOUSZ

    JOEFYKT
    JOEFYXFCKT
    Ͱద੾ʹઃఆ͢Δͱ
    XFC
    ରԠͰ͖Δ !18 ϥΠϒϥϦͷ
    XFC
    ରԠ XFCQBDLDPOpHKT
    Ͱ
 SFBDUOBUJWFTWH
    Λ
 SFBDUOBUJWFTWHXFC
    ʹஔ׵ ͦΕͧΕͷϥΠϒϥϦͷ
    3&"%.&
    Λࢀߟʹ
19. QVZPTJN
    Λ
    8FC
    ରԠ͢Δʹ͋ͨͬͯɺ
 Ͳ͏͍ͬͨ෼ذ͕ඞཁʹͳ͔ͬͨΛ঺հ͠·ͨ͠ɻ
    w 3PVUJOH
    ͱ
    /BWJHBUJPO
 ➜
    ΤϯτϦϙΠϯτʢJOEFYKT
    JOEFYXFCKTʣͰ෼ذ
    w JO
    ͱ
    4UPSBHF
 ➜
    ιʔεϑΝΠϧ֦ுࢠʢ OBUJWFKT
    XFCKTʣͰ෼ذ
    w ΠϕϯτʢPO$MJDL
    PO1SFTTʣͳͲͷࡉ͔͍ࠩҟ
 ➜
    1MBUGPSN04
    Ͱ෼ذ
    w ֎෦ͷωΠςΟϒϥΠϒϥϦ
 ➜
    XFCQBDL
    Ͱ
    BMJBT
    ΋͘͠͸ΤϯτϦϙΠϯτͰ෼ذ !19 ·ͱΊ ͜ΕҎ֎͸શ෦
    8FC
    ωΠςΟϒڞ௨Ͱ͢
20. IUUQTHJUIVCDPNIBSJQPQVZPTJN
    w ઈࢍ։ൃதͰ͢
    w த్൒୺ͳ
    5ZQF4DSJQU
    Ͱ͢
    w ΋ͪΖΜ
    "OESPJE
    
    J04
    
    8FC
    ʹϏϧυՄೳͰ͢
    w 3FEVDFS4UPSF
    ͷઃܭͱ͔
 งғؾͰ΍͍ͬͯΔͷͰίϝϯτͩ͘͞Δͱॿ͔Γ·͢
    w ιʔε͸
    /P
    -JDFOTF
    Ͱ͢
    w શ͘ಉ͡ΞϓϦͱ͔ग़͞ΕΔͱࠔΔͷͰ
    w ৗࣝతͳൣғͰࢀߟʹ͍ͯͩ͘͠͞
    w ੕Λ͍ͩ͘͞ !20 ιʔεެ։͠·ͨ͠