React Native New Architecture 移行実践報告

React Native Meetup #23

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 ʹۤ࿑͍ͯ͠·͢ʂ • ΋͠ڵຯ͋Γ·ͨ͠Β͓੠͕͚͍ͩ͘͞ʂ࿩͠·͠ΐ͏ʂ