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/