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

Transcript

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

   View Slide

2. ©2018 Wantedly, Inc.
   • KentoMoriwaki
   • twitter: @kento_trans_lu
   • WantedlyͷΤϯδχΞ
   • ओʹϑϩϯτΤϯυΛϦʔυ͍ͯ͠·͢
   ࣗݾ঺հ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. ©2018 Wantedly, Inc.
   `npm install my-ui`ͯ͠
   `import { Button } from "my-ui"`
   ͬͯॻ͍ͨΒ
   WebͱNativeͰಈ͍ͯཉ͍͠
   6
   

   View Slide

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

   View Slide

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

   View Slide

9. ©2018 Wantedly, Inc.
   • ΋ͪΖΜɺreact-native, react-native-web͕ϕʔε
   • ՄೳͳݶΓ͸ɺreact-primitivesΛ࢖͏
   • ͳ͚Ε͹ɺreact-nativeΛ࢖͏
   • ͦΕ΋ͳ͚Ε͹ɺϓϥοτϑΥʔϜ͝ͱʹϩδοΫΛ෼͚Δ
   → .web.js, .ios.js, .android.js
   • TypeScriptͷܕཉ͍͠
   جຊํ਑
   

   View Slide

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

    View Slide

11. ©2018 Wantedly, Inc.
    TypeScript͸ .web.jsͱ͔.ios.jsΛͦͷ··Ͱ͸

    ͏·͘ѻ͑ͳ͍
    1. ϓϥοτϑΥʔϜؒͰexport͢Δܕ͕ҧ͏͜ͱ
    ʹؾ͚ͮͳ͍
    2. Cannot find module໰୊
    TypeScriptͷ໰୊
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. ©2018 Wantedly, Inc.
    tsconfig͕͍ͬͺ͍Ͱ͖Δ
    • tsconfig.base.json
    • جຊϧʔϧΛ·ͱΊΔ
    • tsconfig.{platform}.json
    • ϓϥοτϑΥʔϜ͝ͱͷઃఆ
    • rootDir, pathsͳͲ
    • tsconfig.json
    • ΤσΟλͰ࢖͏ઐ༻
    

    View Slide

19. ©2018 Wantedly, Inc.
    • distҎԼʹ
    index.web.js, .ios.js, .android.js
    ΛͦΕͧΕు͖ग़͢Α͏ʹઃఆ
    • package.jsonͷmainʹ͸ɺdist
    ͱࢦఆ͢Ε͹ɺΞϓϦέʔγϣϯ
    ଆͰ੾Γ෼͚ͯ͘ΕΔ
    Webpack
    

    View Slide

20. ©2018 Wantedly, Inc.
    • ϓϥοτϑΥʔϜ͝ͱͷڍಈͷҧ͍͸ɺmodulesҎԼʹݶ
    ఆ͢Δ
    • VS CodeͰॻ͖ͳ͕ΒͷܕνΣοΫ΍ΦʔτίϯϓϦʔτ
    ͸ɺͲΕ͔ҰͭͷϓϥοτϑΥʔϜʹݻఆ͢Δ
    • modulesΛ௥Ճͨ͠ΒɺwebpackΛ࠶ىಈ͢Δ
    • resolve.aliasͷॊೈੑ͕௿͍ͨΊɻ΋ͬͱ͍͍ํ๏͋Δ͔
    ΋
    TypeScript·ΘΓͷ੍ݶ
    

    View Slide

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

    View Slide

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

    View Slide

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Ͱҧ͏άϥσʔγϣϯͷ࣮ݱํ๏
    

    View Slide

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

    View Slide

25. ©2018 Wantedly, Inc.
    hover
    25
    

    View Slide

26. ©2018 Wantedly, Inc.
    • react-nativeͷViewͷpropsʹonMouseEnter͸
    ͳ͍
    • react-native-webͰ΋ܕΤϥʔ͸ग़Δ͕ɺ࣮͸
    ͦͷ··divʹ౉ͯ͘͠ΕΔͷͰɺઃఆͰ͖Δ
    • ܕ͚ͩΛ௥Ճͨ͠Β໰୊ͳ͔ͬͨ
    nativeʹ͸hover͸ͳ͍
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. ©2018 Wantedly, Inc.
    1. ϑΥϯτ΋webͱnativeͰ੾Γସ͑Δඞཁ͋Δ
    2. Server-side renderingͰ͖Δͷ͔
    3. Native moduleΛͲ͏΍ͬͯϏϧυ͢Δ͔
    ·ͩ·ͩߟ͑Δඞཁ͕͋Δͱ͜Ζ
    

    View Slide

35. ©2018 Wantedly, Inc.
    • ͍ܰؾ࣋ͪͰ࢝ΊΔͷ͸Φεεϝ͠ͳ͍Ͱ͢
    • ϥΠϒϥϦʹ͢Δඞཁͳ͍ͳΒɺ΋͏ͪΐͬͱ؆
    ୯ʹͰ͖Δ͔΋
    • ϥΠϒϥϦʹ͍ͨ͠ͳΒɺҰॹʹઓ͍·͠ΐ͏
    • ຖि໦༵։࠵ʂϑϩϯτΤϯυʹ͍ͭͯΏΔͬͱษڧ͠·ͤΜ͔ʁ
    ಉ͜͡ͱΛ΍Γ͍ͨͱࢥ͍ͬͯͨΒɺ
    

    View Slide

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

    View Slide