「React Nativeで自社サービスのiOS/Androidアプリをリプレイスした話」 から2年経った今何を思うのか/techplay-mobile-cross-platform-lt-2020-07-15

Transcript

1. ʮReact NativeͰࣗࣾαʔϏεͷiOS/ AndroidΞϓϦΛϦϓϨΠεͨ͠࿩ʯ ͔Β2೥ܦͬͨࠓԿΛࢥ͏ͷ͔ ˏTECH PLAY 2020/07/15 גࣜձࣾιχοΫΨʔσϯ େ໺ߒ੣

2. ࣗݾ঺հ ✦ େ໺ߒ੣ʢͻΖ·͞ʣ ✦ 2015೥͔ΒιχοΫΨʔσϯ ✦ ϓϩάϥϚʔ / ސ໰CTO ✦

   Rails / iOSωΠςΟϒ ✦ ੩Ԭݝ඿দࢢࡏॅ

3. ιχοΫΨʔσϯʹ͍ͭͯ ✦ डୗ։ൃத৺ɾࣗࣾαʔϏε΋ ✦ ϓϩάϥϚʔΛத৺ʹࣾһ50໊΄Ͳ ✦ ೲ඼ͷͳ͍डୗ։ൃ ❖ όʔνϟϧCTO ❖

   ۀ຿ϋοΫ ✦ ϦϞʔτϫʔΫ

4. Remotty

5. ✦ 2017೥3݄ɿ։ൃ։࢝ ✦ 2017೥9݄ɿϦϦʔεʢچόʔδϣϯΛࠩ͠ସ͑ʣ ✦ 2018೥4݄ɿϒϩάʹ·ͱΊͨ ✦ ↑↑2೥લ RemottyͷΞϓϦΛReact NativeͰ

6. None

7. ✦ ྆OSͷωΠςΟϒ൛͕͋ͬͨ ✦ ϒϥ΢β൛ϝΠϯͷͨΊΞϓϦ༏ઌ౓௿Ί ✦ ઐۀͰ͸ͳ͍ ✦ React NativeͰαΫͬͱ΍ͬͯΈΑ͏ ओ୊1ɿReact

   Nativeબ୒ͷഎܠ ʢ˞2ʙ3೥લͷ࿩Ͱ͢ʣ

8. ✦ ։ൃମݧɺྑ͍ʂ☺ ❖ UIΛએݴతʹॻ͚ͯΊͬͪΌྑ͍☺ ❖ Code PushͰͷϦϦʔεͱͬͯ΋ศར☺ ❖ JSON APIͷ݁ՌΛͦͷ··ѻָ͑ͯͪΜ☺

   ओ୊2ɿReact Native͓͓ΉͶྑ͔ͬͨ ʢ˞2ʙ3೥લͷ࿩Ͱ͢ʣ

9. ͋Ε͔Β2೥ޙͷࠓࢥ͏͜ͱ ʢ։ൃ͸͡Ί͔ͯΒ3೥ޙ…ʣ

10. ✦ ։ൃମݧɺྑ͍ʂ☺ ❖ UIΛએݴతʹॻ͚ͯΊͬͪΌྑ͍☺ ❖ Code PushͰͷϦϦʔεͱͬͯ΋ศར☺ ❖ JSON APIͷ݁ՌΛͦͷ··ѻָ͑ͯͪΜ☺

    ։ൃ͸΍͸ΓָͪΜ ౰࣌ͱมΘΒͳ͍ؾ࣋ͪ

11. ϞόΠϧΞϓϦͷ໋॓

12. OS͕ਐԽ͢ΔͱΞϓϦ͕૬ରతʹѱ͘ͳΔ ✦ ͨͱ͑͹͜ΜͳରԠ͠·ͨ͠ ✦ iOS ❖ iPhone Xͷग़ݱʢSafeAreaͷߟྀ ✦ Android

    ❖ Google PlayͰͷ64bitରԠ

13. ✦ OSʹ௥ै͢Δʹ͸React NativeͷΞοϓσʔτ͕ඞਢ ✦ React NativeͷόʔδϣϯΛ্͛Δͱɺࢮ͵ ✦ ྫʣ ❖ 0.59ʹ͋͛ͨΒAndroidͷTextView͕όά͍ͬͯΔ

    ❖ →0.60ʹ͋͛ͨΒϏϧυͷ࢓૊Έ͕มΘΔ ❖ →΍ͬͱ௚ͨ͠Β࣮͸AndroidͷListView͕όάͬ…ʢҎԼུʣ ❖ 0.61ʹͨ͠ΒΑ͏΍͘ಈ͍ͨ Ξοϓσʔτܥ͕େมɾRNຊମฤ

14. ✦ αΫοͱ࡞ΔͨΊɺ࢖͑ͦ͏ͳϥΠϒϥϦ͸࢖༻ ❖ OAuthɹ ❖ ը૾ϐοΧʔ/ϦαΠζ ❖ Mentionઌબ୒UI ✦ ͜Ε΋ͳ͔ͳ͔

    ❖ RNͷ࠷৽όʔδϣϯະରԠʢͦ΋ͦ΋ϝϯςࢭ·ͬͯΔ ‣ ผϥΠϒϥϦʹஔ͖׵͑ ‣ ϓϧϦΫ || fork Ξοϓσʔτܥ͕େมɾϥΠϒϥϦฤ

15. ֶͼ

16. RNͷ෼͚ͩϝϯςۀ͕૿͑Δ /BUJWF
    4%, ϥΠϒϥϦ ΞϓϦ 3FBDU
    /BUJWF ϥΠϒϥϦ ΞϓϦ /BUJWF
    4%, ωΠςΟϒΞϓϦ React

    Native ΞϓϦ ✦ NativeͷਐԽʹ൐͏ϝϯς ✦ React NativeͷਐԽʹ൐͏ϝϯςΒ ※ Expo͸3೥લ͙Β͍ʹͪΒͬͱ৮ͬͯҎདྷ࢖ͬͯ·ͤΜͷͰɺ൑அͰ͖·ͤΜ ✦ NativeͷਐԽʹ൐͏ϝϯς

17. ✦ ϝϯςφϯε͠΍͢͞Λҡ࣋ ❖ ઐۀͰͳ͍ͳΒͳ͓͞Β ✦ ͜·ΊʹΞοϓσʔτ͠Α͏ ❖ ϓϥοτϑΥʔϜͷਐԽʹ߹Θͤͳ͍ ✦ ϥΠϒϥϦ΁ͷґଘΛݮΒͦ͏

    ❖ ಛʹୈࡾऀ੡ͷUIϥΠϒϥϦ͸… ϝϯςφϯεੑ > ։ൃମݧ

18. ࠓ΍ΔͳΒͲ͏͢Δʁ

19. ※ ΞϓϦͷಛੑʹΑΔͷͰࢲ/Remottyͷ৔߹ͱ͍͏͜ͱͰ… ✦ ϝΠϯը໘ʹ͸WebViewΛ࢖༻͢Δ ✦ Push௨஌ͳͲҰ෦ͷػೳ͸ωΠςΟϒͰ࣮૷͢Δ ✦ AndroidͰ͋Ε͹PWAͰ΋Մೳ ✦ Web։ൃͳͷͰɺ։ൃɾϦϦʔεָ͕ʢ1ຊԽʣ

    ✦ ωΠςΟϒ࣮૷ۃখͷͨΊɺϝϯςίετ௿͍ ωΠςΟϒ࣮૷ͷWebViewΞϓϦʹ͢Δ ↓

20. ͲΜͳ৔߹ʹ React NativeΛબͿ͔

21. ✦ React Nativeͷಛ௃ ❖ ։ൃମݧྑ͍ ❖ ೃછΈ͕͋ΔͰ͋Ζ͏JSͰͷ։ൃ ❖ ωΠςΟϒΞϓϦͷϓϥοτϑΥʔϜͷ࢓૊Έɾ؀ڥͷཧղ RNબ୒ͷϝϦοτ͸ґવͱͯ͋͠Δ

22. ✦ ϑϧλΠϜͰऔΓ૊ΊΔ৔߹ ✦ νʔϜͷਓ਺͕े෼ͳ৔߹ ✦ ϥΠϒϥϦͷϝϯςΛ͍ͱΘͳ͍৔߹ ✦ ʢϑϨʔϜϫʔΫΛࣗ෼ͨͪͰ௚ͤΔ৔߹ʣ ܧଓͯ͠ϝϯςφϯεͰ͖Δମ੍

23. ʮReact NativeͰࣗࣾαʔϏεͷiOS/ AndroidΞϓϦΛϦϓϨΠεͨ͠࿩ʯ ͔Β2೥ܦͬͨࠓԿΛࢥ͏ͷ͔ ˏTech Play 2020/07/15 גࣜձࣾιχοΫΨʔσϯ େ໺ߒ੣

24. ͋Γ͕ͱ͏͍͟͝·ͨ͠ ࣭໰͋Ε͹ͥͻ͓ئ͍͠·͢

25. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Twitter: @pi_cha_n Facebook: hiromasa.ohno େ໺ ߒ੣ ʘൃചத!!ʗ גࣜձࣾιχοΫΨʔσϯ