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

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

20451aa93aace2f5279f5ea2e7a9c89d?s=128

Kento Moriwaki

September 13, 2018
Tweet

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/