ReactNative製iOSAppのNative化への挑戦

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