Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

More Decks by 株式会社ビットキー / Bitkey Inc.

Other Decks in Technology

Transcript

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

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

    View full-size slide

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

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

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

    View full-size slide

  3. ࡈ౻঑ޛ
    4IPHP4BJUP


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

    View full-size slide

  4. workhubʹ͍ͭͯ

    View full-size slide

  5. 1. workhubʹ͍ͭͯ

    View full-size slide

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

    View full-size slide

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

    0→1Λ૑଄͢ΔͨΊͷεϐʔυײΛ࣋ͬͨػೳ։ൃ
    1→10ʹ͢Δʹ͋ͨͬͯาΈΛࢭΊͳ͍ͨΊͷอकੑͷ୲อ

    View full-size slide

  8. ʮอकੑʯʹ͍ͭͯ

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

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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide

  16. XPSLIVC"QQͷ/BUJWFԽʹ͍ͭͯ

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

    View full-size slide

  17. XPSLIVC"QQͷ/BUJWFԽʹ͍ͭͯ

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

    View full-size slide

  18. XPSLIVC"QQͷ/BUJWFԽʹ͍ͭͯ

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

    View full-size slide

  19. ౰࣌ͷνʔϜ؀ڥʹ͍ͭͯ
    ɾ։ൃର৅͸workhubAppͷΈ
    ɾ։ൃϝϯόʔ͸3໊
    XPSLIVC"QQͷ/BUJWFԽʹ͍ͭͯ

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

    View full-size slide

  20. ؇΍͔ͳNativeԽ

    View full-size slide

  21. /BUJWFԽͷํ๏࿦

    U
    ػ

    ։

    ͷ
    ݴ
    ޠ
    ׂ
    ߹
    React Native
    Swift
    3.ɹ ؇΍͔ͳNativeԽ

    View full-size slide

  22. /BUJWFԽͷํ๏࿦

    U
    ػ

    ։

    ͷ
    ݴ
    ޠ
    ׂ
    ߹
    React Native
    Swift
    शಘظ
    3.ɹ ؇΍͔ͳNativeԽ

    View full-size slide

  23. /BUJWFԽͷํ๏࿦

    U
    ػ

    ։

    ͷ
    ݴ
    ޠ
    ׂ
    ߹
    React Native
    Swift
    शಘظ शख़ظ
    3.ɹ ؇΍͔ͳNativeԽ

    View full-size slide

  24. /BUJWFԽͷํ๏࿦

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

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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

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

    → ͜ΕʹΑΓBuild࣌ؒΛ20෼΄Ͳ·ͰʹॖΊΔ͜ͱʹ੒ޭ

    4.ɹ NativeԽʹΑΓಘΒΕͨ΋ͷ

    View full-size slide

  32. /BUJWFԽΛਐΊ্͍ͯ͘Ͱো֐ͱͳͬͨ΋ͷ

    ɾϥΠϒϥϦҠߦʹ෇͍ͯճΔσάϨͷةݥੑ
    ɾSwiftUIಛ༗ͷUI࡞੒ͷ೉͠͞΍ෆ۩߹΁ͷରॲ
    ɾSwiftUIͷΈͰ͸࡞Γਏ͍UI
    4.ɹ NativeԽʹ͓͍ͯ೉͔ͬͨ͠఺

    View full-size slide

  33. ࣌ܥྻͰͷৼΓฦΓ

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

    View full-size slide


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

    View full-size slide

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


    View full-size slide