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

Ce4309ed7774c162065f67c349b60564?s=47 haripo
September 13, 2018

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

Ce4309ed7774c162065f67c349b60564?s=128

haripo

September 13, 2018
Tweet

Transcript

  1. React Native ΞϓϦΛ Web ʹରԠͤ͞Δ @_haripo

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

  3. 3FBDU/BUJWFͷίϯϙʔωϯτͱ"1*Λ8FCͰಈ͔͢΍ͭͰ͢ !3 3FBDU/BUJWFGPS8FCͱ͸ 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 ͢Δ΍ͭ ϨΠΞ΢τ୲౰ͷ
 ίϯϙʔωϯτ
 QBHFTdPSHBNJTNT

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

  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 ΋ͪΖΜ"OESPJEJ048FCʹϏϧυՄೳͰ͢ w 3FEVDFS4UPSFͷઃܭͱ͔
 งғؾͰ΍͍ͬͯΔͷͰίϝϯτͩ͘͞Δͱॿ͔Γ·͢

    w ιʔε͸/P-JDFOTFͰ͢ w શ͘ಉ͡ΞϓϦͱ͔ग़͞ΕΔͱࠔΔͷͰ w ৗࣝతͳൣғͰࢀߟʹ͍ͯͩ͘͠͞ w ੕Λ͍ͩ͘͞ !20 ιʔεެ։͠·ͨ͠