Save 37% off PRO during our Black Friday Sale! »

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

25448e5eb61d4fd7b35ed73d722f9ad9?s=47 sawa-zen
October 02, 2021
1k

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

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

25448e5eb61d4fd7b35ed73d722f9ad9?s=128

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

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

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

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

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

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

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

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

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

    ! @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 10
  11. ࢥ͍ग़ͯ͠ཉ͍͠ ⛔ Write once, run anywhere ✅ Learn Once, Write

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

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

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

  15. React Na(ve for Web Λ ७ਮͳ Web ͷ UI ϥΠϒϥϦͱͯ͠

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

  17. Good points ① ϛχϚϧͰચ࿅͞Εͨઃܭ • View, Text Ͱ UI ΛߏஙͰ͖Δγϯϓϧ͞

    • div, span, pͳͲͰॻ͘ΑΓ΋௚ײత • ίϯϙʔωϯτ͕ҙঊΛ൐Θͳ͍ • ಠࣗʹελΠϧΛ౰ͯΔ͔ଞͷϥΠϒϥϦʹ৐Δ͔બ΂Δ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 17
  18. Good points ② ௚ײతͳ Accessibility ؔ࿈ͷهड़ܗࣜ • role Λઃఆ͢Ε͹ద੾ͳ DOM

    ʹม׵ͯ͘͠ΕΔ • View, Text ͰҰ୴ελΠϦϯά͚͔ͩͯ͠Β accessibility* prop Λޙ෇͚ͰରԠͰ͖Δ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 18
  19. Good points ③ ॏෳͨ͠ CSS ͷ࠷దԽ • ҎԼͷ৚݅Λຬͨͨ͠ style ͷ

    CSS ͸࢖͍ճ͞ΕΔ 1. StyleSheet.create Λ࢖ͬͯهड़͞Ε͍ͯΔ͜ͱ 2. ಉ͡ͷ key ͱ value ͷϖΞ͕ଞͰ࢖ΘΕ͍ͯΔ͜ͱ • Tailwind ͱ͍ۙײ֮ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 19
  20. @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 20

  21. Good points ④ style ͷ্ॻ͖ͷ͠΍͢͞ • ഑ྻͰࢦఆͨ͠ޙऀ͕উͭͱ͍͏γϯϓϧ͞ • className Ͱಉ༷ʹॻ͜͏ͱ͢ΔͱϥΠϒϥϦ͕ඞཁ

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

  23. ফ໣ points ① media query ͕ RN ʹແ͍ • react-responsive

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

    :focus ͳͲ͕࢖͑ͳ͍ • ϒϥ΢β͸Ϛ΢εૢ࡞ɺΩʔϘʔυૢ࡞͕લఏͳͷͰΫϦςΟ Χϧ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 24
  25. ফ໣ points ② ͷղܾࡦ: ϋϯυϥΛ࢖͏ • ࣮͸ RN for Web

    ͕ಠࣗϋϯυϥΛ௥Ճͯ͘͠Ε͍ͯΔ • onHoverIn, onHoverOut • onFocus, onBlur • ͨͩܕʹ͸ແ͍ͷͰ֦ு͢Δඞཁ͋Γ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 25
  26. @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 26

  27. ফ໣ points ③ position: fixed; ͕ RN ʹແ͍ • ܕΤϥʔʹͳΔ

    • any ΍ as Ͱಀ͛ͨ͘ͳΔ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 27
  28. ফ໣ points ③ ͷղܾࡦ1: ઃܭΛݟ௚͢ ͜Εʹૺ۰ͨ͠৔߹͸ҎԼͷ֬ೝΛͨ͠ํ͕ྑͦ͞͏ 1. absolute ͡ΌͩΊͳͷ͔? 2.

    Modal ίϯϙʔωϯτͰղܾ͠ͳ͍͔? 3. ReactDOM ͷ portal Λղܾ͠ͳ͍͔? @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 28
  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
  30. ফ໣ points ④ linear-gradient ͕ RN ʹແ͍ • ҰൠతʹݟΔҎԼॻ͖ํΛͯ͠΋൓ө͞Εͳ͍ •

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

    url() ͱಉ༷ backgroundImage: 'linear-gradient(#00F, #F00)' @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 31
  32. etc... @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 32

  33. ফ໣ points ͸ࠓޙղফ͞ΕΔ͔΋ • React GUIͷొ৔Ͱঢ়گ͕มΘΓͦ͏ • ফ໣ point ͸΄΅ղܾ͞Εͦ͏งғؾ

    • RN ʹ࢓༷͕౷߹͞ΕΔ or React GUI ͕ಠཱͯ͠ϦϦʔε͞ ΕΔະདྷ͕͍͔ͭ͘Δ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 33
  34. RN ͱͷڞ௨ԽͷͨΊͷ෍ੴ React GUI ΁ͷ෍ੴ @sawa-zen (2021/10/2) React Na4ve Matsuri

    2021 34
  35. ·ͱΊ • React Na(ve for Web ͸ web-only Ͱ΋ OK

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