Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Nature Remo, チームの紹介

Slide 5

Slide 5 text

5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

• ΞϓϦ: 2 • όοΫΤϯυ: 3 • ϑΝʔϜ΢ΣΞ: 2 • ߹ܭ 5 ਓ ιϑτ΢ΣΞΤϯδχΞνʔϜ 7

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Ҡߦ࣌ͷ࿩

Slide 10

Slide 10 text

Ҡߦཧ༝ • ೋਓͰ iOS, Android ΛΞΫςΟϒʹ։ൃ͍ͯ͘͠ͷ͕೉͔ͬͨ͠ • ౰࣌ • React Native 0.52.0 • TypeScript 2.6.2 • https://employment.en-japan.com/engineerhub/entry/ 2018/08/17/110000 • 2೥લʹΠϯλϏϡʔͯ͠΋Β͍·ͨ͠ 10

Slide 11

Slide 11 text

͜ͷλΠϛϯάͰσβΠϯ΋࡮৽ • ೝূ෦෼͸ϚΠάϨʔγϣϯॲཧΛ༻ҙ • σβΠϯͷ੍໿͸͋Δ • iOS ʹ͋Δจࣈͷେ͖͞Λௐ੔ͯ͠٧ΊΔ΍ͭͱ͔ Android ʹͳ͔ͬ ͨΓɺٯ΋͋ΔͷͰ • View पΓ͸΄΅ίʔυ͸ڞ௨Խ͞ΕͯΔ • ΞΫςΟϒʹϦϦʔεͰ͖ΔΑ͏ʹͳͬͨ 11

Slide 12

Slide 12 text

ڞ௨ԽͰ͖ͳ͔ͬͨ΋ͷ • ωΠςΟϒͷڍಈʹؔ࿈͢Δ΋ͷ • ύʔϛογϣϯपΓ • Geofence पΓ • ϝʔϥ։͘ͱ͜Ζͱ͔ • ౰࣌͸ͳ͔͕ͬͨ Bluetooth पΓ • Ͳ͔ͪΒ͚ͩڍಈ͕͓͔͘͠ճආࡦΛೖΕͯΔ৔߹ 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

࠷ۙͷ։ൃͷ࿩

Slide 16

Slide 16 text

• Visual Studio Code • Xcode • Android Studio • Emulator ։ൃ؀ڥ 16

Slide 17

Slide 17 text

• React Navigation Λ࢖͍ͬͯΔͷͰ Screen Component ༻ҙͯ͠ • ࠷ۙ͸ hooks ΋࢖ͬͯॻ͍ͯΔ • ෳࡶͳσβΠϯʹͨ͘͠ͳ͍ͷͰγϯϓϧʹ ৽͍͠ը໘ 17

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

ϥΠϒϥϦपΓ • 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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Fix typescript constructor parameter properties 28 class Employee extends Person { constructor(public name: string) { super(); } }

Slide 29

Slide 29 text

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; }

Slide 30

Slide 30 text

Fix some languages wrapped texts are cut off on android 30 export default class App extends React.Component { render() { return ( ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ ͜ΕͰͪΐ͏Ͳेจࣈ͜ΕͰͪΐ͏Ͳेจࣈ͜ΕͰͪΐ͏Ͳेจࣈ͜ΕͰͪΐ͏Ͳेจࣈ ͜ΕͰͪΐ͏Ͳेจࣈ͜ΕͰͪΐ͏Ͳेจࣈ 㟬޷ૣ্޷㟬ૌ޷࿝ഽ޷㟬޷ૣ্޷㟬ૌ޷࿝ഽ޷㟬޷ૣ্޷㟬ૌ޷࿝ഽ޷ 㟬޷ૣ্޷㟬ૌ޷࿝ഽ޷ ); } }

Slide 31

Slide 31 text

Fix some languages wrapped texts are cut off on android 31

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

iOSͷόά?Λݟ͚ͭͨΓ • iOS12 ͷ೔ຊޠ؀ڥͰӳޠ͚ͩͷγεςϜϑΥϯτ ͷ จࣈྻʹΧϯϚؚ͕·ΕΔͱṖͷleading ͕ൃੜ͢Δ ͱ͍͏όά • ଟ෼ iOS ଆ? iOS13 Ͱ͸ൃੜ͠ͳ͍ • https://twitter.com/soh335/status/ 1185552921049460737

Slide 34

Slide 34 text

Oppo A77 - Some texts gets cut-off • https://github.com/facebook/react-native/issues/ 15114 • One Plus, Oppo ͷσόΠεͰ༻ҙ͞ΕͯΔϑΥϯτ Λ࢖͏ͱจࣈྻͷඳը͕͓͔͍͠

Slide 35

Slide 35 text

࠷ۙߟ͑ͯΔ͜ͱ

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

࣮ࡍ React Native Ͳ͏? • Web ϑϩϯτΤϯυ΍ͬͯͳ͍͠ɺReact ʹڧ͍஌ݟ͕͋ΔΘ͚Ͱ͸ͳ͍ • ਖ਼௚ෳࡶͳ͜ͱͨ͘͠ͳ͍ • σβΠϯ͕Ͳ͔ͬͪʹدΓ͕ͪ (͏ͪ͸ iOS ΑΓ) • ωΠςΟϒͷΞοϓσʔτͷΩϟονΞοϓ͕Ͱ͖ͳ͍ͱେม 37

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

React Native ͷόʔδϣϯΞοϓ • ຊମ͕ͦΜͳյΕΔҹ৅͸ͳ͍ • पลϥΠϒϥϦͷํ͕? • iOS, Android ଆͷ OS ্͕͕ΔλΠϛϯάͷํ͕΍ͬͺΓؾʹͳΔ 39

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

࠾༻΍ͬͯ·͢ • εϚʔτϑΥϯΞϓϦΤϯδχΞ • όοΫΤϯυΤϯδχΞ • ૊ΈࠐΈΤϯδχΞ • ػߏઃܭΤϯδχΞ • ػցֶशΤϯδχΞ • SRE • https://nature.global/jp/careers 43