React Native Matsuri 2021

Transcript

1. Takeru Chuganji 2021/10/02 10:10‐10:50 ϝϧΧϦUS͕ϞόΠϧΞϓϦΛ React NativeͰ࡞Γ௚͍ͯ͠Δ࿩ React Native Matsuri

   2021

2. Takeru Chuganji Software Engineer Mercari, Inc. chuganzy

3. None
4. None

5. Tokyo Japan Palo Alto / Portland / Boston United States

6. Tokyo Japan Palo Alto / Portland / Boston United States

   ϑϧ ϦϞʔτԽ

7. $15 $15 $15 $15 $15 $15 $15 $15 $15 $15

   $15 $15 What are you looking for? Category Home Chat My Page Sell Search 2014 2017 2017 2018 2021

8. $15 $15 $15 $15 $15 $15 $15 $15 $15 $15

   $15 $15 What are you looking for? Category Home Chat My Page Sell Search 2014 2017 2017 2018 2021 Objective-C, Swift, Java Swift, Java, Kotlin, React Native

9. $15 $15 $15 $15 $15 $15 $15 $15 $15 $15

   $15 $15 What are you looking for? Category Home Chat My Page Sell Search 2014 2017 2017 2018 2021 Objective-C, Swift, Java Swift, Java, Kotlin, React Native ৽͍͠ ίʔυϕʔε

10. Double 2017.4-7 RewriteϓϩδΣΫτ

11. Double 2017.4-7 RewriteϓϩδΣΫτ ϏδωεࢦඪΛ “ഒ”ʹ͢Δ

12. Double Rewriteͷഎܠ US൛ϝϧΧϦΛࠜຊ͔Βߟ͑௚͠୹ظؒͰ࣮ݱ͢Δ US։ൃνʔϜͷ೔ຊνʔϜ͔Βͷಠཱ ٕज़ελοΫΛ࡮৽͠DXΛ޲্ͤ͞Δ US։ൃνʔϜͷΧϧνϟʔ࠶ߏஙɹͳͲ

13. ϗʔϜ ঎඼ৄࡉ ϓϩϑΟʔϧ ϨϏϡʔ

14. Native Native React Native React Native

15. Double NativeͱReact NativeͷHybridΞϓϦ Native ϗʔϜ / ݕࡧ / ঎඼ৄࡉ /

    ग़඼ / ߪೖ / ΢Σϒ / αΠϯΠϯ ͳͲ ϝΠϯ
 ಈత / ύϑΥʔϚϯε React Native ֤छઃఆ / ট଴ / औҾ / Ҿ͖མͱ͠ / ݸਓೝূ ͳͲ αϒ ੩త / ಠཱ

16. Double React NativeΛ࠾༻ͨ͠ཧ༝ ୯७ʹNative͚ͩͰ΍Δ ࣌ؒͱ ਓ͕଍Γͳ͔ͬͨ ։ൃظؒ 3ϲ݄ AndroidΤϯδχΞ 4ਓ

    iOSΤϯδχΞ 4ਓ

17. Double React NativeΛ࠾༻ͨ͠ཧ༝ ୯७ʹNative͚ͩͰ΍Δ ࣌ؒͱ ਓ͕଍Γͳ͔ͬͨ ։ൃظؒ 3ϲ݄ AndroidΤϯδχΞ 4ਓ

    iOSΤϯδχΞ 4ਓ ͦͷଞͷJavaScriptॻ͚Δਓ 4-6ਓ

18. Double Ϗδωεͷ੒௕ ϦϒϥϯσΟϯά Χʔτ ਅآೝূ Uberఏܞ഑ૹ ޙ෷͍ܾࡁɹͳͲ ʴ ਺ଟͷABςετ ྲྀ௨૯ֹ

19. Double Ϗδωεͷ੒௕ ϦϒϥϯσΟϯά Χʔτ ਅآೝূ Uberఏܞ഑ૹ ޙ෷͍ܾࡁɹͳͲ ʴ ਺ଟͷABςετ ྲྀ௨૯ֹ

    ଞʹ΋ ΍Γ͍ͨ͜ͱ͕ ࢁ΄Ͳʂ

20. Double Ұํ։ൃ໘Ͱ͸… ࠾༻೉ ߴΦϯϘʔσΟϯάίετ ߴίϛϡχέʔγϣϯίετ ߴϝϯςφϯείετ ߴϏϧυ࣌ؒ εϧʔϓοτʢงғؾʣ

21. Double Ұํ։ൃ໘Ͱ͸… ࠾༻೉ ߴΦϯϘʔσΟϯάίετ ߴίϛϡχέʔγϣϯίετ ߴϝϯςφϯείετ ߴϏϧυ࣌ؒ εϧʔϓοτʢงғؾʣ Scalabilityʹ ໰୊͋Γ

22. Double ঢ়گվળͷͨΊʹ 1ϓϥοτϑΥʔϜͷΈͰͷABςετ ڞ௨ϩδοΫͷNative ModuleԽ Πϯϑϥͷվળ Ϗϧυͷߴ଎Խ

23. Double ঢ়گվળͷͨΊʹ React NativeΞϓϦ ʹͨ͠Β͍͍ͷͰ͸ʁ ʢ2019/4ʣ 1ϓϥοτϑΥʔϜͷΈͰͷABςετ ڞ௨ϩδοΫͷNative ModuleԽ Πϯϑϥͷվળ

    Ϗϧυͷߴ଎Խ

24. React NativeΞϓϦԽʹ޲͚ͯ React NativeΞϓϦԽ͢Δํ๏ Refactoring
 طଘΞϓϦͷReact Native཰Λ૿΍͍ͯ͘͠ Rewrite
 ৽نͰΞϓϦΛॻ͖௚͢

25. React NativeΞϓϦԽʹ޲͚ͯ Refactoring vs Rewrite ن໛ ϦεΫ ظؒ ෛ୲ ೉қ౓

    Refactoring த Rewrite ઈେ

26. React NativeΞϓϦԽʹ޲͚ͯ Refactoring vs Rewrite ن໛ ϦεΫ ظؒ ෛ୲ ೉қ౓

    Refactoring த খ Rewrite ઈେ େ

27. React NativeΞϓϦԽʹ޲͚ͯ Refactoring vs Rewrite ن໛ ϦεΫ ظؒ ෛ୲ ೉қ౓

    Refactoring த খ 3೥ʴ Rewrite ઈେ େ 1೥

28. React NativeΞϓϦԽʹ޲͚ͯ Refactoring vs Rewrite ن໛ ϦεΫ ظؒ ෛ୲ ೉қ౓

    Refactoring த খ 3೥ʴ େ Rewrite ઈେ େ 1೥ த

29. React NativeΞϓϦԽʹ޲͚ͯ Refactoring vs Rewrite ن໛ ϦεΫ ظؒ ෛ୲ ೉қ౓

    Refactoring த খ 3೥ʴ େ ߴ Rewrite ઈେ େ 1೥ த த

30. React NativeΞϓϦԽʹ޲͚ͯ Refactoring vs Rewrite ن໛ ϦεΫ ظؒ ෛ୲ ೉қ౓

    Refactoring த খ 3೥ʴ େ ߴ Rewrite ઈେ େ 1೥ த த

31. React NativeΞϓϦԽʹ޲͚ͯ Refactoring vs Rewrite ن໛ ϦεΫ ظؒ ෛ୲ ೉қ౓

    Refactoring த খ 3೥ʴ େ ߴ Rewrite ઈେ େ 1೥ த த

32. React NativeΞϓϦԽʹ޲͚ͯ Refactoring vs Rewrite ن໛ ϦεΫ ظؒ ෛ୲ ೉қ౓

    Refactoring த খ 3೥ʴ େ ߴ Rewrite ઈେ େ 1೥ த த React Native ΞϓϦԽࣗମ͕ ΰʔϧͰ͸ͳ͍

33. React NativeΞϓϦԽʹ޲͚ͯ ͦ΋ͦ΋Ͱ͖Δͷ͔ʁ ࣮ݧΞϓϦ։ൃ / ٕज़ݕূ React NativeΛ࢖͍ͬͯΔձࣾ΁ͷώϠϦϯά React /

    Native྆ํͷ๛෋ͳ஌ࣝ ҆શͳϦϦʔεϓϥϯχϯά ଞΫϩεϓϥοτϑΥʔϜٕज़ͱͷൺֱɹͳͲ

34. React NativeΞϓϦԽʹ޲͚ͯ Flutterͱͷൺֱ طʹReact Nativeͷ஌͕ࣝ͋Δ JavaScript ύϑΥʔϚϯε΋े෼ʹΑ͘վળͷ༧ఆ͢Β͋Δ WebରԠ

35. Denali 2021.4- RewriteϓϩδΣΫτ

36. Denali 2021.4- RewriteϓϩδΣΫτ ΞϝϦΧͰ Ұ൪ߴ͍ࢁ

37. Denali ϞόΠϧνʔϜ૊৫ମ੍ iOS Android React Native Denali ʢRewriteʣ

38. Denali ϞόΠϧνʔϜ૊৫ମ੍ iOS Android React Native Denali ʢRewriteʣ

39. Denali ϞόΠϧνʔϜ૊৫ମ੍ iOS Android React Native Denali ʢRewriteʣ …

40. Denali ϞόΠϧνʔϜ૊৫ମ੍ iOS Android React Native Denali ʢRewriteʣ … ඞཁʹԠͯ͡

    ੵۃతʹ ॿ͚߹͏

41. Denali ٕज़ελοΫ TypeScript Expo Redux Toolkit React Navigation fastlane Protocol

    Buffers Sentry ͳͲ GitHub Actions

42. Denali ൓লΛੜ͔ٕͨ͠ज़ํ਑ “؆୯” ͳίʔυΛॻ͘ υΩϡϝϯτΛੵۃతʹΞοϓσʔτ ࣾ಺ษڧձʢDiscussionʣΛຖि։࠵ σβΠϯγεςϜΛશ໘దԠ

43. Denali εέʔϧ͍ͯ͠Δ։ൃ ݩWebνʔϜϝϯόʔ ݩAPIνʔϜϝϯόʔ ݱiOS / AndroidνʔϜϝϯόʔ NativeະܦݧΤϯδχΞ࠾༻ ۀ຿ҕୗɹͳͲͷίϯτϦϏϡʔτ εϧʔϓοτʢงғؾʣ

44. Denali ϑΣʔζ Phase 1 Phase 2 Phase 3 Phase 4

45. Denali ϑΣʔζ Phase 1 Phase 2 Phase 3 Phase 4

    ج൫ ओཁը໘ νέοτચ͍ग़͠

46. Denali ϑΣʔζ Phase 1 Phase 2 Phase 3 Phase 4

    ج൫ ओཁը໘ νέοτચ͍ग़͠ ඞਢػೳͷ׬੒ ࣾ಺ςετ։࢝

47. Denali ϑΣʔζ Phase 1 Phase 2 Phase 3 Phase 4

    ج൫ ओཁը໘ νέοτચ͍ग़͠ ඞਢػೳͷ׬੒ ࣾ಺ςετ։࢝ αϒͷػೳ ݱߦΞϓϦͱͷࠩ෼ ݱߦ։ൃͷ
 εϩʔμ΢ϯ

48. Denali ϑΣʔζ Phase 1 Phase 2 Phase 3 Phase 4

    ج൫ ओཁը໘ νέοτચ͍ग़͠ ඞਢػೳͷ׬੒ ࣾ಺ςετ։࢝ αϒͷػೳ ݱߦΞϓϦͱͷࠩ෼ ݱߦ։ൃͷ
 εϩʔμ΢ϯ ϑΣʔζϦϦʔεͷ ։࢝ ෆ۩߹मਖ਼ 100%ϦϦʔε΁ʂ

49. Denali ϑΣʔζ Phase 1 Phase 2 Phase 3 Phase 4

    ج൫ ओཁը໘ νέοτચ͍ग़͠ ඞਢػೳͷ׬੒ ࣾ಺ςετ։࢝ αϒͷػೳ ݱߦΞϓϦͱͷࠩ෼ ݱߦ։ൃͷ
 εϩʔμ΢ϯ ϑΣʔζϦϦʔεͷ ։࢝ ෆ۩߹मਖ਼ 100%ϦϦʔε΁ʂ

50. Denali ϑΣʔζ Phase 1 Phase 2 Phase 3 Phase 4

    ج൫ ओཁը໘ νέοτચ͍ग़͠ ඞਢػೳͷ׬੒ ࣾ಺ςετ։࢝ αϒͷػೳ ݱߦΞϓϦͱͷࠩ෼ ݱߦ։ൃͷ
 εϩʔμ΢ϯ ϑΣʔζϦϦʔεͷ ։࢝ ෆ۩߹मਖ਼ 100%ϦϦʔε΁ʂ νέοτ શମͷ60%ۙ͘ ফԽࡁΈ

51. 2022 AndroidϩʔϧΞ΢τ։࢝༧ఆʂ

52. React Nativeޙ ΤϯδχΞ૊৫ͱͯ͠໨ࢦ͢ઌ React NativeίϛϡχςΟ΁ͷߩݙ Ҿ͖ଓ͖ “ෑډ” Λ௿͘͢Δ “Pods”ʢʹখ͍͞νʔϜʣͰ
 ΍Γ͍ͨ͜ͱΛͳΊΒ͔ʹ࣮ߦ͢Δ

    ΤϯδχΞ΋ੵۃతʹΞΠσΟΞΛग़͢

53. React Nativeޙ ΤϯδχΞ૊৫ͱͯ͠໨ࢦ͢ઌ React NativeίϛϡχςΟ΁ͷߩݙ Ҿ͖ଓ͖ “ෑډ” Λ௿͘͢Δ “Pods”ʢʹখ͍͞νʔϜʣͰ
 ΍Γ͍ͨ͜ͱΛͳΊΒ͔ʹ࣮ߦ͢Δ

    ΤϯδχΞ΋ੵۃతʹΞΠσΟΞΛग़͢ ຖ೔͕ ϋοΧιϯঢ়ଶʹ ͳΔ!?

54. શ໘తɾੵۃతʹ࠾༻த

55. We are hiring! શΤϯδχΞੵۃ࠾༻த US / JPͱ΋ʹ࠾༻த React Native Engineer

    iOS Engineer Android Engineer API EngineerɹͳͲͳͲ
56. None