Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Kento Moriwaki

September 13, 2018
Tweet

More Decks by Kento Moriwaki

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  25. ©2018 Wantedly, Inc.
    hover
    25

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide