React NativeからNativeアプリへ ~スタートアップ企業における 「機能開発と保守性担保」の両立への挑戦~

Transcript

1. 3FBDU/BUJWF͔Β/BUJWFΞϓϦ΁
   dελʔτΞοϓاۀʹ͓͚Δ
   

   ʮػೳ։ൃͱอकੑ୲อʯͷཱ྆΁ͷ௅ઓd
   4IPHP4BJUP
   

   View Slide

2. 0VUMJOF
   1. workhubʹ͍ͭͯ
   2. ελʔτΞοϓʹ͓͚Δ

   ιϑτ΢ΣΞ։ൃʹٻΊΒΕΔ΋ͷ
   3. ؇΍͔ͳNativeԽ
   4. NativeԽʹΑΓ

   ಘΒΕͨ΋ͷ / ೉͔ͬͨ͠఺
   
   

   View Slide

3. ࡈ౻঑ޛ
   4IPHP4BJUP
   
   
   גࣜձࣾϫʔΫεΞϓϦέʔγϣϯζʹೖࣾ
   &$ύοέʔδͷ$.4ྖҬͷ։ൃͳͲΛ୲౰
   ϏοτΩʔʹೖࣾ
   ϞόΠϧΞϓϦʮCJUMPDLʯͷ্ཱͪ͛ɾ࣮૷Λ୲౰
   CJULFZQMBUGPSNνʔϜ΁ҟಈ
   إೝূٕज़Λར༻ͨ͠ΞϓϦέʔγϣϯ։ൃͳͲʹ
   ܞΘΔ
   ϞόΠϧΞϓϦʮXPSLIVCʯͷ
   νʔϜϚωʔδϟʔͱͯ͠։ൃʹܞΘΔ
   
   

   View Slide

4. workhubʹ͍ͭͯ
   
   

   View Slide

5. 1. workhubʹ͍ͭͯ
   
   

   View Slide

6. ελʔτΞοϓʹ͓͚Δ
   ιϑτ΢ΣΞ։ൃʹٻΊΒΕΔ΋ͷ
   
   

   View Slide

7. 2.ɹελʔτΞοϓʹ͓͚Διϑτ΢ΣΞ։ൃʹٻΊΒΕΔ΋ͷ
   
   0→1Λ૑଄͢ΔͨΊͷεϐʔυײΛ࣋ͬͨػೳ։ൃ
   1→10ʹ͢Δʹ͋ͨͬͯาΈΛࢭΊͳ͍ͨΊͷอकੑͷ୲อ
   

   View Slide

8. ʮอकੑʯʹ͍ͭͯ
   
   ෆ۩߹ΛຒΊࠐΈʹ͘͘͢ΔͨΊͷ΋ͷ
   ෆ۩߹ൃੜ࣌ͷӨڹൣғΛ෼͔Γ΍͘͢͢ΔͨΊͷ΋ͷ
   ɹকདྷʹΘͨͬͯ҆શͳػೳ։ൃΛ͠΍͘͢͢Δ

   ܧଓతʹ߈ΊΔɾվળ͢ΔͨΊʹඞཁͳ΋ͷ
   ˠ
   2.ɹελʔτΞοϓʹ͓͚Διϑτ΢ΣΞ։ൃʹٻΊΒΕΔ΋ͷ
   

   View Slide

9. 
   bitlockApp
   workhubApp
   2.ɹελʔτΞοϓʹ͓͚Διϑτ΢ΣΞ։ൃʹٻΊΒΕΔ΋ͷ
   

   View Slide

10. 
    2.ɹελʔτΞοϓʹ͓͚Διϑτ΢ΣΞ։ൃʹٻΊΒΕΔ΋ͷ
    

    View Slide

11. 
    ͜ͷΞϓϦͷอकੑΛܧଓతʹҡ࣋͢Δʹ͸Ͳ͏ͨ͠ΒΑ͍͔ʁ
    2.ɹελʔτΞοϓʹ͓͚Διϑτ΢ΣΞ։ൃʹٻΊΒΕΔ΋ͷ
    

    View Slide

12. 
    /BUJWFԽΛߟҊͨͭ͠ͷཧ༝
    ɾiOSUpdate΁ͷ௥ैੑͷ՝୊ײ
    2.ɹελʔτΞοϓʹ͓͚Διϑτ΢ΣΞ։ൃʹٻΊΒΕΔ΋ͷ
    

    View Slide

13. 
    /BUJWFԽΛߟҊͨͭ͠ͷཧ༝
    ɾiOSUpdate΁ͷ௥ैੑͷ՝୊ײ
    ɾۃྗϥΠϒϥϦʹґଘ͠ͳ͍ٕज़ར༻
    2.ɹελʔτΞοϓʹ͓͚Διϑτ΢ΣΞ։ൃʹٻΊΒΕΔ΋ͷ
    

    View Slide

14. 
    /BUJWFԽΛߟҊͨͭ͠ͷཧ༝
    ɾiOSUpdate΁ͷ௥ैੑͷ՝୊ײ
    ɾۃྗϥΠϒϥϦʹґଘ͠ͳ͍ٕज़ར༻
    ɾBuild࣌ؒͷ஗͞
    2.ɹελʔτΞοϓʹ͓͚Διϑτ΢ΣΞ։ൃʹٻΊΒΕΔ΋ͷ
    

    View Slide

15. 
    /BUJWFԽΛߟҊͨͭ͠ͷཧ༝
    ɾiOSUpdate΁ͷ௥ैੑͷ՝୊ײ
    ɾۃྗϥΠϒϥϦʹґଘ͠ͳ͍ٕज़ར༻
    ɾBuild࣌ؒͷ஗͞
    ɾAndroidΞϓϦͷLaunchʹ͸࣌ؒత༛༧͕͋ͬͨ
    2.ɹελʔτΞοϓʹ͓͚Διϑτ΢ΣΞ։ൃʹٻΊΒΕΔ΋ͷ
    

    View Slide

16. XPSLIVC"QQͷ/BUJWFԽʹ͍ͭͯ
    
    બ୒ࢶ͸2ͭ
    2.ɹελʔτΞοϓʹ͓͚Διϑτ΢ΣΞ։ൃʹٻΊΒΕΔ΋ͷ
    

    View Slide

17. XPSLIVC"QQͷ/BUJWFԽʹ͍ͭͯ
    
    બ୒ࢶ͸2ͭ
    ɾϑϧNativeͰ1͔ΒผΞϓϦͱͯ͠࡞Γ௚͢
    2.ɹελʔτΞοϓʹ͓͚Διϑτ΢ΣΞ։ൃʹٻΊΒΕΔ΋ͷ
    

    View Slide

18. XPSLIVC"QQͷ/BUJWFԽʹ͍ͭͯ
    
    બ୒ࢶ͸2ͭ
    ɾϑϧNativeͰ1͔ΒผΞϓϦͱͯ͠࡞Γ௚͢
    ɾطଘReact NativeΞϓϦΛঃʑʹNativeԽ͢Δ
    2.ɹελʔτΞοϓʹ͓͚Διϑτ΢ΣΞ։ൃʹٻΊΒΕΔ΋ͷ
    

    View Slide

19. ౰࣌ͷνʔϜ؀ڥʹ͍ͭͯ
    ɾ։ൃର৅͸workhubAppͷΈ
    ɾ։ൃϝϯόʔ͸3໊
    XPSLIVC"QQͷ/BUJWFԽʹ͍ͭͯ
    
    2.ɹελʔτΞοϓʹ͓͚Διϑτ΢ΣΞ։ൃʹٻΊΒΕΔ΋ͷ
    

    View Slide

20. ؇΍͔ͳNativeԽ
    
    

    View Slide

21. /BUJWFԽͷํ๏࿦
    
    U
    ػ
    ೳ
    ։
    ൃ
    ͷ
    ݴ
    ޠ
    ׂ
    ߹
    React Native
    Swift
    3.ɹ ؇΍͔ͳNativeԽ
    

    View Slide

22. /BUJWFԽͷํ๏࿦
    
    U
    ػ
    ೳ
    ։
    ൃ
    ͷ
    ݴ
    ޠ
    ׂ
    ߹
    React Native
    Swift
    शಘظ
    3.ɹ ؇΍͔ͳNativeԽ
    

    View Slide

23. /BUJWFԽͷํ๏࿦
    
    U
    ػ
    ೳ
    ։
    ൃ
    ͷ
    ݴ
    ޠ
    ׂ
    ߹
    React Native
    Swift
    शಘظ शख़ظ
    3.ɹ ؇΍͔ͳNativeԽ
    

    View Slide

24. /BUJWFԽͷํ๏࿦
    
    1. ϏδωεϩδοΫΛSwiftʹدͤΔ
    1. ػೳͷগͳ͍ը໘͸ը໘͝ͱSwiftUIʹϦϓϨΠε
    1. ػೳ͕ෳࡶͳը໘͸ίϯϙʔωϯτ୯ҐͰ

    SwiftUIʹϦϓϨΠε
    3.ɹ ؇΍͔ͳNativeԽ
    

    View Slide

25. 
    +BWB4DSJQU 3FBDU/BUJWF
    #SJEHF
    #VTJOFTT
    -PHJD
    3.ɹ ؇΍͔ͳNativeԽ
    

    View Slide

26. 
    +BWB4DSJQU
    axios
    3.ɹ ؇΍͔ͳNativeԽ
    

    View Slide

27. 
    +BWB4DSJQU 3FBDU/BUJWF
    #SJEHF
    #VTJOFTT
    -PHJD
    axios Alamofire
    3.ɹ ؇΍͔ͳNativeԽ
    

    View Slide

28. 
    +BWB4DSJQU 3FBDU
    /BUJWF
    #SJEHF
    3$57JFX
    .BOBHFS
    4XJGU6*7JFX
    3.ɹ ؇΍͔ͳNativeԽ
    

    View Slide

29. 
    workhubApp
    workhubApp
    3.ɹ ؇΍͔ͳNativeԽ
    

    View Slide

30. NativeԽʹΑΓ
    ಘΒΕͨ΋ͷ / ೉͔ͬͨ͠఺
    
    

    View Slide

31. ؇΍͔ͳ/BUJWFԽΛ͢Δ͜ͱͰಘΒΕͨ΋ͷ
    ɾBLE΍NFCɾإೝࣝͳͲͷػೳ܈ΛReact NativeͷϥΠϒϥϦʹ
    Ұ੾པΒ࣮ͣ૷
    ɾϥΠϒϥϦͷSwiftPackageManagerҠߦ: 4ׂ΄Ͳ

    → ͜ΕʹΑΓBuild࣌ؒΛ20෼΄Ͳ·ͰʹॖΊΔ͜ͱʹ੒ޭ
    
    4.ɹ NativeԽʹΑΓಘΒΕͨ΋ͷ
    

    View Slide

32. /BUJWFԽΛਐΊ্͍ͯ͘Ͱো֐ͱͳͬͨ΋ͷ
    
    ɾϥΠϒϥϦҠߦʹ෇͍ͯճΔσάϨͷةݥੑ
    ɾSwiftUIಛ༗ͷUI࡞੒ͷ೉͠͞΍ෆ۩߹΁ͷରॲ
    ɾSwiftUIͷΈͰ͸࡞Γਏ͍UI
    4.ɹ NativeԽʹ͓͍ͯ೉͔ͬͨ͠఺
    

    View Slide

33. ࣌ܥྻͰͷৼΓฦΓ
    
    SwiftUI
    औΓࠐΈ։࢝
    4.ɹ NativeԽʹΑΓಘΒΕͨ΋ͷ
    Bridgeύλʔϯ
    ࢼߦظ
    NativeԽઓུ
    ࿅Γ࢝Ί
    ৽ن։ൃΛ
    SwiftUIʹҠߦ
    طଘViewͷSwiftUI
    ஔ׵
    Concurrency
    ରԠ
    

    View Slide

34. 
    ϓϩμΫτͱνʔϜʹ߹ͬͨख๏Λ࿅Δ͜ͱͰ
    ػೳ։ൃͱอकੑ୲อͷཱ྆͸ୡ੒Մೳ
    4.ɹ ·ͱΊ
    

    View Slide

35. ͓஌Βͤ
    ҰॹʹੈͷதΛม͑Δ
    ϞόΠϧΞϓϦΛ࡞Γ·͠ΐ͏ʂ
    
    
    

    View Slide

36. 
    

    View Slide