Nature での React Native アプリの運用について / React Native App in Nature

Transcript

1. 厳秘：本資料の⼀部または全部を、Nature株式会社の許可なしに、複製、転載することを禁じます。 Nature Ͱͷ React Native ΞϓϦͷӡ༻ʹ͍ͭͯ Sep 4. 2020 Nature

   Inc. soh335

2. • github.com/soh335 • Nature גࣜձࣾιϑτ΢ΣΞΤϯδχΞ About Me 2

3. • Nature Remo, νʔϜͷ঺հ • Ҡߦ࣌ͷ࿩ • ࠷ۙͷ։ൃͷ࿩ • ࠷ۙߟ͑ͯΔ͜ͱ

   Agenda 3

4. Nature Remo, チームの紹介

5. 5

6. スマートデバイス Nature Remo 家電 How It Works

7. • ΞϓϦ: 2 • όοΫΤϯυ: 3 • ϑΝʔϜ΢ΣΞ: 2 •

   ߹ܭ 5 ਓ ιϑτ΢ΣΞΤϯδχΞνʔϜ 7

8. • https://employment.en-japan.com/ engineerhub/entry/2020/02/06/103000 • ࢀߟʹͳΔͱࢥ͍·͢ React Native ࣗମʹؔͯ͠ 8

9. Ҡߦ࣌ͷ࿩

10. Ҡߦཧ༝ • ೋਓͰ iOS, Android ΛΞΫςΟϒʹ։ൃ͍ͯ͘͠ͷ͕೉͔ͬͨ͠ • ౰࣌ • React

    Native 0.52.0 • TypeScript 2.6.2 • https://employment.en-japan.com/engineerhub/entry/ 2018/08/17/110000 • 2೥લʹΠϯλϏϡʔͯ͠΋Β͍·ͨ͠ 10

11. ͜ͷλΠϛϯάͰσβΠϯ΋࡮৽ • ೝূ෦෼͸ϚΠάϨʔγϣϯॲཧΛ༻ҙ • σβΠϯͷ੍໿͸͋Δ • iOS ʹ͋Δจࣈͷେ͖͞Λௐ੔ͯ͠٧ΊΔ΍ͭͱ͔ Android ʹͳ͔ͬ

    ͨΓɺٯ΋͋ΔͷͰ • View पΓ͸΄΅ίʔυ͸ڞ௨Խ͞ΕͯΔ • ΞΫςΟϒʹϦϦʔεͰ͖ΔΑ͏ʹͳͬͨ 11

12. ڞ௨ԽͰ͖ͳ͔ͬͨ΋ͷ • ωΠςΟϒͷڍಈʹؔ࿈͢Δ΋ͷ • ύʔϛογϣϯपΓ • Geofence पΓ • ϝʔϥ։͘ͱ͜Ζͱ͔

    • ౰࣌͸ͳ͔͕ͬͨ Bluetooth पΓ • Ͳ͔ͪΒ͚ͩڍಈ͕͓͔͘͠ճආࡦΛೖΕͯΔ৔߹ 12

13. ࠔͬͨϙΠϯτ • σόΠεͷηοτΞοϓ࣌ʹσόΠεࣗ਎ͷωοτϫʔΫʹεϚʔτϑΥ ϯ͕ܨ͙ඞཁ͕͋Δ • Ϛγϯʹىಈ͍ͯ͠ΔσόοΨͱͷ઀ଓ͕੾ΕΔ… • Today widget •

    https://reactnative.dev/docs/app-extensions 13

14. ౰࣌ݟक͍ͬͯͨIssue • ςΩετपΓ͕ଟ͍ҹ৅ • CJKಛ༗ͳ΋ͷ΋ • ωΠςΟϒଆͷϏϧυγεςϜ͕࡮৽͞ΕΔͱେม

15. ࠷ۙͷ։ൃͷ࿩

16. • Visual Studio Code • Xcode • Android Studio •

    Emulator ։ൃ؀ڥ 16

17. • React Navigation Λ࢖͍ͬͯΔͷͰ Screen Component ༻ҙͯ͠ • ࠷ۙ͸ hooks

    ΋࢖ͬͯॻ͍ͯΔ • ෳࡶͳσβΠϯʹͨ͘͠ͳ͍ͷͰγϯϓϧʹ ৽͍͠ը໘ 17

18. ࠷ۙ௥Ճͨ͠ը໘ • άϥϑपΓͷܭࢉ͸ D3 • ඳը͸ react-native-svg

19. React Native ͷ Version Λ͋͛ΔλΠϛϯά • ࣍ͷϝδϟʔΞοϓσʔτ͕ग़ͨΒͦͷલͷ࠷ޙ͋ͨΓΛݕ౼ • ຖճͦ͏͍͏Θ͚Ͱ΋ͳ͍͚Ͳ •

    Expo SDK ΋ࢀߟʹ 19

20. ϥΠϒϥϦपΓ • react-navigation • redux & redux-persist & immer •

    react-native-maps • react-native-ble-manager • react-native-svg • react-native-vector-icons • react-native-linear-gradient • lottie-react-native • sentry 20

21. ͋͑ͯ࢖ͬͯͳ͍΋ͷ • Expo • OTA • Keychain पΓ • GeofenceपΓ

    21

22. Expo • Native ͷίʔυΛॻ͔ͳ͍ͱ͍͏બ୒ࢶ͕ͳ͍ • Geofence, Siri ͱ͔ΞϓϦͷϩδοΫΛͦͷ··ॻ͘ඞཁ͕͋Δ 22

23. OTA • react-native ͷ version ʹґଘ͍ͯ͠ΔͷͰɺΞοϓσʔτͷ଍ᐫʹͨ͠ ͘ͳ͍ • ࣗ෼ͨͪͰίϯτʔϧͰ͖ͳ͍΋ͷΛ૿΍ͨ͘͠ͳ͍ •

    ࠷ۙ͸৹ࠪૣ͍ 23

24. Keychain पΓ • Keychain ͸ͪΌΜͱॻ͘ͷ͕೉͍͠ • ৴པ͍ͯ͠ΔϥΠϒϥϦΛ࢖͍͍ͨ • https://github.com/kishikawakatsumi/KeychainAccess •

    ϥοϓͯ͠࢖ͬͯΔ 24

25. Geofence • ΞϓϦͷϩδοΫʹີ઀ • iOS ͸headless JS ͱ͍͏֓೦ͳ͍ͷͰωΠςΟϒͰී௨ʹॻ͘ • https://reactnative.dev/docs/headless-js-android

    25

26. ଞʹ΋͍Ζ͍Ζ͋Δ • Native ʹ਺ߦॻ͚͹͍͍Α͏ͳ΋ͷ͸ࣗ෼ͨͪͰ༻ҙ͢Δ͜ͱ΋ • ΦϑΟγϟϧ͕ϗετͯ͠ͳ͍ωΠςΟϒϥΠϒϥϦͷϥούʔϥΠϒϥ Ϧ೉͍͠ 26

27. React Native ʹύονૹͬͨΓ • Fix typescript constructor parameter properties •

    https://github.com/facebook/metro/pull/262 • Fix some languages wrapped texts are cut off on android • https://github.com/facebook/react-native/pull/25306 27

28. Fix typescript constructor parameter properties 28 class Employee extends Person

    { constructor(public name: string) { super(); } }

29. Fix typescript constructor parameter properties 29 function Employee(name) { _classCallCheck(this,

    Employee); return _possibleConstructorReturn(this, _getPrototypeOf(Employee).call(this)); } function Employee(name) { var _this; _classCallCheck(this, Employee); _this = _possibleConstructorReturn(this, _getPrototypeOf(Employee).call(this)); _this.name = name; return _this; }

30. Fix some languages wrapped texts are cut off on android

    30 export default class App extends React.Component { render() { return ( <View style={{marginTop: 30}}> <Text>ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</Text> <Text>͜ΕͰͪΐ͏Ͳेจࣈ͜ΕͰͪΐ͏Ͳेจࣈ͜ΕͰͪΐ͏Ͳेจࣈ͜ΕͰͪΐ͏Ͳेจࣈ</Text> <Text>͜ΕͰͪΐ͏Ͳेจࣈ͜ΕͰͪΐ͏Ͳेจࣈ</Text> <Text>㟬޷ૣ্޷㟬ૌ޷࿝ഽ޷㟬޷ૣ্޷㟬ૌ޷࿝ഽ޷㟬޷ૣ্޷㟬ૌ޷࿝ഽ޷</Text> <Text>㟬޷ૣ্޷㟬ૌ޷࿝ഽ޷</Text> </View> ); } }

31. Fix some languages wrapped texts are cut off on android

    31

32. ύονΛ౰ͯͨReact Native Λ࢖͏ • https://github.com/facebook/react-native/wiki/Building-from-source • 0.60 ͰऔΓࠐ·ΕͨͷͰɺͦΕ·Ͱ͸ Patched React

    Native Λ࢖ͬͨ 32

33. iOSͷόά?Λݟ͚ͭͨΓ • iOS12 ͷ೔ຊޠ؀ڥͰӳޠ͚ͩͷγεςϜϑΥϯτ ͷ จࣈྻʹΧϯϚؚ͕·ΕΔͱṖͷleading ͕ൃੜ͢Δ ͱ͍͏όά • ଟ෼

    iOS ଆ? iOS13 Ͱ͸ൃੜ͠ͳ͍ • https://twitter.com/soh335/status/ 1185552921049460737

34. Oppo A77 - Some texts gets cut-off • https://github.com/facebook/react-native/issues/ 15114

    • One Plus, Oppo ͷσόΠεͰ༻ҙ͞ΕͯΔϑΥϯτ Λ࢖͏ͱจࣈྻͷඳը͕͓͔͍͠

35. ࠷ۙߟ͑ͯΔ͜ͱ

36. ࣮ࡍ React Native Ͳ͏? • ී௨ʹ࡞ͬͯΕ͹ iOS, Android, ͲͷαΠζͰ΋ಈ͘ͷͰྑ͍ •

    ਖ਼௚ Android ਂ͘Θ͔Βͳ͍͚ͲΞϓϦ͕ී௨ʹ࡞ΕΔ • ͜ͷνʔϜن໛Ͱ1,2िؒʹҰ౓ͷΞοϓσʔτΈ͍ͨͳͷ͸ωΠςΟϒͦ ΕͧΕͩͱݫ͍͠ • TypeScript ͕ྑ͍ 36

37. ࣮ࡍ React Native Ͳ͏? • Web ϑϩϯτΤϯυ΍ͬͯͳ͍͠ɺReact ʹڧ͍஌ݟ͕͋ΔΘ͚Ͱ͸ͳ͍ • ਖ਼௚ෳࡶͳ͜ͱͨ͘͠ͳ͍

    • σβΠϯ͕Ͳ͔ͬͪʹدΓ͕ͪ (͏ͪ͸ iOS ΑΓ) • ωΠςΟϒͷΞοϓσʔτͷΩϟονΞοϓ͕Ͱ͖ͳ͍ͱେม 37

38. ωΠςΟϒͷΞοϓσʔτͷΩϟονΞοϓ • ࠷ۙηΩϡϦςΟपΓͰݖݶपΓ͕ຖճมΘΔ • ඳը่͕ΕΔΈ͍ͨͳͷ͸ͦΜͳͳ͍ 38

39. React Native ͷόʔδϣϯΞοϓ • ຊମ͕ͦΜͳյΕΔҹ৅͸ͳ͍ • पลϥΠϒϥϦͷํ͕? • iOS, Android

    ଆͷ OS ্͕͕ΔλΠϛϯάͷํ͕΍ͬͺΓؾʹͳΔ 39

40. ωΠςΟϒͰॻ͖͍ͨʁ • ϝϯόʔ૿͑ͨΒͦΕ΋ྑ͍͔΋ • ݁ہνʔϜͷߏ੒ʹΑΓͦ͏ • Ұ୴Ϗϧυͪ͠Ό͑͹ͬ͘͞ͱॻ͍ͯ֬ೝग़དྷΔମݧ͸ؾʹೖͬͯΔ 40

41. Hermes Ͳ͏ͳΜͰ͠ΐ͏ʁ • JSC ͷ 64bit ରԠ͋ͨΓ͔Βڍಈ͕एׯෆ҆ఆ • ύον౰ͯͯ͘ΕͯΔͷ͕͋ͬͨΓ •

    https://github.com/Kudo/jsc-android-buildscript 41

42. όοΫΤϯυʹؔͯ͠ • CTOͷڈ೥ͷొஃͷεϥΠυ͕͋Γ·͢ • https://blog.song.mu/entry/inside-nature-remo 42

43. ࠾༻΍ͬͯ·͢ • εϚʔτϑΥϯΞϓϦΤϯδχΞ • όοΫΤϯυΤϯδχΞ • ૊ΈࠐΈΤϯδχΞ • ػߏઃܭΤϯδχΞ •

    ػցֶशΤϯδχΞ • SRE • https://nature.global/jp/careers 43