React Native New Architecture 移行実践報告

Transcript

1. React Native New Architecture Ҡߦ࣮ફใࠂ React Native Meetup #23 2025/11/26

   େౡ ޫو@sbntaminif

2. ࿩͢͜ͱɾ࿩͞ͳ͍͜ͱ • ࿩͢͜ͱ • New Architectureͷ֓ཁ • Ҡߦ࣮ફͱ࣮ࡍʹى͖ͨ͜ͱ • ࿩͞ͳ͍͜ͱ

   • Repro ͷ SDK ʹ͓͍ͯɺͦ΋ͦ΋Legacy ArchitectureΛ࢖͍ͬͯΔཧ༝ • ։ൃதʹ࢖ͬͨAIͷ࿩

3. ࠓ೔ͷ࿩͸ϒϩάʹ΋ͳ͍ͬͯ·͢ https://tech.repro.io/entry/2025/09/30/090148

4. ࣗݾ঺հ • Reproגࣜձࣾ Development Div. App SDK ΤϯδχΞ • ීஈ͸iOS/AndroidͲͪΒ΋։ൃͯ͠·͢

   • ࠓ೔͸େࡕ͔Βདྷ·ͨ͠ • ීஈ͸ϑϧϦϞʔτͰۈ຿͍ͯ͠·͢ • React Native͸ SDK ͷ։ൃͰ৮Δ͘Β͍ͷ஌ࣝʢͳͷͰ͓खॊΒ͔ʹ͓ئ͍͠·͢ɾɾʣ

5. Reproגࣜձࣾͱ͸ • ϚʔέςΟϯάιϦϡʔγϣϯΛఏڙ͢Δձࣾ • ΫϥΠΞϯτ͕ఏڙ͢ΔΞϓϦʹ SDK Λಋೖ͢Δ͜ͱͰɺϓογϡ௨஌ ΍ΞϓϦ಺ϝοηʔδΛग़͢͜ͱ͕Ͱ͖Δ • iOS/Android

   ΞϓϦ͓Αͼ֤छϓϥοτϑΥʔϜΛαϙʔτ • React Native/Flutter/Unity/Cordova/Cocos2d-x • SDK಺෦Ͱ NativeModules Λ࢖ͬͯ iOS/Android ͷίʔυΛݺͼग़͍ͯ͠ Δ

6. Πϝʔδʢ͜Μͳײ͡ͷ΋ͷΛग़ͤ·͢ʣ ϓογϡ௨஌ ΞϓϦ಺ϝοηʔδ

7. ͳͥ New Architecture αϙʔτ͕ඞཁ͔ • React Native ͷόʔδϣϯΞοϓΛݕ౼͍ͯ͠ΔΫϥΠΞϯτ͔Β ʮόʔδϣϯΞοϓΛߦ͏ͱSDKͰΤϥʔ͕ൃੜ͢Δʯͱ໰͍߹ΘͤΛड͚Δ •

   όʔδϣϯΞοϓΛߦ͏͜ͱͰ New Architecture ͷϑϥά͕ONʹͳΓ NativeModules ͷݺͼग़͠ͰΤϥʔʹͳ͍ͬͯͨ • NativeModules ʹ୅Θͬͯ৽࣮͘͠૷͞Εͨ TurboModules ͷରԠ͕ඞਢ → New Architecture ΁ͷҠߦ͕ඞཁʹͳͬͨ • ʢͪͳΈʹʣNew Architecture ͸ React Native v0.74 ͔ΒσϑΥϧτͰ༗ޮʹͳ͍ͬͯΔ

8. ʢཁ๬͋Ε͹ʣNew Architecture ͷ؆୯ͳઆ໌ • New Architecture ͱ͸ɺ React Native Λߴ଎Խɾ҆ఆԽͤ͞ΔͨΊ

   ͷࠜຊతͳ࠶ઃܭʢGeminiஊʣ • ैདྷͷੑೳͷϘτϧωοΫͩͬͨʮϒϦοδʯΛͳ͘͠ɺ JavaScript ͱ Native Code ͕௚઀௨৴͢Δ͜ͱͰ࣮ݱ • ͜ͷϒϩά͕ͱͯ΋ࢀߟʹͳΓ·͢ʂʢਤ΋͋Γ·͢ʂʣ • https://tomoima525.hatenablog.com/entry/2020/12/18/183556

9. New Architecture Λ αϙʔτ͢Δ·ͰͷϙΠϯτ

10. New Architecture Λαϙʔτ͢Δ·Ͱͷ ϙΠϯτᶃ: Codegen • React Native ͷ JavaScript

    ίʔυͱ Native Code ͷʮܕʯΛࣗಈͰ ಉظͤ͞Δ࢓૊Έ • ։ൃऀ͸ Native Ͱ࣮ߦ͍ͨ͠ίʔυΛʢޙग़͢ΔʣSpecΛ༻ҙ͢Δ ͚ͩͰͭͳ͗ࠐΈΛߦͬͯ͘ΕΔ • ۩ମతʹ͸ɺϏϧυ࣌ʹ C++ ͷϒϦοδίʔυΛࣗಈੜ੒͢Δ https://reactnative.dev/docs/the-new-architecture/what-is-codegen

11. New Architecture Λαϙʔτ͢Δ·Ͱͷ ϙΠϯτᶃ: Codegen • ࢖͍ํ: con fi g.json

    ʹ Codegen ͷ؀ڥΛઃఆ͢Δ -> Ϗϧυ࣮ߦ࣌ʹίʔυΛࣗಈੜ੒ͯ͘͠ΕΔʢ࣍ϖʔδʣ

12. New Architecture Λαϙʔτ͢Δ·Ͱͷ ϙΠϯτᶃ: Codegen iOS(C++ and Obj-c) Android(C++ and

    Java)

13. New Architecture Λαϙʔτ͢Δ·Ͱͷ ϙΠϯτᶄ: Spec • JavaScript ͱ Native ؒͰ΍ΓऔΓ͢Δػೳ΍ϓϩύςΟͷ࢓༷Λఆ

    ٛͨ͠ɺ TypeScript/Flow Ͱهड़ͨ͠ܕఆٛϑΝΠϧ • ͨͩ͠ TypeScript αϙʔτ͸ϕʔλ൛ʢυΩϡϝϯτະΞοϓσʔτͷՄೳੑ͋Γʣ • Codegen ͸͜ͷϑΝΠϧΛݩʹ C++/Native Code Λੜ੒͢Δ • SDK Λಋೖͨ͠ΞϓϦ͸ Spec ϑΝΠϧʹఆٛ͞Εͨϝιου/ϓϩ ύςΟΛݺͼग़͢͜ͱͰ Native Code Λ࣮ߦͰ͖Δ

14. New Architecture Λαϙʔτ͢Δ·Ͱͷ ϙΠϯτᶄ: Spec ίʔυྫ

15. New Architecture Λαϙʔτ͢Δ·Ͱͷ ϙΠϯτᶅ: Legacy Architectureͱͷޙํޓ׵ • લఏ: Legacy Architecture

    ͱ New Architecture ͸ཱ྆Ͱ͖ͳ͍ • New Architecture ϑϥά͕OFFʹͳ͍ͬͯΔΞϓϦ͸ NativeModules ͕ಈ࡞͢Δඞཁ͕͋Δ • υΩϡϝϯτΛࢀߟʹɺ iOS/Android × Legacy/New Architecture ͦΕͧΕ෼͚ͯίʔυΛॻ͘ඞཁ͕͋Δʢ࣍ϖʔδʣ • Spec ϑΝΠϧ͸ڞ௨ͰOK

16. New Architecture Λαϙʔτ͢Δ·Ͱͷ ϙΠϯτᶅ: Legacy Architecture ͱͷޙํޓ׵ iOS ίʔυྫʢࠨ͕headerϑΝΠϧɺӈ͕࣮૷ϑΝΠϧʣ

17. New Architecture Λαϙʔτ͢Δ·Ͱͷ ϙΠϯτᶅ: Legacy Architecture ͱͷޙํޓ׵ Android ίʔυྫ: build.gradle

18. New Architecture Λαϙʔτ͢Δ·Ͱͷ ϙΠϯτᶅ: Legacy Architecture ͱͷޙํޓ׵ Android ίʔυྫ: BridgePackage

19. New Architecture Λαϙʔτ͢Δ·Ͱͷ ϙΠϯτᶅ: Legacy Architecture ͱͷޙํޓ׵ Android ίʔυྫ: Legacy

    Architecture Module

20. New Architecture Λαϙʔτ͢Δ·Ͱͷ ϙΠϯτᶅ: Legacy Architecture ͱͷޙํޓ׵ Android ίʔυྫ: New

    Architecture Module

21. ։ൃ࣮ફใࠂ

22. ։ൃ࣮ફใࠂ ͦͷᶃ: Codegen ΁ͷཧղ͕๡͍͠ • Codegen ͕Կ͔͠Βͷίʔυੜ੒Λߦ͏͜ͱ͸Θ͔Δ͕ɺίʔυΛ ੜ੒͠ͳ͍ͱຊମ͕ಈ͔ͳ͍ͷ͔ɺϏϧυ͢Δ౓ʹੜ੒͞ΕΔͷ͔ɺ Կ΋Θ͔Βͳ͍ •

    υΩϡϝϯτʹ͸Ϗϧυ༻ίϚϯυ͕༻ҙ͞Ε͍ͯΔ͕ɺͦΕҎ্ ͷ͜ͱ͸ॻ͔Ε͍ͯͳ͍ • ಈ͔͠ͳ͕Βࢼ͔͢͠ͳ͍

23. ։ൃ࣮ફใࠂ ͦͷᶄ: ೔ຊޠͷهࣄ͕ݟ͔ͭΒͳ͍ • ʢࣗ෼͕ௐ΂ͨݶΓʣNew Architecture + ֎෦ϥΠϒϥϦͷҠߦྫ͸ ΄ͱΜͲݟ͔ͭΒͳ͔ͬͨ •

    Firebase΍Brazeʢڝ߹ʣͷιʔεΛݟͯษڧ͍ͯͨ͠ • ಛʹޙํޓ׵ʹ͍ͭͯɺҠߦྫ͕ݟ͔ͭΒͳ͍ • υΩϡϝϯτ͸͋Δʹ͸͋Δͷ͕ͩɺΤϥʔ͕ൃੜͨ࣌͠ʹͲ͏͢ ΂͖͔Λಛʹۤ࿑ͨ͠

24. ։ൃ࣮ફใࠂ ͦͷᶅ: ফ͍͑ͯ͘αϯϓϧͱυΩϡϝϯτ • ։ൃ౰ॳʹࢀߟʹ͍ͯͨ͠ެ͕ࣜఏڙ͍ͯ͠ΔαϯϓϧυΩϡϝϯτ • https://github.com/react-native-community/ RNNewArchitectureLibraries/tree/feat/back-turbomodule • ͨͩ͠ݹ͍ͷͰಈ࡞͠ͳ͍෦෼͕͋Δʢޙड़ʣ

    • ࠓ೥7/1ʢ։ൃ్தʣʹϦϙδτϦ͝ͱΞʔΧΠϒ͞ΕΔ😭

25. ։ൃ࣮ફใࠂ ͦͷᶅ: ফ͍͑ͯ͘αϯϓϧͱυΩϡϝϯτ • ͖͔͚ͬ: JavaScriptͰ΋ New Architecture ͔Ͳ͏͔൑ఆ͍ͨ͠ •

    index.js Ͱ New Architecture ͔Ͳ͏͔൑ఆ͢ΔͨΊͷॲཧ -> global.__turboModuleProxy • ௐࠪͨ͠ͱ͜ΖˢΛ࢖ͬͯ൑ఆ͍ͯ͠ΔWebهࣄ΍Geminiͷճ౴͕ ग़ͯ͘Δ

26. ։ൃ࣮ફใࠂ ͦͷᶅ: ফ͍͑ͯ͘αϯϓϧͱυΩϡϝϯτ • ࣮͸2024೥ͷ࣌఺Ͱglobal.__turboModuleProxy͕࡟আ • PR: https://github.com/facebook/react-native/pull/47598 • ࠷ऴతʹ͸

    global.nativeFabricUIManager != null Ͱ൑ఆ

27. Gemini͘Μ΋ఘΊΔϨϕϧ ʢࡾ೔ௐ΂ͯΑ͏΍͘ḷΓண͖·ͨ͠ʣ

28. ։ൃ࣮ફใࠂ ͦͷᶆ: ख୳ΓͰίʔυΛॻ͍͍ͯ͘ • TypeScript Ͱॻ͔Εͨ Spec ͱ Native Code

    ͷܕΛ߹Θͤͳ͍ͱੜ੒ ͞ΕͨΫϥεΛ Override Ͱ͖ͳ͍ • ΫΠζ: Codegen ͕ TypeScript ͔Β Java ʹίʔυม׵͢Δ࣌ TypeScript ͷ Numberܕ͸Կʹม׵͞ΕΔͰ͠ΐ͏ʁ ᶃint ᶄdouble ᶅNumber • ͜Ε͸υΩϡϝϯτʹॻ͔Ε͍ͯͨʢ͚Ͳؾ͚ͮͳ͔ͬͨʣ

29. ։ൃ࣮ફใࠂ ͦͷᶇ: ޙํޓ׵Λҡ࣋ͭͭ͠ίʔυΛॻ͘ • SDKʹ༻ҙ͍ͯͨ͠ϝιου͸͜Ε·Ͱ௨Γݺͼग़ͤΔඞཁ͕͋Δ • Ұ෦ index.js ͰσʔλΛՃ޻͔ͯ͠Β Native

    ʹ౉͍ͯ͠Δॲཧ͕ ͋ͬͨ • New Architecture ͸ Spec Ͱఆٛͨ͠ϝιουͱ௚௨Ͱ౉͍ͯ͠Δ • ղܾࡦ: Legacy Architecture ઐ༻ͷ Native Code Λ༻ҙ͠ɺ index.js Ͱ෼ذ͢Δ

30. ·ͱΊ

31. ·ͱΊ • গͳ͍৘ใͱ Gemini ͷ͓͔͛ͰͳΜͱ͔։ൃ͢Δ͜ͱ͕Ͱ͖ͨ • React Native Ͱ Native

    पΓΛ৮Δ͜ͱ͕͋Ε͹ ੋඇͱ΋ࢀߟʹ͍ͯͩ͘͠͞ • ͓Αͦ2ϲ݄ఔ౓ͰϦϦʔε·ͰͰ͖·ͨ͠ • ͜ͷ஌ݟ͕ଞͷ։ൃऀͷࢀߟʹͳΓɺΑΓ։ൃ͕ૣ͘ͳΔ͜ͱΛ ف͍ͬͯ·͢🙏

32. We Are Hiring • SDK ͷ։ൃ͕Ͱ͖ΔΤϯδχΞΛ୳͍ͯ͠·͢ʂ • ࠓճॳࢀՃͰ͕͢ɺ͍ΖΜͳϓϥοτϑΥʔϜΛ৮Δ͜ͱͰͦΕͧ ΕͷษڧձʹࢀՃͰ͖·ͨ͠ʂ •

    ௚ۙͰ΋ Flutter ΍ Unity ʹۤ࿑͍ͯ͠·͢ʂ • ΋͠ڵຯ͋Γ·ͨ͠Β͓੠͕͚͍ͩ͘͞ʂ࿩͠·͠ΐ͏ʂ