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

ReactNative製iOSAppのNative化への挑戦

 ReactNative製iOSAppのNative化への挑戦

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

Other Decks in Technology

Transcript

  1. React Native੡iOSAppͷ NativeԽ΁ͷ௅ઓ - React Native × SwiftUI -

  2. Outline 0. workhubAppʹ͍ͭͯ 1. ͳͥNativeԽͷಓΛาΉ͜ͱʹ͔ͨ͠ 2. NativeԽͷํ๏࿦ 3. ࣮ࡍʹӡ༻ͯ͠Έͯ෼͔ͬͨ͜ͱ 4.

    ࠓޙͷల๬ 2 2
  3. ࡈ౻ ঑ޛ Shogo Saito 2016 2019 גࣜձࣾϫʔΫεΞϓϦέʔγϣϯζʹೖࣾ ECύοέʔδͷCMSྖҬͷ։ൃΛ୲౰ ϏοτΩʔʹೖࣾ εϚʔτϑΥϯΞϓϦʮbitlockʯͷ্ཱͪ͛ɾ࣮૷

    Λ୲౰ bitkey platformνʔϜ΁ҟಈ إೝূٕज़Λར༻ͨ͠ΞϓϦέʔγϣϯ։ൃͳͲʹ ܞΘΔ 2021 εϚʔτϑΥϯΞϓϦʮworkhubʯͷ νʔϜϚωʔδϟʔͱͯ͠։ൃʹܞΘΔ 2020
  4. workhubAppʹ͍ͭͯ 4 4

  5. 0. workhubAppʹ͍ͭͯ WebαʔϏεɺͦͯ͠ϋʔυ΢ΣΞ܈ͱ࿈ܞ͢Δ͜ͱʹΑͬͯʮಇۭؒ͘ʯͦͷ΋ͷɺ ۭͦͯؒ͠ʹඥͮ͘Ϟϊɾಇ͘ώτͷαϙʔτΛߦ͏εϚʔτϑΥϯΞϓϦɻ 5

  6. 0. workhubAppʹ͍ͭͯ ਎ۙͳεϚʔτϑΥϯΛ༻͍ͯɺιϑτ΢ΣΞͱϋʔυ΢ΣΞ(=σδλϧͱϑΟδΧϧ)ͱΛίωΫτ͠ɺ ೔ʑͷʮಇ͘ʯΛαϙʔτ͢ΔͨΊͷΞϓϦͰ͢ɻ ※ओཁػೳ ɾಇͨ͘ΊͷʮۭؒʯʮϞϊʯͷ༧໿ ɾbitlockγϦʔζͷઃஔ΍ɺղࢪৣͷαϙʔτ ɾQRίʔυ΍ɺRFID(NFC)Λར༻ͨ͠νΣοΫΠϯମݧ ɾإೝূػೳͷαϙʔτͱͯ͠ɺεϚʔτϑΥϯΞϓϦ͔Βͷإొ࿥ ɾetc…

    6
  7. ͳͥNativeԽͷಓΛ
 าΉ͜ͱʹ͔ͨ͠ 7 7

  8. ɾReact Nativeͱ͸ɺFacebook੡ͷMobile Application Framework ɾReact(JavaScript)Λهड़͢Δ͜ͱʹΑͬͯiOS, AndroidΞϓϦΛߏங͢Δ͜ͱ͕Մೳͳ ɹΫϩεϓϥοτϑΥʔϜରԠͷ։ൃFramework ɾWebαʔϏεͰͷ։ൃܦݧ͕͋Δ or JavaScript͕هड़Ͱ͖Ε͹

    iOS/Android ΞϓϦΛ࡞੒Մೳ → ۃ࿦ɺ iOSΤϯδχΞ͕͍ͳ͍؀ڥͰ΋͋Δఔ౓࡞Δ͜ͱ͕Ͱ͖Δ 8 1. ͳͥNativeԽͷಓΛาΉ͜ͱʹ͔ͨ͠
  9. ॳظϩʔϯν࣌ʹ͸༗རʹಇ͘έʔε΋ଟ͍React NativeͰ͋Δ͕ɾɾ
 ɾ࠷৽OS΁ͷ௥ै ɾReact NativeͷVersionUpΛ଴ͨͳ͍ͱiOS / AndroidͷVersionUpʹରԠͰ͖ͳ͍ ɾϥΠϒϥϦ΁ͷڧґଘ ɾiOS /

    Android ͔Β௚ʹఏڙ͞Ε͍ͯΔػೳͷར༻͸ϥΠϒϥϦΛ༻͍ͯͷར༻͕ओͱͳΔ ɾ Bluetooth΍ ΧϝϥىಈɺNFCಡΈऔΓͳͲ΋͜Εʹؚ·ΕΔ ɾBuild͕஗͍ ɾReact Native͕ CocoaPods ͱ͍͏Package Managerʹґଘ͍ͯ͠Δ 9 1. ͳͥNativeԽͷಓΛาΉ͜ͱʹ͔ͨ͠
  10. Ҏ্ͷΑ͏ͳཧ༝͔Βɺ React NativeΛ୤٫͠ iOS NativeͳΞϓϦΛ ࡞੒͢Δํ਑΁ 10 10 1. ͳͥNativeԽͷಓΛาΉ͜ͱʹ͔ͨ͠

  11. ͱ͸͍͍ͭͭ΋... 11 11 1. ͳͥNativeԽͷಓΛาΉ͜ͱʹ͔ͨ͠

  12. ͍͖ͳΓطଘͷAppΛ ·Δ͝ͱํ਑స׵͸೉͍͠ 12 12 1. ͳͥNativeԽͷಓΛาΉ͜ͱʹ͔ͨ͠

  13. ແཧͷͳ͍ൣғͰ ʮ؇΍͔ͳҠߦʯΛਪ͠ਐΊ͍ͨ 13 13 1. ͳͥNativeԽͷಓΛาΉ͜ͱʹ͔ͨ͠

  14. NativeԽͷํ๏࿦ 14 14

  15. 2. NativeԽͷํ๏࿦ ɾͯ͞ɺҰޱʹNativeԽ͍ͯ͘͠ͱ͍ͬͯ΋... ɾϏδωεϩδοΫΛSwiftͰهड़͢Δ ʁ ɾίϯϙʔωϯτͷ࡞੒΋SwiftͰରԠ͢Δ ʁ ɾͲͷΑ͏ʹReact Native͔Βݺͼग़ͤ͹Α͍ͷ͔ ʁ

    etc… ɹɹ ߟ͑Δ͜ͱ͸ଟͦ͏Ͱ͋Δɻ 15
  16. ͔͠͠ߟ͑ͯΈΕ͹... 16 16 2. NativeԽͷํ๏࿦

  17. React Nativeͷػߏ΋ ԿΒ͔ͷܗͰ iOS Nativeʹܨ͕͍ͬͯΔ͸ͣ 17 17 2. NativeԽͷํ๏࿦

  18. ࠔͬͨͱ͖ͦ͜ ެࣜυΩϡϝϯτʂ 18 18 2. NativeԽͷํ๏࿦

  19. 2. NativeԽͷํ๏࿦ ɾRCTBridgeModule Λ༻͍ͨҠߦ͕Մೳ (https://reactnative.dev/docs/native-modules-ios) ɾReact Nativeͷ࢓૊Έʹ৐͔ͬΔʹ͸ɺObjective-CͷϚΫϩΛར༻͕ඞཁ Interface෦෼ʹ͍ͭͯ͸Objective-CͰهड़͢Δඞཁ͕͋Δɻ ɾݺͼग़͍ͨؔ͠਺ͷInterfaceΛఆٛͯ͋͛͠Δ͚ͩͰOK ɾJavaScriptͷasync

    / await΋ར༻Մೳʂ 19 ϏδωεϩδοΫΛSwiftͰهड़͢Δ
  20. 2. NativeԽͷํ๏࿦ 20 JavaScript React Native Bridge RCTBridgeModule Business Logic

    ϏδωεϩδοΫΛSwiftͰهड़͢Δ
  21. 2. NativeԽͷํ๏࿦ ɾRCTViewManagerΛ׆༻ (https://reactnative.dev/docs/native-components-ios) ɾ͏·͘ద༻Ͱ͖Ε͹ ௨ৗͷReact Nativeͷίϯϙʔωϯτͱ ಉ༷ͷ࢖༻ײͰReact NativeʹSwift੡ίϯϙʔωϯτΛ ಋೖͰ͖Δ͸ͣɻ

    21 ίϯϙʔωϯτΛSwiftͰهड़͢Δ
  22. 2. NativeԽͷํ๏࿦ 22 JavaScript React Native Bridge RCTView Manager UIView

    ίϯϙʔωϯτΛSwiftͰهड़͢Δ
  23. 2. NativeԽͷํ๏࿦ ɾઌ΄ͲͷྫͰ͸ MapView ͷΑ͏ͳɺiOS͕ఏڙ͍ͯ͠Δίϯϙʔωϯτͷಋೖྫ͕ ঺հ͞Ε͍ͯ·͕ͨ͠ɾɾ ɾObjective-C ͦͷ··ͷར༻͸ਏͦ͏ ɾࣗ༝ʹViewͷΧελϚΠζ͕͍ͨ͠ etc…

    23 ίϯϙʔωϯτΛSwiftͰهड़͢Δ
  24. ͜͜Ͱ;ͱཱͪࢭ·Δ... 24 24 2. NativeԽͷํ๏࿦

  25. ίϯϙʔωϯτͷ࡞੒ख๏͸ʁ 25 25 2. NativeԽͷํ๏࿦

  26. 2. NativeԽͷํ๏࿦ ɾUIKitʁ SwiftUIʁ → (ՄೳͰ͋Ε͹) SwiftUIΛ࠾༻͍ͨ͠ ※ SwiftUI… ɾApple͕WWDC19ʹͯൃදͨ͠ɺReact

    ͳͲͱಉ༷ͷએݴతͳUIߏஙFramework ɾ10/8ݱࡏ, SwiftUI 3 ͱ͍͏ܗͰఏڙ͞Ε͍ͯΔ ɾUIKitͷ׬શޓ׵ʹ͸ࢸ͍ͬͯͳ͍͕ɺࠓޙ΋੝Μʹ։ൃ͕ߦΘΕ͍ͯͩ͘Ζ͏ 26 ίϯϙʔωϯτΛSwiftͰهड़͢Δ
  27. 2. NativeԽͷํ๏࿦ 27 JavaScript React Native Bridge RCTView Manager UIView

    ίϯϙʔωϯτΛSwiftUIͰهड़͢Δ SwiftUIView
  28. 2. NativeԽͷํ๏࿦ ɾSwiftUIͰ࡞੒ͨ͠View͔Βɺ UIViewΛੜ੒Ͱ͖Ε͹RCTViewManager͕ͦͷ··ద༻Ͱ͖Δ͸ͣ ͦ͜Ͱొ৔͢Δͷ͕ UIHostingController 28 ίϯϙʔωϯτΛSwiftUIͰهड़͢Δ

  29. ɾSwiftUIͰ࡞੒ͨ͠View͔Βɺ ɹUIViewΛੜ੒Ͱ͖Ε͹RCTViewManager͕ͦͷ··ద༻Ͱ͖Δ͸ͣ ͦ͜Ͱొ৔͢Δͷ͕ UIHostingController Objective-Cʹެ։͢ΔͨΊɺ Proxy Class Λ NSObjectͰ࡞੒ 2.

    NativeԽͷํ๏࿦ 29 ίϯϙʔωϯτΛSwiftUIͰهड़͢Δ
  30. 2. NativeԽͷํ๏࿦ ɾ͋ͱ͸௨ৗͷRCTViewManagerͷར༻࣌ͱಉ༷ʹObjective-CͷViewͱͯ͠ฦͯ͋͛͠Ε͹Α͍ 30 ίϯϙʔωϯτΛSwiftUIͰهड़͢Δ

  31. 2. NativeԽͷํ๏࿦ 31 JavaScript React Native Bridge RCTView Manager SwiftUI

    Proxy UIHosting Controller SwiftUI View ίϯϙʔωϯτΛSwiftUIͰهड़͢Δ
  32. લ߲ͷArchitectureͷ࠾༻ʹΑΓɺReact Native͔ΒSwiftUIͷݺͼग़͕͠Մೳʹʂ 32 36 2. NativeԽͷํ๏࿦

  33. ະ஌ͷ಺༰΋ ఏڙ͞Ε͍ͯΔػೳΛಡΈղ͚͹ ϓϩμΫτʹద༻Մೳʂ 33 38 2. NativeԽͷํ๏࿦

  34. ࣮ࡍʹӡ༻ͯ͠Έͯ ෼͔ͬͨ͜ͱ 34 39

  35. ྑ͔ͬͨ఺ 35 40 2. NativeԽͷํ๏࿦

  36. 3. ࣮ࡍʹӡ༻ͯ͠ΈͯΘ͔ͬͨ͜ͱ ʲྑ͔ͬͨ఺ #1ʳ ɾReact NativeͰར༻͍ͯͨ͠ϥΠϒϥϦ܈ΛɺiOSଆʹॲཧΛدͤΔ͜ͱͰෆཁʹͰ͖ΔΑ͏ʹͳΓɺ ϘτϧωοΫͱͳ͍ͬͯͨBuild࣌ؒͷ୹ॖΛ࣮ݱɻ ɾFull React Native࣌୅ʹൺ΂Δͱ10෼Ҏ্ͷ୹ॖΛ࣮ݱʂ

    ɾBluetooth΍NFCػೳɺΧϝϥىಈͳͲ֤छiOSʹґଘ͢Δػೳ܈Λ React NativeͷϥΠϒϥϦʹҰ੾པΒ࣮ͣ૷͕Մೳʹͳͬͨ ɾiOSͷUpdateʹ΋௥ैָ͕ʹ (௚ۙͩͱiOS15ରԠ) ɾଞͷiOSϓϩδΣΫτͰར༻͍ͯͨ͠ࢿ࢈ (Swift੡ࣾ಺ϥΠϒϥϦ)Λ׆༻͠΍͘͢ͳͬͨ ɾView͔Β࡞੒Մೳʹͳͬͨ͜ͱͰࢿ࢈׆༻΁ͷϞνϕʔγϣϯΛಘΒΕ΍͘͢ͳͬͨ ɾXcode / SwiftUIͷϓϨϏϡʔػೳͷ׆༻͕Մೳʹ 36
  37. 3. ࣮ࡍʹӡ༻ͯ͠ΈͯΘ͔ͬͨ͜ͱ ʲྑ͔ͬͨ఺ #2ʳ ɾSwiftUIΛ׆༻Ͱ͖Δͱ͍͏Ϟνϕʔγϣϯ↑ ɾiOSΤϯδχΞͷڠྗΛಘ΍͍͢ঢ়ଶʹ͍͚࣋ͬͯͨ ɾઌͷఆܗతͳ෦෼͚ͩهड़͢Ε͹ɺ͋ͱ͸௨ৗͷSwiftͰॻ͚ΔͨΊ 37

  38. ਏ͍఺... 38 43 2. NativeԽͷํ๏࿦

  39. 3. ࣮ࡍʹӡ༻ͯ͠ΈͯΘ͔ͬͨ͜ͱ ʲਏ͍఺ #1ʳ ɾϥΠϒϥϦͷ࡟ݮʹ͍ͭͯɺͦͷޮՌΛݟΕ͹ૉ੖Β͍͠΋ͷͰ͸͋Δ΋ͷͷɺ (౰વͳ͕Β)ϥΠϒϥϦ͕୲͍࣮ͬͯͨ૷಺༰Λաෆ଍ͳ͘දݱ͢ΔͨΊͷ ஌ݟɾεΩϧ͕ҰఆٻΊΒΕΔɻ →ͱ͖ʹReact NativeͷϥΠϒϥϦ͕ఏڙ͍ͯ͠ΔObjective-CͷίʔυΛಡΈղ͘ඞཁ͋Γ ɾSwiftUIίϯϙʔωϯτΛؚΉViewʹ͓͍ͯ͸ɺReact

    NativeͷHotReload͕༗ޮ׆༻Ͱ͖͓ͯΒͣɺ ʮ RCTViewManagerʹొ࿥ͯ͠Α͍ಉҰ໊শͷView͸1͚ͭͩʯͱ͍͏੍໿ʹҾ͔͔ͬͬͯ͠·͏ →Xcode PreviewΛ׆༻͠ͳ͕ΒؤுΔ͜ͱʹͳΔ͔ 39
  40. 3. ࣮ࡍʹӡ༻ͯ͠ΈͯΘ͔ͬͨ͜ͱ ʲਏ͍఺ #2ʳ ɾ1ͭͷը໘Λ࡞Δͷʹରͯ͠ɺهड़ྔ͸Bridgeͷ෼͚ͩͲ͏ͯ͠΋૿͑ͯ͠·͏ ɾSwift ͔ΒReact NativeͷॲཧΛݺͼग़͍ͨ͠৔߹͸໘౗ →React NativeͷViewଆͰeventEmitterΛ࡞੒͠ɺ

    ɹɹɹɹSwift͔Βpublish͢Δ͜ͱͰsubscribeͤ͞ॲཧ࣮ߦͤ͞Δ ɾఆܕతͳهड़܈Λؒҧ͑ͯ͠·ͬͨ৔߹ɺReact Native͔Β͏·͘ݺͼग़ͤͣ ɹɹʮԿ͕߹க͍ͯ͠ͳ͍͕ͨΊʹViewϨϯμϦϯά͞Εͳ͍ͷ͔ʯͷௐࠪʹ͕͔͔࣌ؒͬͯ͠·͏ 40
  41. ࠓޙͷల๬ 41 46

  42. 4. ࠓޙͷల๬ ɾํ๏࿦ཱ͕֬Ͱ͖͖ͯͨͷͰɺอकੑͷ޲্ͷͨΊSwiftUI΁ͷஔ͖׵͑͸ࠓޙ΋ਵ࣌ߦ͍ͬͯ͘ ɾը໘ / ίϯϙʔωϯτΛSwiftUIͰ࡞੒͢ΔલஈͰඞਢͱͳΔɺObjective-Cهड़ / Proxyʹ͍ͭͯ͸ ɹίʔυͷࣗಈੜ੒Λߦ͏πʔϧΛ࡞੒ͯ͠DXվળΛਤΔ ɾGenesis

    (https://github.com/yonaskolb/Genesis) ɾswift-argument-parser (https://github.com/apple/swift-argument-parser) ɾSwiftଆͷUnitTestͷ֦ॆ ɾγϯϓϧͳMVVMܕ ArchitectureΛ૊ΊΔͷͰɺUnitTest΋ॻ͖΍͘͢ͳͬͨ ɾ࿩୊ͷThe Composable Architecture(TCA)Λ༻͍ͨɺʮSwiftଆͰͷঢ়ଶ؅ཧʯ΁ͷҠߦ 42
  43. ͓஌Βͤ ͍͞͝ʹ 43 48

  44. ͓஌Βͤ ҰॹʹੈͷதΛม͑Δ ΞϓϦΛ࡞Γ·͠ΐ͏ʂ 44 49

  45. 45