ReactでWebとNativeの共通UIライブラリを作ろう

Transcript

1. ©2018 Wantedly, Inc. ReactͰWebͱNativeͷ ڞ௨UIϥΠϒϥϦΛ࡞Ζ͏ React Native Meetup #9 13.Sep.2018

   - Kento Moriwaki

2. ©2018 Wantedly, Inc. • KentoMoriwaki • twitter: @kento_trans_lu • WantedlyͷΤϯδχΞ

   • ओʹϑϩϯτΤϯυΛϦʔυ͍ͯ͠·͢ ࣗݾ঺հ

3. ©2018 Wantedly, Inc. ࣾ಺Design Systemͷ React൛Λ࣮૷͍ͯ͠·͢ 3

4. ©2018 Wantedly, Inc. “React NativeͰ΋ ಈ͘Α͏ʹ͍ͨ͠ͳ” 4

5. ©2018 Wantedly, Inc. ๻ͷ͜ͷҰݴͰۤ͠Μͩ Πϯλʔϯ @RyuichiSakagami 5 https://twitter.com/RyuichiSakagami

6. ©2018 Wantedly, Inc. `npm install my-ui`ͯ͠ `import { Button }

   from "my-ui"` ͬͯॻ͍ͨΒ WebͱNativeͰಈ͍ͯཉ͍͠ 6

7. ©2018 Wantedly, Inc. 7 ͜ΜͳϘλϯ͕࡞Γ͍ͨɺ͚ͩ

8. ©2018 Wantedly, Inc. ͜ΜͳϘλϯ͕࡞Γ͍ͨɺ͚ͩ? 8 ϏϧυͲ͏͢Δͷʁ TypeScriptͷܕνΣοΫ͸ʁ άϥσʔγϣϯʁ Ξχϝʔγϣϯʁ ΠϯλϥΫγϣϯʁ

9. ©2018 Wantedly, Inc. • ΋ͪΖΜɺreact-native, react-native-web͕ϕʔε • ՄೳͳݶΓ͸ɺreact-primitivesΛ࢖͏ • ͳ͚Ε͹ɺreact-nativeΛ࢖͏

   • ͦΕ΋ͳ͚Ε͹ɺϓϥοτϑΥʔϜ͝ͱʹϩδοΫΛ෼͚Δ → .web.js, .ios.js, .android.js • TypeScriptͷܕཉ͍͠ جຊํ਑

10. ©2018 Wantedly, Inc. Ϗϧυઃఆ͕ϋʔυ͗͢Δ 10 ͍͖ͳΓ஍ຯͳ࿩Ͱ͝ΊΜͳ͍͞

11. ©2018 Wantedly, Inc. TypeScript͸ .web.jsͱ͔.ios.jsΛͦͷ··Ͱ͸
 ͏·͘ѻ͑ͳ͍ 1. ϓϥοτϑΥʔϜؒͰexport͢Δܕ͕ҧ͏͜ͱ ʹؾ͚ͮͳ͍ 2.

    Cannot find module໰୊ TypeScriptͷ໰୊

12. ©2018 Wantedly, Inc. ϓϥοτϑΥʔϜؒͰҧ͏ܕΛexport͍ͯͯ͠΋ ܕΤϥʔ͸ى͖ͳ͍ ϓϥοτϑΥʔϜ͝ͱͷܕνΣοΫ foo.web.tsx foo.native.tsx

13. ©2018 Wantedly, Inc. ϓϥοτϑΥʔϜ͝ͱʹ෼ྨ ͦΕͧΕʹ`tsc`ͰܕνΣοΫ ϓϥοτϑΥʔϜ͝ͱͷܕνΣοΫ foo.native.tsx gulpͰมߋΛݕ஌ͯ͠ ࣗಈతʹίϐʔ

14. ©2018 Wantedly, Inc. Cannot find module... Cannot find module໰୊

15. ©2018 Wantedly, Inc. index.js͕ͳ͚Ε͹ɺimportͰ͖ͳ͍ Cannot find module໰୊

16. ©2018 Wantedly, Inc. ͜ΕͰ௨Δ͚Ͳɺ nativeͰ͸ಈ͔ͳ͍Α... Cannot find module໰୊

17. ©2018 Wantedly, Inc. tsͷcompilerOptionsͰղܾ Cannot find module໰୊ tsconfig.web.json

18. ©2018 Wantedly, Inc. tsconfig͕͍ͬͺ͍Ͱ͖Δ • tsconfig.base.json • جຊϧʔϧΛ·ͱΊΔ • tsconfig.{platform}.json

    • ϓϥοτϑΥʔϜ͝ͱͷઃఆ • rootDir, pathsͳͲ • tsconfig.json • ΤσΟλͰ࢖͏ઐ༻

19. ©2018 Wantedly, Inc. • distҎԼʹ index.web.js, .ios.js, .android.js ΛͦΕͧΕు͖ग़͢Α͏ʹઃఆ •

    package.jsonͷmainʹ͸ɺdist ͱࢦఆ͢Ε͹ɺΞϓϦέʔγϣϯ ଆͰ੾Γ෼͚ͯ͘ΕΔ Webpack

20. ©2018 Wantedly, Inc. • ϓϥοτϑΥʔϜ͝ͱͷڍಈͷҧ͍͸ɺmodulesҎԼʹݶ ఆ͢Δ • VS CodeͰॻ͖ͳ͕ΒͷܕνΣοΫ΍ΦʔτίϯϓϦʔτ ͸ɺͲΕ͔ҰͭͷϓϥοτϑΥʔϜʹݻఆ͢Δ

    • modulesΛ௥Ճͨ͠ΒɺwebpackΛ࠶ىಈ͢Δ • resolve.aliasͷॊೈੑ͕௿͍ͨΊɻ΋ͬͱ͍͍ํ๏͋Δ͔ ΋ TypeScript·ΘΓͷ੍ݶ

21. ©2018 Wantedly, Inc. ͜͜·ͰͰ͖Ε͹ɺ ͋ͱ͸؆୯ʂ 21

22. ©2018 Wantedly, Inc. άϥσʔγϣϯ 22

23. ©2018 Wantedly, Inc. • nativeͰ͸ɺωΠςΟϒϞδϡʔϧΛؚΉϥΠϒϥϦΛ࢖͏ • https://github.com/react-native-community/react-native-linear-gradient • WebͰ͸ɺCSSͰදݱͰ͖Δ •

    background-image: linear-gradient(...); • ಉ͡ΠϯλʔϑΣʔεΛఆٛͯ͠ɺ࣮૷Λ.web.tsxͱ native.tsxͰ෼͚Δ͚ͩ webͱnativeͰҧ͏άϥσʔγϣϯͷ࣮ݱํ๏

24. ©2018 Wantedly, Inc. webͱnativeͰҧ͏άϥσʔγϣϯͷ࣮ݱํ๏ modules/linear-gradient/index.native.tsx modules/linear-gradient/index.web.tsx

25. ©2018 Wantedly, Inc. hover 25

26. ©2018 Wantedly, Inc. • react-nativeͷViewͷpropsʹonMouseEnter͸ ͳ͍ • react-native-webͰ΋ܕΤϥʔ͸ग़Δ͕ɺ࣮͸ ͦͷ··divʹ౉ͯ͘͠ΕΔͷͰɺઃఆͰ͖Δ •

    ܕ͚ͩΛ௥Ճͨ͠Β໰୊ͳ͔ͬͨ nativeʹ͸hover͸ͳ͍

27. ©2018 Wantedly, Inc. Ξχϝʔγϣϯ 27

28. ©2018 Wantedly, Inc. • react-native-webͷAnimated͸ɺύϑΥʔϚ ϯεతʹྼΔ • WebͰ͸ɺCSSͷtransitionΛ࢖͍͍ͨ ࠷ޙͷ೉ؔ: Animated

29. ©2018 Wantedly, Inc. Animatedͷ࢖͍ํ ࠷ޙͷ೉ؔ: Animated

30. ©2018 Wantedly, Inc. ࠷ޙͷ೉ؔ: Animated ࣅͨΑ͏ͳInterfaceΛఆٛ

31. ©2018 Wantedly, Inc. ࠷ޙͷ೉ؔ: Animated Animated.ValueͷมߋΛݕ஌ͯ͠ɺstyleʹtransitionΛ౰ͯΔ

32. ©2018 Wantedly, Inc. react-cross-ui-boilerplate ʹ͋͛·ͨ͠ 32 https://github.com/KentoMoriwaki/react-cross-ui-boilerplate

33. ©2018 Wantedly, Inc. 1. cloneͯ͠࢖͍ͬͯͩ͘͞ 2. ಈ͔ͳ͍ͱ͜Ζଟ͍ͷͰɺࢀߟఔ౓Ͱ 3. Microsoft/reactxp͸͍͢͝ 4.

    gulpศར react-cross-ui-platform

34. ©2018 Wantedly, Inc. 1. ϑΥϯτ΋webͱnativeͰ੾Γସ͑Δඞཁ͋Δ 2. Server-side renderingͰ͖Δͷ͔ 3. Native

    moduleΛͲ͏΍ͬͯϏϧυ͢Δ͔ ·ͩ·ͩߟ͑Δඞཁ͕͋Δͱ͜Ζ

35. ©2018 Wantedly, Inc. • ͍ܰؾ࣋ͪͰ࢝ΊΔͷ͸Φεεϝ͠ͳ͍Ͱ͢ • ϥΠϒϥϦʹ͢Δඞཁͳ͍ͳΒɺ΋͏ͪΐͬͱ؆ ୯ʹͰ͖Δ͔΋ • ϥΠϒϥϦʹ͍ͨ͠ͳΒɺҰॹʹઓ͍·͠ΐ͏

    • ຖि໦༵։࠵ʂϑϩϯτΤϯυʹ͍ͭͯΏΔͬͱษڧ͠·ͤΜ͔ʁ ಉ͜͡ͱΛ΍Γ͍ͨͱࢥ͍ͬͯͨΒɺ

36. ©2018 Wantedly, Inc. Rejectcon 2018Ͱ΋࿩͢ͷͰɺ Α͔ͬͨΒདྷ͍ͯͩ͘͞ʂ https://rejectcon.connpass.com/event/96581/