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

Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web

sawa-zen
October 02, 2021
1.5k

Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web

React Native Matsuri 2021 で登壇した資料です
https://reactnative-matsuri.com/ja

sawa-zen

October 02, 2021
Tweet

Transcript

  1. WebΦϯϦʔͷϓϩμΫτͰ΋
    React Na*ve for Web ͸ً͘
    גࣜձࣾ Topotal CDO
    @sawa-zen
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 1

    View full-size slide

  2. @sawa-zen
    ॴଐɿגࣜձࣾ Topotal
    ৬छɿCDO
    • ओʹϑϩϯτΤϯυͱσβΠϯΛ୲౰
    • UIσβΠϯ΍σβΠϯγεςϜ͕େ޷

    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 2

    View full-size slide

  3. @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 3

    View full-size slide

  4. React Na(ve for Web
    ࢖ͬͯ·͔͢ʁ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 4

    View full-size slide

  5. ࢲ͸ΊͪΌͪ͘Ό࢖ͬͯ·͢
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 5

    View full-size slide

  6. ਖ਼௚͋·Γฉ͔ͳ͍Ͱ͢ΑͶʁ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 6

    View full-size slide

  7. ༗໊Ͳ͜Ζ͕࢖ͬͯ͸͍Δ͕ࣄྫ͕গͳ͍
    Twi$er Uber Eats Orders
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 7

    View full-size slide

  8. ͳͥ࢖ΘΕͳ͍ͷ͔ʁ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 8

    View full-size slide

  9. ∵ React Na(ve ͱ Web ͷ
    ίʔυڞ௨Խπʔϧͱޡղ͞Ε͍ͯΔͨΊ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 9

    View full-size slide

  10. ޡղ͔Βੜ·ΕΔωΨςΟϒͳҹ৅
    • ͏ͪ͸ΞϓϦҰຊ͔ͩΒͳ͊...
    • iOS ͱ Android ͷڞ௨Խ͚ͩͰ΋େมͳͷʹ...
    ∴ ݟ޲͖΋͞Εͳ͍
    !
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 10

    View full-size slide

  11. ࢥ͍ग़ͯ͠ཉ͍͠

    Write once, run anywhere

    Learn Once, Write Anywhere
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 11

    View full-size slide

  12. @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 12

    View full-size slide

  13. web-only Ͱ΋ྑ͍ΜͰ͢ʂ
    ! !
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 13

    View full-size slide

  14. Ͱ͸ݟํΛม͑ͯΈΔ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 14

    View full-size slide

  15. React Na(ve for Web Λ
    ७ਮͳ Web ͷ UI ϥΠϒϥϦͱͯ͠
    ݟΔͱͲ͏͔ʁ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 15

    View full-size slide

  16. Good points
    ϑϩϯτΤϯυࢹ఺Ͱݟͨྑ͔ͬͨ఺
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 16

    View full-size slide

  17. Good points
    ① ϛχϚϧͰચ࿅͞Εͨઃܭ
    • View, Text Ͱ UI ΛߏஙͰ͖Δγϯϓϧ͞
    • div, span, pͳͲͰॻ͘ΑΓ΋௚ײత
    • ίϯϙʔωϯτ͕ҙঊΛ൐Θͳ͍
    • ಠࣗʹελΠϧΛ౰ͯΔ͔ଞͷϥΠϒϥϦʹ৐Δ͔બ΂Δ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 17

    View full-size slide

  18. Good points
    ② ௚ײతͳ Accessibility ؔ࿈ͷهड़ܗࣜ
    • role Λઃఆ͢Ε͹ద੾ͳ DOM ʹม׵ͯ͘͠ΕΔ
    • View, Text ͰҰ୴ελΠϦϯά͚͔ͩͯ͠Β accessibility* prop
    Λޙ෇͚ͰରԠͰ͖Δ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 18

    View full-size slide

  19. Good points
    ③ ॏෳͨ͠ CSS ͷ࠷దԽ
    • ҎԼͷ৚݅Λຬͨͨ͠ style ͷ CSS ͸࢖͍ճ͞ΕΔ
    1. StyleSheet.create Λ࢖ͬͯهड़͞Ε͍ͯΔ͜ͱ
    2. ಉ͡ͷ key ͱ value ͷϖΞ͕ଞͰ࢖ΘΕ͍ͯΔ͜ͱ
    • Tailwind ͱ͍ۙײ֮
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 19

    View full-size slide

  20. @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 20

    View full-size slide

  21. Good points
    ④ style ͷ্ॻ͖ͷ͠΍͢͞
    • ഑ྻͰࢦఆͨ͠ޙऀ͕উͭͱ͍͏γϯϓϧ͞
    • className Ͱಉ༷ʹॻ͜͏ͱ͢ΔͱϥΠϒϥϦ͕ඞཁ
    • clsx
    • classnames
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 21

    View full-size slide

  22. ফ໣ points
    ϑϩϯτΤϯυࢹ఺ͰݟͨΊΜͲ͏ͩͬͨ఺
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 22

    View full-size slide

  23. ফ໣ points
    ① media query ͕ RN ʹແ͍
    • react-responsive ͳͲΛ࢖͑͹͍ۙ͜ͱ͸Ͱ͖Δ
    • SSR ΍ SSG ͷॳճඳըͰ͸ը໘෯͕Θ͔Βͳ͍
    • ϥΠϯλΠϜ࣌ʹॲཧ͞ΕϨΠΞ΢τγϑτ͕ى͜Δ
    • LP ΍ ίʔϙϨʔταΠτʹ͸޲͍͍ͯͳ͍
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 23

    View full-size slide

  24. ফ໣ points
    ② ٙࣅΫϥε͕ RN ʹແ͍
    • CSS ͷ :hover, :focus ͳͲ͕࢖͑ͳ͍
    • ϒϥ΢β͸Ϛ΢εૢ࡞ɺΩʔϘʔυૢ࡞͕લఏͳͷͰΫϦςΟ
    Χϧ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 24

    View full-size slide

  25. ফ໣ points
    ② ͷղܾࡦ: ϋϯυϥΛ࢖͏
    • ࣮͸ RN for Web ͕ಠࣗϋϯυϥΛ௥Ճͯ͘͠Ε͍ͯΔ
    • onHoverIn, onHoverOut
    • onFocus, onBlur
    • ͨͩܕʹ͸ແ͍ͷͰ֦ு͢Δඞཁ͋Γ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 25

    View full-size slide

  26. @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 26

    View full-size slide

  27. ফ໣ points
    ③ position: fixed; ͕ RN ʹແ͍
    • ܕΤϥʔʹͳΔ
    • any ΍ as Ͱಀ͛ͨ͘ͳΔ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 27

    View full-size slide

  28. ফ໣ points
    ③ ͷղܾࡦ1: ઃܭΛݟ௚͢
    ͜Εʹૺ۰ͨ͠৔߹͸ҎԼͷ֬ೝΛͨ͠ํ͕ྑͦ͞͏
    1. absolute ͡ΌͩΊͳͷ͔?
    2. Modal ίϯϙʔωϯτͰղܾ͠ͳ͍͔?
    3. ReactDOM ͷ portal Λղܾ͠ͳ͍͔?
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 28

    View full-size slide

  29. ফ໣ points
    ③ ͷղܾࡦ2: ܕͷΦʔόʔϥΠυ
    import 'react-native'
    declare module 'react-native' {
    interface ViewStyle {
    position: 'relative' | 'absolute' | 'fixed'
    }
    }
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 29

    View full-size slide

  30. ফ໣ points
    ④ linear-gradient ͕ RN ʹແ͍
    • ҰൠతʹݟΔҎԼॻ͖ํΛͯ͠΋൓ө͞Εͳ͍
    • background: 'linear-gradient(#00F, #F00)'
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 30

    View full-size slide

  31. ফ໣ points
    ④ ͷղܾࡦ: backgroundImage Λ࢖͏
    • linear-gradient() ͸ͦ΋ͦ΋ը૾σʔλܕΒ͍͠
    • url() ͱಉ༷
    backgroundImage: 'linear-gradient(#00F, #F00)'
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 31

    View full-size slide

  32. etc...
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 32

    View full-size slide

  33. ফ໣ points ͸ࠓޙղফ͞ΕΔ͔΋
    • React GUIͷొ৔Ͱঢ়گ͕มΘΓͦ͏
    • ফ໣ point ͸΄΅ղܾ͞Εͦ͏งғؾ
    • RN ʹ࢓༷͕౷߹͞ΕΔ or React GUI ͕ಠཱͯ͠ϦϦʔε͞
    ΕΔະདྷ͕͍͔ͭ͘Δ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 33

    View full-size slide

  34. RN ͱͷڞ௨ԽͷͨΊͷ෍ੴ
    React GUI ΁ͷ෍ੴ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 34

    View full-size slide

  35. ·ͱΊ
    • React Na(ve for Web ͸ web-only Ͱ΋ OK
    • Web ༻ UI ϥΠϒϥϦͱͯ͠༏लͰ͋Δ
    • ଟগͷফ໣͸൐͏͕ͳΜͱ͔ͳΓͦ͏
    • React GUI ʹظ଴
    "
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 35

    View full-size slide